School_bus_h5/pages/detail/detail.vue

<template>
	<view class="container">
		<!-- 车牌号区域 -->
		<view class="box">
			<view class="left">车牌号</view>
			<view class="right2">
				<view class="item">
					<view :class="['select', form.selectValue != 0 ? 'selected' : '']" @tap="handleMultiple(form.selectIndex)">
						{{ form.selectValue != 0 ? form.selectValue : '请选择' }}
					</view>
				</view>
				<view class="right-img"><img src="../../static/bottom.png" /></view>
			</view>
			<!-- 车牌号选项弹窗区域 -->
			<transition>
				<multiple-picker
					title="请选择"
					:show="selectMultiple.show"
					:columns="selectMultiple.columns"
					:defaultIndex="selectMultiple.index"
					@confirm="confirmMultiple"
					@cancel="selectMultiple.show = false"
					@change="changeMultiple"
				></multiple-picker>
			</transition>
		</view>

		<!-- 人数区域 -->
		<view class="box">
			<view class="left">容量</view>
			<view class="right">{{ info.contain }}</view>
		</view>

		<!-- 发车日期区域 -->
		<view class="box">
			<view class="left">发车日期</view>
			<view class="right">{{ info.yy_date }}</view>
		</view>

		<!-- 发车时间区域 -->
		<view class="box">
			<view class="left">发车时间</view>
			<picker style="width: 40%;" @change="bindPickerChange($event, 1)" mode="time" :value="info.ci_time" :start="getCurrentTime()">
				<view :class="['right', info.ci_time != 0 ? '' : 'unSelect']">
					{{ info.ci_time != 0 ? info.ci_time : '请选择' }}
					<view class="right-img"><img src="../../static/bottom.png" /></view>
				</view>
			</picker>
		</view>

		<!-- 扫码开始时间区域 -->
		<view class="box">
			<view class="left">扫码开始时间</view>
			<picker style="width: 40%;" @change="bindPickerChange($event, 4)" mode="time" :value="info.sm_start">
				<view :class="['right', info.sm_start != 0 ? '' : 'unSelect']">
					{{ info.sm_start != 0 ? info.sm_start : '请选择' }}
					<view class="right-img"><img src="../../static/bottom.png" /></view>
				</view>
			</picker>
		</view>

		<!-- 扫码结束时间区域 -->
		<view class="box">
			<view class="left">扫码结束时间</view>
			<picker style="width: 40%;" @change="bindPickerChange($event, 5)" mode="time" :value="info.sm_end">
				<view :class="['right', info.sm_end != 0 ? '' : 'unSelect']">
					{{ info.sm_end != 0 ? info.sm_end : '请选择' }}
					<view class="right-img"><img src="../../static/bottom.png" /></view>
				</view>
			</picker>
		</view>

		<!-- 预约截止时间区域 -->
		<view class="box">
			<view class="left">预约截止时间</view>
			<picker style="width: 40%;" @change="bindPickerChange($event, 7)" mode="time" :value="info.yy_end">
				<view :class="['right', info.yy_end != 0 ? '' : 'unSelect']">
					{{ info.yy_end != 0 ? info.yy_end : '请选择' }}
					<view class="right-img"><img src="../../static/bottom.png" /></view>
				</view>
			</picker>
		</view>

		<!-- 路线区域 -->
		<view class="box">
			<view class="left">路线</view>

			<picker style="width: 60%;" @change="bindPickerChange($event, 2)" :range="pathList" range-key="route">
				<view :class="['right', info.route ? '' : 'unSelect']">
					{{ info.route ? info.route : '请选择' }}
					<view class="right-img"><img src="../../static/bottom.png" /></view>
				</view>
			</picker>
		</view>

		<!-- 站点区域 -->
		<view class="box">
			<view class="left">站点</view>

			<picker style="width: 80%;" @change="bindPickerChange($event, 3)" :range="endList" range-key="route_end">
				<view :class="['right', info.route_end ? '' : 'unSelect']">
					{{ info.route_end ? info.route_end : '请选择' }}
					<view class="right-img"><img src="../../static/bottom.png" /></view>
				</view>
			</picker>
		</view>

		<!-- 状态区域 -->
		<view class="box">
			<view class="left">状态</view>
			<view class="right">{{ info.state_str }}</view>
		</view>

		<!-- 提前一天预约区域 -->
		<view class="box">
			<view class="left">可否提前一天预约</view>
			<view class="right">{{ info.before_state == 0 ? '不可以' : '可以' }}</view>
		</view>

		<!-- 保存按钮区域 -->
		<view class="saveBtn" @click="handleSave">保存</view>

		<!-- 人员名单区域 -->
		<view class="list">
			<view class="list-title" v-if="info.user_num != 0">
				<!-- 人员名单（{{ info.user_num }}/{{ info.contain }}） -->
				<view class="list-title-left">人员名单（{{ typeList[result_state].text }}{{ listData.length }}人）</view>
				<picker style="width: 38%;" :range="typeList" range-key="text" @change="bindPickerChange($event, 6)">
					<view class="list-title-right">
						{{ typeList[result_state].text }}
						<view class="right-img"><img src="../../static/bottom.png" /></view>
					</view>
				</picker>
			</view>
			<view class="list-item" v-for="(item, index) in listData" :key="index">
				<view class="item-img"><img src="../../static/man.png" /></view>
				<view class="item-info">
					<view class="info-name">
						<view>{{ item.user_name }}</view>
					</view>
					<view class="info-mes">
						{{ item.user_zz }}
						<span>{{ item.yy_time }}</span>
					</view>
				</view>
				<view v-if="item.yy_state === '1'" class="item-type"><img src="../../static/subscribe.png" /></view>
				<view v-else class="item-type"><img src="../../static/pass2.png" /></view>
			</view>

			<!-- 无数据时展示的区域 -->
			<view class="list-nodata" v-if="listData.length == 0">
				<img src="../../static/no-bus.png" />
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import { myRequest } from '@/util/api.js'

