107 lines
3.2 KiB
Markdown
107 lines
3.2 KiB
Markdown
# 订单记录页面悬浮发票按钮
|
||
|
||
## 功能说明
|
||
|
||
在订单记录页面添加了一个悬浮的开具发票按钮，用户可以随时点击进入发票开具流程，无需返回首页。
|
||
|
||
## 功能特性
|
||
|
||
### 1. 悬浮按钮设计
|
||
- **位置**: 固定在页面右下角，距离右边距30rpx，距离底部120rpx
|
||
- **尺寸**: 120rpx × 120rpx 的圆形按钮
|
||
- **样式**: 渐变背景色（红色到橙色），带有阴影效果
|
||
- **层级**: z-index: 999，确保按钮始终显示在最上层
|
||
|
||
### 2. 按钮内容
|
||
- **图标**: 使用 `paperplane` 图标，表示发票功能
|
||
- **文字**: "开具发票" 标签，清晰说明按钮功能
|
||
- **布局**: 图标在上，文字在下，垂直居中对齐
|
||
|
||
### 3. 交互效果
|
||
- **点击反馈**: 点击时有缩放和阴影变化效果
|
||
- **过渡动画**: 所有状态变化都有平滑的过渡效果
|
||
- **悬停效果**: 按钮具有现代化的视觉反馈
|
||
|
||
## 使用方法
|
||
|
||
### 1. 访问订单记录页面
|
||
- 在课程相关页面中进入"订单记录"
|
||
- 页面右下角会显示悬浮的发票按钮
|
||
|
||
### 2. 点击开具发票
|
||
- 点击悬浮按钮
|
||
- 自动跳转到发票选择页面
|
||
- 选择要开票的课程后进入发票信息填写页面
|
||
|
||
### 3. 完成开票流程
|
||
- 填写发票信息
|
||
- 提交表单
|
||
- 返回订单记录页面
|
||
|
||
## 技术实现
|
||
|
||
### 1. 按钮结构
|
||
```vue
|
||
<!-- 悬浮发票按钮 -->
|
||
<view class="floating-invoice-btn" @click="goToInvoice">
|
||
<uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
|
||
<text class="btn-text">开具发票</text>
|
||
</view>
|
||
```
|
||
|
||
### 2. 跳转方法
|
||
```javascript
|
||
// 跳转到开具发票页面
|
||
const goToInvoice = () => {
|
||
uni.navigateTo({
|
||
url: '/pages_course/invoice/invoice'
|
||
})
|
||
}
|
||
```
|
||
|
||
### 3. 样式特点
|
||
- 使用 `position: fixed` 实现悬浮定位
|
||
- 渐变背景色增强视觉效果
|
||
- 阴影效果提升层次感
|
||
- 响应式设计适配不同设备
|
||
|
||
## 页面流程
|
||
|
||
1. **订单记录页面** → 显示悬浮发票按钮
|
||
2. **点击按钮** → 跳转到发票选择页面
|
||
3. **选择课程** → 进入发票信息填写页面
|
||
4. **填写信息** → 提交发票申请
|
||
5. **返回页面** → 回到订单记录页面
|
||
|
||
## 设计优势
|
||
|
||
### 1. 用户体验
|
||
- **便捷访问**: 无需返回首页，直接在订单页面即可开票
|
||
- **视觉突出**: 悬浮按钮醒目，用户容易发现
|
||
- **操作简单**: 一键点击即可进入开票流程
|
||
|
||
### 2. 界面设计
|
||
- **现代化**: 渐变色彩和阴影效果符合现代UI设计趋势
|
||
- **一致性**: 与整体页面风格保持一致
|
||
- **响应性**: 支持触摸反馈和动画效果
|
||
|
||
### 3. 功能完整
|
||
- **流程完整**: 从订单记录到发票开具的完整流程
|
||
- **页面跳转**: 正确的路由配置和页面跳转
|
||
- **状态管理**: 按钮状态和页面状态的有效管理
|
||
|
||
## 注意事项
|
||
|
||
1. 悬浮按钮使用固定定位，不会随页面滚动而移动
|
||
2. 按钮层级较高，确保在各种情况下都能正常显示
|
||
3. 支持触摸反馈，提供良好的移动端体验
|
||
4. 按钮位置经过精心设计，不会遮挡页面内容
|
||
|
||
## 后续优化建议
|
||
|
||
1. 可以添加按钮的显示/隐藏控制
|
||
2. 可以增加按钮的动画效果
|
||
3. 可以添加按钮的权限控制
|
||
4. 可以优化按钮在不同设备上的显示效果
|
||
5. 可以添加按钮的使用统计功能
|