gas-cylinder-h5/pages/order/index.vue

<template>
	<!-- 订单 -->
	<view class="card_order">
		<view class="top_cardOrder">
			<u-tabs :list="list1" lineColor="#333333" lineWidth="60" :scrollable="false" :current="current"
				@change="tabClick"></u-tabs>
		</view>
		<view class="cardOrder_tab"></view>
		<view class="card_order_manag" v-if="current == 0">
			<orderManagement :datalist="datalist" @confirmedDelivery="confirmedDelivery"></orderManagement>
		</view>
		<!-- 待配送 -->
		<view class="card_order_manag" v-if="current == 1">
			<orderManagement :datalist="datalist" @confirmedDelivery="confirmedDelivery"></orderManagement>
		</view>
		<!-- 配送中 -->
		<view class="card_order_manag" v-if="current == 2">
			<orderManagement :datalist="datalist"></orderManagement>
		</view>
		<!-- 已送达 -->
		<view class="card_order_manag" v-if="current == 3">
			<orderManagement :datalist="datalist"></orderManagement>
		</view>
		<!-- 已取消 -->
		<view class="card_order_manag" v-if="current == 4">
			<orderManagement :datalist="datalist"></orderManagement>
		</view>
		<view class="card_empty" v-if="datalist.length === 0">
			<u-empty mode="order"></u-empty>
		</view>
		<u-modal width="450rpx" :show="show" showCancelButton :content='title' @cancel="show = false"
			@confirm="expurgate"></u-modal>
	</view>
</template>

<script>
	// 订单
	import orderManagement from '@/components/orderManagement.vue'
	export default {
		components: {
			orderManagement,
		},
		data() {
			return {
				current: 0,
				list1: [{
					name: '全部',
				}, {
					name: '待配送',
				}, {
					name: '配送中'
				}, {
					name: '已送达'
				}, {
					name: '已取消'
				}],
				datalist: [],
				show: false,
				title: '订单删除后无法恢复是否删除订单？',
				orderId: null,
			}
		},
		// onTabItemTap() {
		// 	this.getOrderList()
		// },
		mounted() {
			uni.$on('refresh', () => {
				this.getOrderList()
			})
			var token = this.$cache.getToken()
			if (token) {
				this.getOrderList()
			}
		},
		methods: {
			// 获取订单列表
			getOrderList(stateType) {
				this.$api.get('/api/applet/order', {
					state: stateType,
				}).then(res => {
					if (res.code == 200) {
						this.datalist = res.data.list
					} else {
						this.datalist = []
					}
				})
			},
			confirmedDelivery(orderId) {
				this.show = true
				this.orderId = orderId
			},
			// 取消订单
			expurgate() {
				this.$api.post('/api/applet/order/cancel', {
					id: this.orderId,
				}).then(res => {
					if (res.code == 200) {
						this.show = false
						this.getOrderList(this.current)
					}
				})
			},
			tabClick(row) {
				// console.log(row, 26)
				if (row.index == 1) {
					this.getOrderList(1)
				} else if (row.index == 2) {
					this.getOrderList(5)
				} else if (row.index == 3) {
					this.getOrderList(3)
				} else if (row.index == 4) {
					this.getOrderList(4)
				} else {
					this.getOrderList()
				}
				this.current = row.index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top_cardOrder {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 1;
		padding: 10rpx;
		padding-top: var(--status-bar-height);
	}

	.cardOrder_tab {
		width: 100%;
		height: 88rpx;
		padding-top: var(--status-bar-height);
	}

	.card_empty {
		padding-top: 30%;
	}

	.card_order_manag {
		margin-bottom: 50rpx;
	}
</style>