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 || '请选择'}}
					</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" v-if="info.state_str!='候补中'">
			<view class="left">
				发车日期
			</view>
			<view class="right">
				{{info.yy_date}}
			</view>
		</view>

		<!-- 发车时间区域 -->
		<view class="box" v-if="info.state_str!='候补中'">
			<view class="left">
				发车时间
			</view>
			<picker style="width: 40%;" @change="bindPickerChange($event,1)" mode="time" :value="info.ci_time">
				<view class="right">
					{{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: 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}}
					<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">
				<!-- <switch :checked="isCheck" /> -->
				{{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"

	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(["666", "888", "999"])

	// switch开关状态
	// const isCheck = ref(false)

	// 人员列表数组
	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 = () => {
		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
		} = info.value

		uni.request({
			url: '/carstop/carbook/scheupdate.action',
			method: "post",
			data: {
				id,
				car_number,
				ci_time,
				route,
				route_end,
				contain
			},
			success: (res) => {
				if (res.data.code == 200) {
					uni.showToast({
						title: res.data.message
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/record/record"
						})
					}, 1500)
				}
			}
		});
	}

	// 点击车牌号下拉框回调
	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()
		} else if (type == 3) {
			console.log(e.detail.value);
			console.log("终点站");
		}
	}

	// 提前一天预约switch切换回调
	// const switchChange = (e) => {
	// 	console.log(e.detail.value);
	// 	isCheck.value = 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>