import { isWeixin } from '@/util/isWeixin.js'

import { time_to_sec, time_change } from '@/util/formatTime.js'

onLoad(options => {
	if (isWeixin()) {
		let userInfo = JSON.parse(uni.getStorageSync('bus-userInfo'))
		// console.log(userInfo)
		if (userInfo.user_zz !== '车队长') {
			uni.redirectTo({
				url: '/pages/404/404?message=暂无权限'
			})
		} else {
			info.value = JSON.parse(options.info)
			// console.log(info.value)
			idRef.value = info.value.id
			// 获取人员列表
			getData()
			// 获取路线数组
			getPathList()
			// 获取终点站列表
			getEndList()
			// 获取车牌号列表
			getBusList()
			// 获取发车时间提前推迟多少分钟可以扫码数据
			getTimeConfig()
			// 处理车牌号数据
			form.value.selectValue = info.value.car_number

			setTimeout(() => {
				let temList = []
				selectMultiple.value.columns.forEach(item => {
					if (item.label == form.value.selectValue) {
						temList.push(item.value)
					}
				})
				form.value.selectIndex = temList
			}, 500)
		}
	} else {
		uni.redirectTo({
			url: '/pages/404/404?message=请在微信客户端打开链接'
		})
	}
})

// 带过来的预约详情数据
const info = ref({})

// 参数id
const idRef = ref(null)

// 车牌号绑定数据
const form = ref({
	selectValue: '',
	selectIndex: []
})
// 车牌号数组相关数据
const selectMultiple = ref({
	show: false,
	index: [],
	columns: []
})

// 路线数组
const pathList = ref([])

// 终点站数组
const endList = ref([])

// 人员列表数组
const listData = ref([])

// 发车时间提前多少分钟可以扫码
const time_early = ref(null)
// 发车时间推迟多少分钟可以扫码
const time_late = ref(null)
// 发车前多少分钟截止预约
const time_yy_end = ref(null)

// 人员名单筛选状态
const result_state = ref(0)

const typeList = ref([
	{
		text: '全部',
		value: 0
	},
	{
		text: '已预约未上车',
		value: 1
	},
	{
		text: '已上车',
		value: 2
	}
])

