订单列表页

订单列表页

功能点：

1. 按照订单类型切换搜索的tab

• 目前不做分类，只有显示全部的tab
• 有多tab时，切换tab时数据变化

2. 按照关键字搜索具体订单的input框
   

• 关键字支持 商铺名，商品名
• 不用限定时间，搜索用户全部数据
• 滑出屏幕不用固定处理
• 点击跳页搜索

3. 订单展示列表

• 分页展示，每页10条；
• 下滑到底部触发分页，扩展Com-list组件上支持

4. 订单卡片

• 点击卡片跳转对应订单详情页
• 订单状态：
  待支付，已支付（准备货物中，可以考虑去掉），已取消，配送中，已完成
• 商铺信息：
  商铺icon，商铺名称，商铺满减活动（有的话），点击商铺名跳转对应商铺详情页面。
• 订单包含sku信息：
  商品icon，商品名称（区分单个商品和多个商品的ui展示），实际支付的订单价格，商品件数
• 订单状态对应支持功能按钮：
  

待支付：“去支付”，“取消订单(详情)”
暂时去掉此状态！已支付（准备货物中，可以考虑去掉 或者 随机一个1-3分钟的准备时间）：“再来一单”，“取消订单(详情)” 
已取消：“再来一单”，“电话商家(详情)”
配送中：“再来一单”，“电话商家(详情)”
已送达：“再来一单”，“去评价”，“电话商家(详情)”

ui

订单卡片展示参考：

• 订单包含一个商品：展示商品具体名称，建议可以把规格也展示（有的话）

• 订单包含多个商品：只展示商品图片，具体信息在相亲页展示

订单卡片状态对应颜色：

• 待支付0：红色 @error-6
• 已支付1（准备货物中，可以考虑去掉）：绿色 @success-3
• 已取消2：灰色 @text-2
• 配送中3：黑色 @text-5
• 已送达4：绿色 @success-3

按钮对应颜色：

• 去支付: green
• 再来一单: blue
• 去评价: green
• 电话商家: normal
• 取消订单: normal

数据源

[note]