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="40" :scrollable="scrollable" :current="current"
				@change="tabClick"></u-tabs>
		</view>
		<view class="card_order_mangement" v-if="orderList.length > 0">
			<x-orderManagement :key="Math.random()" :orderList="orderList" :userInfo="userInfo"
				@sendmail="sendmail"></x-orderManagement>
			<view style="width: 50%;">
				<u-loadmore :status="loadStatus" />
				<!-- <u-divider v-if="loadingMore" :text="loading"></u-divider> -->
			</view>
		</view>
		<u-empty mode="order" marginTop="50" v-else></u-empty>
		<u-popup :show="emailShow" mode="center" round="5" closeable @close="close">
			<view style="padding: 30rpx;">
				<view style="margin-top: 20rpx;width: 600rpx;">
					<view class="email_title" style="margin-bottom: 10rpx;">运单号：{{waybillNo}}</view>
					<view class="card_email">
						<span class="email_title">邮箱地址:</span>
						<view style="margin-top: 20rpx;">
							<u--input v-model="email" placeholder="请输入邮箱" border="surround"></u--input>
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<u-button type="primary" :loading="sendLoading" text="发送" @click="confirm"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [],
				list: [{
					name: '全部',
				}, {
					id: 9,
					name: '待装箱',
				}, {
					id: 10,
					name: '已装箱',
				}, {
					id: 11,
					name: '已出箱',
				}, {
					id: 3,
					name: '未入库',
				}, {
					id: 5,
					name: '已入库'
				}, {
					id: 7,
					name: '已出库'
				}, {
					id: 8,
					name: '已签收'
				}],
				list1: [{
					name: '全部',
				}, {
					id: 9,
					name: '待装箱',
				}, {
					id: 10,
					name: '已装箱',
				}, {
					id: 11,
					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,
				scrollable: false,
				emailShow: false,
				email: '',
				humidityFlag: false,
				waybillNo: '',
				sendLoading: false,
				loadStatus: 'loadmore' //loading 、nomore
			}
		},
		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.scrollable = true
					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.scrollable = true
					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.loadStatus = 'loading'
				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 (data.length < this.pageSize) {
							this.loadingMore = true
							this.loading = '没有更多了'
							this.loadStatus = 'nomore'
						} else {
							this.loading = '加载中'
							this.loadStatus = 'loading'
							this.loadingMore = false
							this.currentPage++
						}
						this.$forceUpdate()
					}
				})
			},
			// 获取用户订单列表
			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 (data.length < this.pageSize) {
							this.loadingMore = true
							this.loading = '没有更多了'
						} else {
							this.loading = '加载中'
							this.loadingMore = false
							this.currentPage++
						}
						this.$forceUpdate()
					}
				})
			},
			// 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()
				}
			},
			// 发送邮件
			sendmail(value) {
				this.emailShow = true
				this.waybillNo = value.waybillNo
			},
			confirm() {
				if (this.email) {
					let flag = validateEmail(this.email)
					if (flag) {
						if (!this.sendLoading) {
							this.sendLoading = true
							let arrTo = []
							arrTo.push(this.email)
							this.$api.post('/api/waybill/send-mail', {
								waybillNo: this.waybillNo,
								humidityShow: this.humidityFlag,
								to: arrTo,
							}).then(res => {
								if (res.code == 200) {
									uni.$u.toast(res.msg)
									this.email = ''
									this.emailShow = false
								}
								this.sendLoading = false
							}).catch(() => {
								this.sendLoading = false
							})
						}
					} else {
						uni.$u.toast('邮箱格式错误')
					}
				} else {
					uni.$u.toast('请输入邮箱')
				}
				// 如果邮箱格式正确，输出 true，否则输出 false
				function validateEmail(email) {
					const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
					return emailRegex.test(email);
				}
			},
			close() {
				this.emailShow = false
			}
		}
	}
</script>

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

	.card_order_mangement {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.card_email {}

	.email_title {
		font-size: 32rpx;
	}
</style>