我需要一个"收益记录"页面,展示自己的所有收益来源,页面有以下功能
1 搜索条件: 使用卡片布局, 需要有点缀, 有以下搜索条件:
- 搜索框: 提供一个搜索框, 需要展示搜索图标, 搜索框,查询按钮, 更多条件按钮, 点击更多按钮 展示下面搜索条件
- 收益日期: 查询指定日期的收益记录
- 收支类型: 点击后台弹出 收益类型选择, 使用 picker 组件展示 ,有[分润收益, 设备激活奖励, 达标退还押金, 押金反佣]
- 收益分类: 点击后台弹出 收益类型选择, 使用 picker 组件展示 ,有[个人_收益,团队_收益,个人_消费,个人_退还]
2 收益记录展示: 每一条记录都是用卡片展示, 有收入和支出, 这两种需要不同的背景色展示, 背景色需要渐变色, 卡片展示以下内容
- 顶部栏: 展示主要的信息, 左右布局, 左侧展示收益/支出金额, 右侧扎实 收支类型, 底部需要下划线进行分割
- 收支编号: 展示收支的唯一编号, 需要加粗着重显示, 右侧展示复制按钮
- 收益时间: 展示收益的时间, 格式为 年-月-日 时:分:秒
- 来源说明: 展示此笔收益的来源说明
颜色: 主题颜色以橘红色和橙色为主, 蓝色,绿色为辅, 颜色需要高亮色，鲜艳.
设备: 我的应用是手机移动端的, 不用考虑响应式布局
样式: style 请使用 lang="scss", 相关的节点的样式请使用 scss 中的层级嵌套,以便查阅.
代码: 需要提供 uni-app 的 vue2 代码, 我的程序需要兼容微信小程序, 请使用uni-app 的节点, view,text,image 等节点,
图标: 我下载了 fontawesome-free-6.4.0-web 图标库, 请使用其中的图标. 我将里面的所有图标都放在了 /static/icons目录下,请按照此路径引用, 这些图标都是svg格式的.