我需要一个"押金设置"页面, 使用步骤条的方式进行展示操作, 一步一步的完成设置,
每一项都使用卡片进行布局, 卡片之间有间距, 展示布局如下:
1 步骤1: 选择设备, 内容如下,
- 标题: 展示当前步骤的标题
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5
- 提供一个文本输入框, 用户需要输入设备号,文本框后面有两个按钮, 一个是扫码按钮,点击后唤起扫码,一个是查询按钮, 点击后查询此设备数据
- 设备信息: 展示查询到的设备信息, 展示终端号码, 展示终端平台, 展示设备名称
- 下一步按钮: 点击后锁定当前步骤, 开启下一个步骤,
2. 步骤2: 押金模式选择, 内容如下
- 标题: 展示当前步骤的标题
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5
- 提供一个下拉选择, 点击后选择 押金, 使用 <picker></picker> 组件来实现, 样式需要和输入框一样
- 下一步: 点击后锁定当前步骤, 开启下一个步骤,
3. 步骤3: 询问核对, 展示上面两步骤的内容信息,然后提供确定按钮,内容如下
- 标题: 展示当前步骤的标题
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5
- 设备号: 步骤1 中输入的设备号
- 押金模式: 步骤2 中选择的押金模式
- 确定按钮: 点击后提交设置, 然后进入下一步
4. 步骤4: 订单支付码展示, 这是最后一步, 展示订单支付码
- 标题: 展示当前步骤的标题
- 分割线: 展示一个分割线, 高度为1rpx, 颜色为 #e5e5e5
- 支付码展示: 展示一个二维码, 生成代码时只需要一个一个占位图片,
需要收集输入的数据
颜色: 主题颜色以橘红色和橙色为主, 蓝色,绿色为辅, 颜色需要高亮色，鲜艳.
设备: 我的应用是手机移动端的, 不用考虑响应式布局
样式: style 请使用 lang="scss", 相关的节点的样式请使用 scss 中的层级嵌套,以便查阅.
代码: 需要提供 uni-app 的 vue2 代码, 我的程序需要兼容微信小程序, 请使用uni-app 的节点, view,text,image 等节点,
图标: 我下载了 fontawesome-free-6.4.0-web 图标库, 请使用其中的图标. 我将里面的所有图标都放在了 /static/icons目录下,请按照此路径引用, 这些图标都是svg格式的.