baozhida-logistics-app/pages/order/index.vue

<template>
	<!-- 订单页面 -->
	<view>
		<u-navbar title="我的运单" autoBack placeholder></u-navbar>
		<view class="tab_order">
			<u-tabs :list="tableList" lineColor="#333333" lineWidth="60" :scrollable="false" :current="current"
				@change="tabClick"></u-tabs>
		</view>
		<view class="card_order_mangement" v-if="orderList.length > 0">
			<x-orderManagement :orderList="orderList" :userInfo="userInfo"></x-orderManagement>
			<view v-if="loadingMore" style="width: 50%;"><u-divider :text="loading"></u-divider></view>
		</view>
		<u-empty mode="order" marginTop="50" v-else></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [],
				list: [{
					name: '全部',
				}, {
					id: 3,
					name: '未入库',
				}, {
					id: 5,
					name: '已入库'
				}, {
					id: 7,
					name: '已出库'
				}],
				list1: [{
						name: '全部',
					}, {
						id: 2,
						name: '未装车',
					}, {
						id: 4,
						name: '已装车'
					},
					/* {
						id: 6,
						name: '已下车'
					}, */
					{
						id: 8,
						name: '已签收'
					}
				],
				list2: [{
					name: '全部',
				}, {
					id: 1,
					name: '未发货',
				}, {
					id: 2,
					name: '已发货'
				}, {
					id: 3,
					name: '已签收'
				}],
				current: 0,
				userInfo: {},
				orderList: [],
				pageSize: 10,
				currentPage: 1,
				loadingMore: true,
				loading: '加载中',
				status: null,
			}
		},
		onReachBottom() {
			if (!this.loadingMore) {
				if (this.userInfo.userType == 'sys') {
					this.getList()
				} else {
					this.getUserList()
				}
			}
		},
		onLoad(value) {
			if (value.current) {
				this.current = Number(value.current)
			}
			var userInfo = this.$cache.getCache('userInfo')
			// console.log(userInfo, 25)
			this.userInfo = userInfo
			if (userInfo.userType == 'sys') {
				if (userInfo.type == 2) {
					// 仓管
					this.tableList = this.list
					let statusType = ''
					if (this.current != 0 || this.current) {
						statusType = this.tableList[this.current].id
					}
					this.status = statusType
					this.getList()
				} else if (userInfo.type == 3) {
					// 司机
					this.tableList = this.list1
					let statusType = ''
					if (this.current != 0 || this.current) {
						statusType = this.tableList[this.current].id
					}
					this.status = statusType
					this.getList()
				}
			} else {
				this.tableList = this.list2
				this.status = this.tableList[this.current].id
				this.getUserList()
			}
		},
		methods: {
			// 获取司机和仓管订单列表
			getList() {
				this.loadingMore = true;
				this.$api.get('/api/waybill/applet', {
					page: this.currentPage,
					pageSize: this.pageSize,
					status: this.status,
				}).then(res => {
					if (res.code == 200) {
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.orderList = this.orderList.concat(data);
						}
						if (this.orderList.length < this.pageSize) {
							this.loadingMore = true
							this.loading = '没有更多了'
						} else {
							this.loading = '加载中'
							this.loadingMore = false
							this.currentPage++
						}
					}
				})
			},
			// 获取用户订单列表
			getUserList() {
				this.loadingMore = true;
				this.$api.get('/api/waybill/customer', {
					page: this.currentPage,
					pageSize: this.pageSize,
					status: this.status,
				}).then(res => {
					if (res.code == 200) {
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.orderList = this.orderList.concat(data);
						}
						if (this.orderList.length < this.pageSize) {
							this.loadingMore = true
							this.loading = '没有更多了'
						} else {
							this.loading = '加载中'
							this.loadingMore = false
							this.currentPage++
						}
					}
				})
			},
			// tab订单
			tabClick(row) {
				this.currentPage = 1
				this.orderList = []
				if (this.userInfo.userType == 'sys') {
					this.status = row.id
					this.getList()
				} else {
					this.status = row.id
					this.getUserList()
				}
			}
		}
	}
</script>

<style lang="scss">
	.tab_order {
		background-color: #fff;
	}

	.card_order_mangement {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>