我需要一个"收益记录"页面,展示自己的所有收益来源,页面有以下功能
1 搜索条件: 使用卡片布局, 需要有点缀, 有以下搜索条件:
- 搜索框: 提供一个搜索框, 需要展示搜索图标, 搜索框,查询按钮, 更多条件按钮, 点击更多按钮 展示下面搜索条件
- 收益日期: 查询指定日期的收益记录
- 收支类型: 点击后台弹出 收益类型选择, 使用 picker 组件展示 ,有[分润收益, 设备激活奖励, 达标退还押金, 押金反佣]
- 收益分类: 点击后台弹出 收益类型选择, 使用 picker 组件展示 ,有[个人_收益,团队_收益,个人_消费,个人_退还]
2 收益记录展示: 每一条记录都是用卡片展示, 有收入和支出, 这两种需要不同的背景色展示 (typeOf, true 收入, false 支出), 背景色需要渐变色, 卡片展示以下内容
- 顶部栏: 展示主要的信息, 左右布局, 左侧展示收益/支出金额 (amount), 右侧展示 收支类型 (operationType), 底部需要下划线进行分割
- 收支编号: 展示收支的唯一编号 (balanceId), 需要加粗着重显示, 右侧展示复制按钮
- 收益时间: 展示收益的时间 (creationTime), 格式为 年-月-日 时:分:秒
- 来源说明: 展示此笔收益的来源说明 (htmlContent) , 使用 v-html 来渲染
后端返回的数据结构如下
```
[{
"balanceId": 2891236,
"userId": 41,
"state": 0,
"belong": "SYS_JHBF",
"amount": 0.0,
"entry": 1.0,
"creationTime": 1776310131000,
"typeOf": true,
"operationType": "分润收益",
"operationClassify": "个人_分润",
"htmlContent": "商户:,交易:50.0元,补贴:0.01元",
"invisible": false,
"taxPoint": 9,
"profitPoint": 0.0,
"vipId": 0,
"sourceId": "000000004TOIESETI740",
"retrieval": "",
"walletType": "分润补贴"
}]
```
需要你对数据进行解析, 展示在卡片中.
颜色: 主题颜色以橘红色和橙色为主, 蓝色,绿色为辅, 颜色需要高亮色，鲜艳.
设备: 我的应用是手机移动端的, 不用考虑响应式布局
样式: style 请使用 lang="scss", 相关的节点的样式请使用 scss 中的层级嵌套,以便查阅.
代码: 需要提供 uni-app 的 vue2 代码, 我的程序需要兼容微信小程序, 请使用uni-app 的节点, view,text,image 等节点,
图标: 我下载了 fontawesome-free-6.4.0-web 图标库, 请使用其中的图标. 我将里面的所有图标都放在了 /static/icons目录下,请按照此路径引用, 这些图标都是svg格式的.