// 获取路线数组请求
const getPathList = async () => {
	const res = await myRequest({
		url: '/appqueryRoute.action'
	})
	// console.log(res);
	pathList.value = res.data
}
// 获取终点站数组请求
const getEndList = async () => {
	const res = await myRequest({
		url: '/appqueryEndRoutes.action',
		data: {
			route: info.value.route
		}
	})
	// console.log(res);
	endList.value = res.data
}
// 获取车牌号数组请求
const getBusList = async () => {
	const res = await myRequest({
		url: '/appqueryCarInfos.action'
	})
	// console.log(res);
	if (res.data.length) {
		let temList = []
		res.data.forEach((item, index) => {
			temList.push({
				label: item.car_number,
				value: index.toString()
			})
		})
		selectMultiple.value.columns = temList
	}
}

// 获取人员名单请求
const getData = async () => {
	const res = await myRequest({
		url: '/appqueryAppointeds.action',
		data: {
			id: idRef.value,
			result_state: result_state.value
		}
	})
	// console.log(res)
	listData.value = res.data
}

// 保存按钮回调
const handleSave = () => {
	if (info.value.car_number == 0) {
		uni.showToast({
			title: '请选择车牌号',
			icon: 'none'
		})
		return
	}
	if (info.value.ci_time == 0) {
		uni.showToast({
			title: '请选择发车时间',
			icon: 'none'
		})
		return
	}
	if (!info.value.sm_start) {
		uni.showToast({
			title: '请选择扫码开始时间',
			icon: 'none'
		})
		return
	}
	if (!info.value.sm_end) {
		uni.showToast({
			title: '请选择扫码结束时间',
			icon: 'none'
		})
		return
	}
	if (time_to_sec(info.value.sm_start) >= time_to_sec(info.value.ci_time)) {
		uni.showToast({
			title: '扫码开始时间不能晚于发车时间',
			icon: 'none',
			duration: 2000
		})
		return
	}
	if (time_to_sec(info.value.sm_end) < time_to_sec(info.value.ci_time)) {
		uni.showToast({
			title: '扫码结束时间不能早于发车时间',
			icon: 'none',
			duration: 2000
		})
		return
	}
	if (!info.value.yy_end) {
		uni.showToast({
			title: '请选择预约截止时间',
			icon: 'none'
		})
		return
	}
	if (!info.value.route) {
		uni.showToast({
			title: '请选择路线',
			icon: 'none'
		})
		return
	}
	if (!info.value.route_end) {
		uni.showToast({
			title: '请选择终点站',
			icon: 'none'
		})
		return
	}
	uni.showModal({
		title: '提示',
		content: '确定保存吗？',
		success: res => {
			if (res.confirm) {
				handleSaveRequest()
			} else if (res.cancel) {
			}
		}
	})
}

// 保存请求
const handleSaveRequest = () => {
	// console.log(info.value)
	const { id, car_number, ci_time, route, route_end, contain, sm_start, sm_end, yy_end } = info.value

	const { user_name } = JSON.parse(uni.getStorageSync('bus-userInfo'))

	uni.request({
		url: '/carstop/carbook/scheupdate.action',
		method: 'post',
		header: {
			admin_name: user_name
		},
		data: {
			id,
			car_number,
			ci_time,
			route,
			route_end,
			contain,
			sm_start,
			sm_end,
			yy_end
		},
		success: res => {
			if (res.data.code == 200) {
				uni.showToast({
					title: res.data.message
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/record/record'
					})
				}, 1500)
			} else {
				uni.showToast({
					title: res.data.message,
					icon: 'error'
				})
			}
		}
	})
}

// 点击车牌号下拉框回调
const handleMultiple = val => {
	// console.log(val);
	selectMultiple.value.index = val || []
	selectMultiple.value.show = true
}

// 车牌号下拉框确定按钮回调
const confirmMultiple = e => {
	// console.log(e);
	// console.log(e.value);
	if (selectMultiple.value.index != e.value) {
		let temp = []
		e.selected.forEach(item => {
			temp.push(item.label)
		})
		form.value.selectValue = temp.toString()
		info.value.car_number = temp.toString()
	}
	form.value.selectIndex = e.value
	selectMultiple.value.show = false
	// 获取汽车容量
	getBusContain()
}

