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 ? 'selected' : '']" @tap="handleMultiple(form.selectIndex)">
						{{ form.selectValue != 0 ? form.selectValue : '请选择' }}
					</view>
				</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">
				<view class="right">
					{{ 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 ? 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 ? 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: 60%;" @change="bindPickerChange($event, 2)" :range="pathList" range-key="route">
				<view class="right">
					{{ 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: 60%;" @change="bindPickerChange($event, 3)" :range="endList" range-key="route_end">
				<view class="right">
					{{ 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>
			<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 class="item-type"><img src="../../static/subscribe.png" /></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 } from '@/util/formatTime.js'

onLoad(options => {
	if (isWeixin()) {
		info.value = JSON.parse(options.info)
		// console.log(info.value)
		// 获取人员列表
		getData(info.value)
		// 获取路线数组
		getPathList()
		// 获取终点站列表
		getEndList()
		// 获取车牌号列表
		getBusList()
		// 处理车牌号数据
		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({})

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

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

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

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

// 获取路线数组请求
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 value => {
	const { route, route_end, yy_date, ci_time, car_number } = value

	const res = await myRequest({
		url: '/appqueryAppointeds.action',
		data: {
			route,
			route_end,
			yy_date,
			ci_time,
			car_number
		}
	})
	// 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.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 } = info.value

	uni.request({
		url: '/carstop/carbook/scheupdate.action',
		method: 'post',
		data: {
			id,
			car_number,
			ci_time,
			route,
			route_end,
			contain,
			sm_start,
			sm_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 changeMultiple = e => {
	// console.log(e);
}

// 原生下拉框的选择回调事件
const bindPickerChange = (e, type) => {
	if (type == 1) {
		info.value.ci_time = e.detail.value
	} 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
	}
}
</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;

			.item {
				width: 100%;
				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;
					}
				}
			}
		}
	}

	.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 {
			height: 41rpx;
			color: #999999;
			font-size: 28rpx;
		}

		.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%;
				}
			}
		}
	}
}

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

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