uni-app⼩程序——商城（8）——订单详情
我们上⼀篇⽂章中写到了商品详情页的设计和实施，本篇⽂章讲述了订单详情，订单详情⽆⾮就是对商品的⼏种状态进⾏分类，参考某宝，把商品分为待付款、待发货、待收货、已完成等⼏种状态，然后使⽤Vant Weapp组件中的“Tab 标签页”对其状态进⾏分类，然后使
⽤“Card 商品卡⽚”组件将商品展⽰到对应的标签页下。
效果图如下：
在“Card 商品卡⽚”中使⽤了⼀个tag插槽在右上⾓使⽤不⽤的颜⾊和⽂字来标明该商品的状态，在全部订单中，可以看到所有状态的商品信息。
具体代码如下：
<template>
<view class="orderTabs">
<!-- 设置全部订单头部导航栏
sticky开启粘性布局
swipeable开启滑动切换标签页
-->
<van-tabs sticky @click="orderTabs" :active="active">
<van-tab v-for="item in navArr" :title="item.title" :name="item.name" :key="item.name">
<view class="navTabs">
<van-swipe-cell v-for="(datas,index) in showDatas" :key="derId">
<view class="chengboxs">
</view>
<van-card class="goods-card" :desc="'订单号:'+derId" :num="derNum" :price="derPrice)"
:title="derTitle" :thumb="datas.thumb">
<view slot="tags">
<van-tag class="vantags" v-if="tagsShow" size="medium" :type="derType">{{derStateText}}</van-tag>
</view>
</van-card>
</van-swipe-cell>
</view>
</van-tab>
</van-tabs>
</view>
</template>
<script>
export default {
data() {
return {
active: 'all', //默认的显⽰状态
showDatas: [], //需要显⽰的数据
showDatas: [], //需要显⽰的数据
tagsShow: true,
navArr: [{
title: '全部订单',
name: 'all'
},
{
title: '待付款',
name: 'dfk'
},
{
title: '待发货',
name: 'dfh'
},
{
title: '待收货',
name: 'dsh'
},
{
title: '已完成',
name: 'ywc'
},
{
title: '已取消',
name: 'yqx'
}
],
navDatas: [{
orderId: 202008010001,
orderState: 'dfk',
orderStateText: '待付款',
orderType: 'primary',
orderTitle: '三只松⿏⼤礼包(1)',
orderPrice: 19.00,
orderNum: 1,
thumb: '/static/images/goodsimg/szss.jpg'    },
{
orderId: 202008010002,
orderState: 'dfh',
orderStateText: '待发货',
orderType: 'primary',
orderTitle: '三只松⿏⼤礼包(2)',
orderPrice: 29.00,
orderNum: 2,
thumb: '/static/images/goodsimg/szss.jpg'    },
{
orderId: 202008010003,
orderState: 'dsh',
orderStateText: '待收货',
orderType: 'primary',
orderTitle: '三只松⿏⼤礼包(3)',
orderPrice: 39.00,
orderNum: 3,
thumb: '/static/images/goodsimg/szss.jpg'    },
{
orderId: 202008010004,
orderState: 'ywc',
orderStateText: '已完成',
orderType: 'success',
orderTitle: '三只松⿏⼤礼包(4)',
orderPrice: 49.00,
orderNum: 4,
thumb: '/static/images/goodsimg/szss.jpg'
thumb: '/static/images/goodsimg/szss.jpg'
},
{
orderId: 202008010005,
orderState: 'yqx',
orderStateText: '已取消',
orderType: 'warning',
orderTitle: '三只松⿏⼤礼包(5)',
orderPrice: 59.00,
orderNum: 5,
thumb: '/static/images/goodsimg/szss.jpg'
},
{
orderId: 202008010005,
orderState: 'dfk',
orderStateText: '待付款',
orderType: 'primary',
orderTitle: '三只松⿏⼤礼包(6)',
orderPrice: 69.00,
orderNum: 6,
thumb: '/static/images/goodsimg/szss.jpg'
}
]
}
},
onLoad() {
},
methods: {
//标签切换
orderTabs(e) {
var that = this;
that.showDatas = [];
console.log(e.detail);
for (var i = 0; i < that.navDatas.length; i++) {
if (e.detail.name == that.navDatas[i].orderState) {      that.showDatas.push(that.navDatas[i])
} else if (e.detail.name == 'all') {
that.showDatas = that.navDatas
}
}
console.log(that.showDatas);
},
//计算价格
formatPrice(price) {
Fixed(2);
},
},
onLoad: function(option) {
this.active = option.active
this.showDatas = [];
for (var i = 0; i < this.navDatas.length; i++) {
if (option.active == this.navDatas[i].orderState) {    this.showDatas.push(this.navDatas[i])
} else if (option.active == 'all') {
this.showDatas = this.navDatas
}
}
}
}
</script>
<style>
.navTabs {
width: 100%;
height: 100%;
height: 100%;
margin-bottom: 5%;
}
.navTabs .goods-card {
写文章的小程序margin-bottom: 20rpx;
}
.vantags {
position: absolute;
top: -2rpx;
right: -20rpx;
}
.chengboxs {
margin-top: 10rpx;
}
</style>
订单详情的页的设计和实施还是⽐较简单的，本篇⽂章就先写到这⾥，如果⽂章内容有什么有误的地⽅，还望斧正，谢谢~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。