我们上一篇文章中写到了商品详情页的设计和实施，本篇文章讲述了订单详情，订单详情无非就是对商品的几种状态进行分类，参考某宝，把商品分为待付款、待发货、待收货、已完成等几种状态，然后使用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="datas.orderId">
						<view class="chengboxs">
						</view>
						<van-card class="goods-card" :desc="'订单号:'+datas.orderId" :num="datas.orderNum" :price="formatPrice(datas.orderPrice)"
						 :title="datas.orderTitle" :thumb="datas.thumb">
							<view slot="tags">
								<van-tag class="vantags" v-if="tagsShow" size="medium" :type="datas.orderType">{{datas.orderStateText}}</van-tag>
							</view>
						</van-card>
					</van-swipe-cell>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 'all', //默认的显示状态
				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'
					},
					{
						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) {
				return price.toFixed(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%;
		margin-bottom: 5%;
	}

	.navTabs .goods-card {
		margin-bottom: 20rpx;
	}

	.vantags {
		position: absolute;
		top: -2rpx;
		right: -20rpx;
	}

	.chengboxs {
		margin-top: 10rpx;
	}
</style>

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