project/project2/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">
						</van-card>
					</view>
					<van-cell center title="订单号" :value="order.orderNumber" :label="'￥' + order.actualTotal" />
				</view>
			</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" :label="'￥' + order.actualTotal" />
				</view>
			</van-tab>
			<van-tab title="待收货">
				<view @click="payNow(order)" 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" :label="'￥' + order.actualTotal" />
				</view>
			</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" :label="'￥' + order.actualTotal" />
				</view>
			</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();
			},
			async payNow(order) {
				await pay({
					orderNumbers: order.orderNumber,
					payType: 1
				})
				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>