我需要一个"设备预扣除详情"页面, 展示完整的扣除记录, 设备所属商户,设备信息, 以及扣除余额信息,退还扣除信息
每一项都使用卡片进行布局, 卡片之间有间距, 展示布局如下:
1 基础信息, 这是主要的展示内容,布局如下
- 标题: 基础信息
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5
- 扣除金额: 左右布局,右侧展示 抵扣的金额,
- 添加时间: 左右布局,右侧展示 时间值, 格式为 年-月-日 时:分
- 抵扣状态: 左右布局,右侧展示 抵扣状态, 有: 等待扣除,已扣除,已取消,已撤销扣除
- 抵扣说明: 展示说明原因, 内容比较多, 请考虑到会有多行的情况, 需要有背景色,凸显出来
- 分割线
- f取消时间: 如果有取消, 展示取消时间, 格式为 年-月-日 时:分
- 取消原因: 如果有取消, 展示取消原因, 内容比较多, 请考虑到会有多行的情况, 需要有背景色,凸显出来
2. 设备信息, 展示设备终端信息,
- 标题: 设备信息 ,末尾供一个复制按钮,
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5
- 设备号: 展示当前设备机身号, 使用左右布局, 左侧展示号码
- 平台: 左右布局,右侧展示 平台名称
3. 商户信息, 展示设备所属商户信息, 需要考虑到没有商户的情况, 需要展示为 "暂未绑定商户" 据中展示,需要在标题和分割线之后
- 标题: 商户信息 ,末尾供一个复制按钮
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5,
- 商户号: 左右布局, 展示商户号,
- 商户名: 左右布局, 展示商户名称
4. 扣款信息, 如果有则展示,
- 标题: 扣款信息
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5,
- 扣款金额: 右侧展示扣款金额
- 扣款时间: 右侧展示扣款时间, 格式为 年-月-日 时:分
5. 退还信息, 当有取消扣款时才会展示, 没有则不展示
- 标题: 退还信息
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5,
- 退还金额: 右侧展示退还金额
- 退还时间: 右侧展示退还时间, 格式为 年-月-日 时:分
数据格式如下,请配合使用,
```
{
"f详情": {
"f扣款": {
"f主键": "SBK000004TUP14E6HVM0",
"f添加时间": 1778493434000,
"f抵扣说明": "测试",
"f抵扣时间": null,
"f扣除金额分": 12000,
"f取消扣除原因": null,
"f取消时间": null,
"f数据状态": "等待扣除",
"f机身终端号": "000006029212003632",
"f平台": "盛意旺"
},
"f设备": {
"terminalBodyNumber": "000006029212003632",
"merchantNo": "43389579",
"deviceType": "POS机",
"deviceSource": "虚拟码牌",
"bindingTime": 1733912075000,
"platform": "盛意旺"
},
"f商户": {
"f政策主键": "ZC-2026-BZ",
"merchantNo": "43389579",
"merchantName": "江北**营部",
"legalPerson": "张*城",
"networkAccess": 1733846400000
},
"f扣除记录": {
"balanceId": 1,
"amount": 644,
"creationTime": 1596180834000,
"htmlContent": "扣除说明"
},
"f退还记录": {
"balanceId": 1,
"amount": 644,
"creationTime": 1596180834000,
"htmlContent": "退还说明"
}
}
}
```
颜色: 主题颜色以橘红色和橙色为主, 蓝色,绿色为辅, 颜色需要高亮色，鲜艳.
设备: 我的应用是手机移动端的, 不用考虑响应式布局
样式: style 请使用 lang="scss", 相关的节点的样式请使用 scss 中的层级嵌套,以便查阅.
代码: 需要提供 uni-app 的 vue2 代码, 我的程序需要兼容微信小程序, 请使用uni-app 的节点, view,text,image 等节点,
图标: 我下载了 fontawesome-free-6.4.0-web 图标库, 请使用其中的图标. 我将里面的所有图标都放在了 /static/icons目录下,请按照此路径引用, 这些图标都是svg格式的.