// 获取汽车容量请求
const getBusContain = async () => {
	const res = await myRequest({
		url: '/appqueryCarContain.action',
		data: {
			car_number: form.value.selectValue
		}
	})
	// console.log(res);
	info.value.contain = res.data
}

// 获取发车时间提前推迟多少分钟可以扫码数据
const getTimeConfig = async () => {
	const res = await myRequest({
		url: '/cnqueryHb.action'
	})
	// console.log(res)
	time_early.value = res.sm_end
	time_late.value = res.sm_start
	time_yy_end.value = res.yy_end
}

// 下拉框选择时的回调
const changeMultiple = e => {
	// console.log(e);
}

// 原生下拉框的选择回调事件
const bindPickerChange = (e, type) => {
	if (type == 1) {
		info.value.ci_time = e.detail.value
		info.value.sm_start = time_change(info.value.ci_time, time_early.value * -1)
		info.value.sm_end = time_change(info.value.ci_time, time_late.value)
		info.value.yy_end = time_change(info.value.ci_time, time_yy_end.value * -1)
	} else if (type == 2) {
		info.value.route = pathList.value[e.detail.value].route
		getEndList()
		info.value.route_end = ''
	} else if (type == 3) {
		info.value.route_end = endList.value[e.detail.value].route_end
	} else if (type == 4) {
		info.value.sm_start = e.detail.value
	} else if (type == 5) {
		info.value.sm_end = e.detail.value
	} else if (type == 6) {
		result_state.value = e.detail.value
		getData()
	} else if (type == 7) {
		info.value.yy_end = e.detail.value
	}
}
// 获取当前时间  hh:mm
const getCurrentTime = () => {
	const date = new Date()
	let H = (date.getHours() + '').padStart(2, '0')
	let M = (date.getMinutes() + '').padStart(2, '0')
	return `${H}:${M}`
}
</script>

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

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 98rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.left {
			flex: 1;
			color: #999999;
		}

		.right {
			flex: 1;
			display: flex;
			justify-content: flex-end;

			.right-img {
				margin-left: 27rpx;
				margin-top: -5rpx;
				width: 17rpx;
				height: 12rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.right2 {
			flex: 2;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.item {
				flex: 1;
				padding: 20rpx 0;

				.select {
					width: 100%;
					padding-top: 6px;
					padding-bottom: 6px;
					padding-left: 9px;
					border-radius: 4px;
					font-size: 15px;
					text-align: end;
					box-sizing: border-box;
					color: #cccccc;
					line-height: 26px;

					&.selected {
						color: black;
					}
				}
			}

			.right-img {
				margin-left: 27rpx;
				margin-top: -30rpx;
				width: 17rpx;
				height: 12rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.unSelect {
			color: #ccc;
		}
	}

	.saveBtn {
		margin: 20rpx 30rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 34rpx;
		border-radius: 15rpx;
		background: linear-gradient(180deg, #8684ff 0%, #3c50e8 100%);
	}

	.list {
		padding: 13rpx 30rpx;

		.list-title {
			display: flex;
			margin-top: 20rpx;
			height: 41rpx;
			color: #999999;
			font-size: 28rpx;

			.list-title-left {
				flex: 1;
			}

			.list-title-right {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				color: #000;

				.right-img {
					margin-left: 27rpx;
					margin-top: -5rpx;
					width: 17rpx;
					height: 12rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.list-item {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 29rpx 0 26rpx 0;
			height: 155rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.item-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.item-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-left: 6rpx;
				height: 100rpx;

				.info-name {
					display: flex;
					align-items: center;
					font-size: 32rpx;

					.info-name-img {
						margin-left: 26rpx;
						width: 30rpx;
						height: 35rpx;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.info-mes {
					font-size: 24rpx;
					color: #999999;

					span {
						margin-left: 26rpx;
						color: #a6a6a6;
					}
				}
			}

			.item-type {
				width: 104rpx;
				height: 41rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.list-nodata {
			padding: 50rpx 0;
			background-color: #fff;
			text-align: center;
			color: #999999;

			img {
				width: 500rpx;
			}
		}
	}
}

.v-enter-active,
.v-leave-active {
	transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
	opacity: 0;
}
</style>