gas-cylinder-app/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">
			<orderManagement :key="Math.random()" :datalist="datalist" @toDeliver="toDeliver"
				@delDelivery="delDelivery"></orderManagement>
		</view>
		<view class="card_empty" v-if="datalist.length === 0">
			<u-empty mode="order"></u-empty>
		</view>
	</view>
</template>

<script>
	// 订单
	import orderManagement from '@/components/orderManagement.vue'
	export default {
		components: {
			orderManagement,
		},
		data() {
			return {
				current: 0,
				list1: [{
					name: '全部',
				}, {
					name: '待配送',
				}, {
					name: '配送中'
				}, {
					name: '已送达'
				}, {
					name: '已取消'
				}],
				datalist: [],
				Pagination: {
					PageIndex: 1,
					PageSize: 20,
					Total: 0,
				},
				loadingMore: true,
			}
		},
		onTabItemTap() {
			this.getOrderList()
		},
		mounted() {
			uni.$on('refresh', () => {
				this.datalist = []
				this.getOrderList()
			})
			var token = this.$cache.getToken()
			if (token) {
				this.getOrderList()
			}
		},
		methods: {
			// 触底事件
			bottomingEvent() {
				if (!this.loadingMore) {
					this.getOrderList()
				}
			},
			// 获取订单列表
			getOrderList() {
				this.$api.get('/api/order/delivery', {
					page: this.Pagination.PageIndex,
					pageSize: this.Pagination.PageSize,
					state: this.orderID,
				}).then(res => {
					if (res.code == 200) {
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.datalist = this.datalist.concat(data);
						}
						if (data.length < this.Pagination.PageSize) {
							this.loadingMore = true
						} else {
							this.loadingMore = false
							this.Pagination.PageIndex++
						}
					}
				})
			},
			// 去配送
			toDeliver(row) {
				this.$api.put('/api/order/state', {
					id: row.id,
					state: 5,
				}).then(res => {
					if (res.code == 200) {
						this.current = 2
						this.orderID = 5
						this.datalist = []
						this.getOrderList()
					} else {
						uni.$u.toast(res.data.msg)
					}
				})
			},
			// 删除已取消订单
			delDelivery(row) {
				this.$api.delete('/api/order', {
					id: row.id,
				}).then(res => {
					if (res.code == 200) {
						this.Pagination.PageIndex = 1
						this.datalist = []
						this.getOrderList()
						uni.$u.toast(res.msg)
					} else {
						uni.$u.toast(res.data.msg)
					}
				})
			},
			tabClick(row) {
				// console.log(row, 26)
				if (row.index == 1) {
					// 待配送 
					this.orderID = 2
				} else if (row.index == 2) {
					// 配送中
					this.orderID = 5
				} else if (row.index == 3) {
					// 已送达
					this.orderID = 3
				} else if (row.index == 4) {
					// 已取消
					this.orderID = 4
				} else {
					this.orderID = null
				}
				this.datalist = []
				this.current = row.index;
				this.getOrderList()
			}
		}
	}
</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>