project/mobile-shop/pages/list/list.vue

<template>
	<view class="list">
		<van-tabs sticky animated :active="active" @change="onChange">
			<van-tab title="待付款">
				<view  v-for="(order, index) in orders.records" :key="order">
					<view class="order-list" v-for="(item,index1) in order.orderItemDtos" :key="index1">
						<van-card :num="item.prodCount" :price="item.price" :desc="item.skuName" :title="item.prodName"
							:thumb="item.pic">
							<view slot="footer">
								<van-button size="mini" type="danger" @click="payNow(order)">去付款</van-button>
							</view>
						</van-card>
					</view>
					<van-cell center title="订单号" :value="order.orderNumber" :border="false" />
					<van-cell center title="订单号" :value="'￥' + order.actualTotal" />
				</view>
				<van-empty v-if="orders.records.length == 0" description="当前内容为空" />
			</van-tab>
			<van-tab title="待发货">
				<view v-for="(order, index) in orders.records" :key="order">
					<view class="order-list" v-for="(item,index1) in order.orderItemDtos" :key="index1">
						<van-card :num="item.prodCount" :price="item.price" :desc="item.skuName" :title="item.prodName"
							:thumb="item.pic">
						</van-card>
					</view>
					<van-cell center title="订单号" :value="order.orderNumber" :border="false" />
					<van-cell center title="订单号" :value="'￥' + order.actualTotal" />
				</view>
				<van-empty v-if="orders.records.length == 0" description="当前内容为空" />
			</van-tab>
			<van-tab title="待收货">
				<view v-for="(order, index) in orders.records" :key="order">
					<view class="order-list" v-for="(item,index1) in order.orderItemDtos" :key="index1">
						<van-card :num="item.prodCount" :price="item.price" :desc="item.skuName" :title="item.prodName"
							:thumb="item.pic">
						</van-card>
					</view>
					<van-cell center title="订单号" :value="order.orderNumber" :border="false" />
					<van-cell center title="订单号" :value="'￥' + order.actualTotal" />
				</view>
				<van-empty v-if="orders.records.length == 0" description="当前内容为空" />
			</van-tab>
			<van-tab title="待评价">
				<view v-for="(order, index) in orders.records" :key="order">
					<view class="order-list" v-for="(item,index1) in order.orderItemDtos" :key="index1">
						<van-card :num="item.prodCount" :price="item.price" :desc="item.skuName" :title="item.prodName"
							:thumb="item.pic">
						</van-card>
					</view>
					<van-cell center title="订单号" :value="order.orderNumber" :border="false" />
					<van-cell center title="订单号" :value="'￥' + order.actualTotal" />
				</view>
				<van-empty v-if="orders.records.length == 0" description="当前内容为空" />
			</van-tab>
		</van-tabs>

	</view>
</template>

<script>
	import {
		myOrder,
		pay
	} from '@/api/order.js'
	export default {
		data() {
			return {
				active: 0,
				orders: {
					records: []
				},
				fatch: {
					current: 1,
					status: 1
				}
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			onChange(event) {
				this.active = event.detail.name;
				this.init();
			},
			 payNow(order) {
				 let _this = this
				 pay({
					orderNumbers: order.orderNumber,
					payType: 1
				}).then(res => {
					uni.showModal({
						title: '支付成功',
						content: '恭喜您支付已完成',
						success: function(res) {
							_this.init()
						}
					})
				})
			},
			async init() {
				this.fatch.status = this.active + 1;
				const result = await myOrder(this.fatch)
				this.orders.records = [];
				if (result.records.length > 0) {
					this.orders.records = [...result.records]
				}
			}
		}
	}
</script>

<style lang="less">

</style>