uni-app微信小程序——商城(8)——订单详情

 

我们上一篇文章中写到了商品详情页的设计和实施,本篇文章讲述了订单详情,订单详情无非就是对商品的几种状态进行分类,参考某宝,把商品分为待付款、待发货、待收货、已完成等几种状态,然后使用Vant Weapp组件中的“Tab 标签页”对其状态进行分类,然后使用“Card 商品卡片”组件将商品展示到对应的标签页下。

效果图如下:

uni-app微信小程序——商城(8)——订单详情_第1张图片

uni-app微信小程序——商城(8)——订单详情_第2张图片

 

uni-app微信小程序——商城(8)——订单详情_第3张图片

在“Card 商品卡片”中使用了一个tag插槽在右上角使用不用的颜色和文字来标明该商品的状态,在全部订单中,可以看到所有状态的商品信息。

具体代码如下:






订单详情的页的设计和实施还是比较简单的,本篇文章就先写到这里,如果文章内容有什么有误的地方,还望斧正,谢谢~

你可能感兴趣的:(#,uni-app之微信小程序,vue,小程序,前端)