Uni app wechat applet - Mall (8) - order details

In our last article, we wrote about the design and implementation of the product details page , This article describes the order details , Order details are nothing more than the classification of several states of goods , Refer to a treasure , Divide the goods into pending payments 、 To be delivered 、 To be received 、 Completed and other States , And then use Vant Weapp In the component “Tab TAB ” Classify its status , And then use “Card Commodity card ” The component displays the goods under the corresponding tab .

The renderings are as follows ：

stay “Card Commodity card ” Used a tag The slot uses unused colors and words in the upper right corner to indicate the status of the product , In all orders , You can see the product information in all States .

The specific code is as follows ：

<template>
	<view class="orderTabs">
		<!--  Set all order header navigation bar 
			sticky Turn on sticky layout 
			swipeable Open the slide switch tab 
		-->
		<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="' The order number :'+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', // The default display state 
				showDatas: [], // The data that needs to be displayed 
				tagsShow: true,
				navArr: [{
						title: ' All orders ',
						name: 'all'
					},
					{
						title: ' To be paid ',
						name: 'dfk'
					},
					{
						title: ' To be delivered ',
						name: 'dfh'
					},
					{
						title: ' To be received ',
						name: 'dsh'
					},
					{
						title: ' Completed ',
						name: 'ywc'
					},
					{
						title: ' Cancelled ',
						name: 'yqx'
					}
				],
				navDatas: [{
						orderId: 202008010001,
						orderState: 'dfk',
						orderStateText: ' To be paid ',
						orderType: 'primary',
						orderTitle: ' Three squirrel gift bags (1)',
						orderPrice: 19.00,
						orderNum: 1,
						thumb: '/static/images/goodsimg/szss.jpg'
					},
					{
						orderId: 202008010002,
						orderState: 'dfh',
						orderStateText: ' To be delivered ',
						orderType: 'primary',
						orderTitle: ' Three squirrel gift bags (2)',
						orderPrice: 29.00,
						orderNum: 2,
						thumb: '/static/images/goodsimg/szss.jpg'
					},
					{
						orderId: 202008010003,
						orderState: 'dsh',
						orderStateText: ' To be received ',
						orderType: 'primary',
						orderTitle: ' Three squirrel gift bags (3)',
						orderPrice: 39.00,
						orderNum: 3,
						thumb: '/static/images/goodsimg/szss.jpg'
					},
					{
						orderId: 202008010004,
						orderState: 'ywc',
						orderStateText: ' Completed ',
						orderType: 'success',
						orderTitle: ' Three squirrel gift bags (4)',
						orderPrice: 49.00,
						orderNum: 4,
						thumb: '/static/images/goodsimg/szss.jpg'
					},
					{
						orderId: 202008010005,
						orderState: 'yqx',
						orderStateText: ' Cancelled ',
						orderType: 'warning',
						orderTitle: ' Three squirrel gift bags (5)',
						orderPrice: 59.00,
						orderNum: 5,
						thumb: '/static/images/goodsimg/szss.jpg'
					},
					{
						orderId: 202008010005,
						orderState: 'dfk',
						orderStateText: ' To be paid ',
						orderType: 'primary',
						orderTitle: ' Three squirrel gift bags (6)',
						orderPrice: 69.00,
						orderNum: 6,
						thumb: '/static/images/goodsimg/szss.jpg'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			// Label switching 
			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);
			},
			// Calculate the price 
			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>

The design and implementation of the order details page is relatively simple , This article will be written here first , If there is anything wrong with the content of the article , Still hope more , thank you ~