onlinenew_h5/pages/select/select.vue

<template>
	<view class="container" v-if="studentInfo">
		<view class="form">
			<view class="form_box">
				<view class="form_key">姓名：</view>

				<view class="form_value">
					<input
						class="input"
						type="text"
						placeholder="请输入姓名"
						placeholder-style="color:#ccc;font-size:28rpx"
						v-model="studentInfo.name"
						:disabled="studentInfo.name"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="form_key">院系：</view>

				<view class="form_value">
					<input
						class="input"
						type="text"
						placeholder="请输入院系"
						placeholder-style="color:#ccc;font-size:28rpx"
						v-model="studentInfo.college"
						:disabled="studentInfo.college"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="form_key">专业：</view>

				<view class="form_value">
					<input
						class="input"
						type="text"
						placeholder="请输入专业"
						placeholder-style="color:#ccc;font-size:28rpx"
						v-model="studentInfo.major"
						:disabled="studentInfo.major"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="form_key">班级：</view>

				<view class="form_value">
					<input
						class="input"
						type="text"
						placeholder="请输入班级"
						placeholder-style="color:#ccc;font-size:28rpx"
						v-model="studentInfo.classstr"
						:disabled="studentInfo.classstr"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="form_key">校区：</view>

				<view class="form_value">
					<picker @change="bindPickerChange" :value="currtIndex" :range="schoolList" range-key="school">
						<view class="select" :class="{ active: currtIndex != null }">
							{{ currtIndex != null ? schoolList[currtIndex]?.school : '请选择校区' }}
							<uni-icons type="down" size="20" color="#ccc"></uni-icons>
						</view>
					</picker>
				</view>
			</view>

			<view class="form_box">
				<view class="form_key">楼栋：</view>

				<view class="form_value">
					<picker @change="bindPickerChange_build" :value="currtIndex_build" :range="buildList" range-key="build" :disabled="!schoolId">
						<view class="select" :class="{ active: currtIndex_build != null }">
							{{ currtIndex_build != null ? buildList[currtIndex_build]?.build : '请选择楼栋' }}
							<uni-icons type="down" size="20" color="#ccc"></uni-icons>
						</view>
					</picker>
				</view>
			</view>

			<view class="form_box">
				<view class="form_key">寝室：</view>

				<view class="form_value">
					<picker @change="bindPickerChange_dorm" :value="currtIndex_dorm" :range="dormList" range-key="dormitory" :disabled="!buildId">
						<view class="select" :class="{ active: currtIndex_dorm != null }">
							{{ currtIndex_dorm != null ? dormList[currtIndex_dorm]?.dormitory : '请选择寝室' }}
							<uni-icons type="down" size="20" color="#ccc"></uni-icons>
						</view>
					</picker>
				</view>
			</view>

			<view class="form_box">
				<view class="form_key">床位：</view>

				<view class="form_value">
					<picker @change="bindPickerChange_bed" :value="currtIndex_bed" :range="bedList" range-key="number" :disabled="!dormId">
						<view class="select" :class="{ active: currtIndex_bed != null }">
							{{ currtIndex_bed != null ? bedList[currtIndex_bed]?.number : '请选择床位' }}
							<uni-icons type="down" size="20" color="#ccc"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="tips" @click="handleBed">点击查看床位示意图</view>

		<!-- 提交按钮区域 -->
		<view class="btn">
			<view class="btn_box" @click="handleSubmit">提交</view>
		</view>

		<!-- 弹窗区域 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class="pop">
				<image class="pop_img" src="/static/3.png" mode="aspectFill"></image>
				<!-- 关闭图标 -->
				<uni-icons class="pop_close" type="closeempty" color="#808080" size="20" @click="handleClose"></uni-icons>

				<view class="pop_title">温馨提示</view>
				<view class="pop_content">选择入住之后将不能修改， 确定选择吗?</view>
				<view class="pop_btn" @click="handleConfirm">确定</view>
			</view>
		</uni-popup>

		<!-- 寝室示意图弹窗区域 -->
		<uni-popup ref="popup_dorm" :is-mask-click="false">
			<view class="pop">
				<!-- 关闭图标 -->
				<uni-icons class="pop_close" type="closeempty" color="#808080" size="20" @click="handleCloseDorm"></uni-icons>

				<image v-if="layoutNumber == 1" class="pop_img_dorm" src="/static/8.png" mode="aspectFill"></image>
				<image v-if="layoutNumber == 2" class="pop_img_dorm" src="/static/8.2.jpg" mode="aspectFill"></image>
				<image v-if="layoutNumber == 3" class="pop_img_dorm" src="/static/8.3.jpg" mode="aspectFill"></image>
				<image v-if="layoutNumber == 4" class="pop_img_dorm" src="/static/8.4.jpg" mode="aspectFill"></image>
				<image v-if="layoutNumber == 5" class="pop_img_dorm" src="/static/8.5.jpg" mode="aspectFill"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getSchoolListDataReq, getBuildGroupReq, getDormGroupReq, getBedGroupReq, postSubmitBedInfoReq, isSelectReq } from '@/api/index.js'

// 学生信息
const studentInfo = ref()

// 校区索引
const currtIndex = ref(null)
// 校区数组
const schoolList = ref([])
// 校区ID
const schoolId = ref()

const currtIndex_build = ref(null)
// 楼栋数组
const buildList = ref([])
const buildId = ref()

const currtIndex_dorm = ref(null)
// 寝室分组
const dormList = ref([])
const dormId = ref()
const layoutNumber = ref()

const currtIndex_bed = ref(null)
// 床位分组
const bedList = ref([])
const bedId = ref()

// 弹窗DOM
const popup = ref()
const popup_dorm = ref()

onLoad(() => {
	// 判断是否选择了床位
	isSelect()
})

const isSelect = async () => {
	const res = await isSelectReq({
		studentCard: uni.getStorageSync('studentInfo').cardId
	})
	// console.log(res)
	if (res.code == 200) {
		if (res.data.isCheck == 1) {
			let str = res.data.school + res.data.build + res.data.dormitory
			uni.reLaunch({
				url: `/pages/myDorm/myDorm?str=${str}`
			})
		} else {
			studentInfo.value = uni.getStorageSync('studentInfo') || {}
			// console.log(studentInfo.value)
			// 获取校区数据
			getSchoolListData()
		}
	}
}

// 获取校区数据
const getSchoolListData = async () => {
	const res = await getSchoolListDataReq()
	// console.log(res)
	if (res.code == 200) {
		schoolList.value = res.data

		let info = uni.getStorageSync('studentInfo')

		if (info.schoolId) {
			schoolList.value.forEach((ele, index) => {
				if (ele.id == info.schoolId) {
					currtIndex.value = index
				}
			})
			// form.value.school = info.school
			schoolId.value = info.schoolId
			// 获取楼栋分组
			getBuildGroup()
		}
	}
}

// 选择校区回调
const bindPickerChange = (e) => {
	// console.log(e)
	currtIndex.value = e.detail.value
	schoolId.value = schoolList.value[currtIndex.value].id

	buildId.value = null
	dormId.value = null
	bedId.value = null
	currtIndex_build.value = null
	currtIndex_dorm.value = null
	currtIndex_bed.value = null

	// 获取楼栋分组
	getBuildGroup()
}

// 获取楼栋分组
const getBuildGroup = async () => {
	const res = await getBuildGroupReq({
		schoolId: schoolId.value,
		collegeId: studentInfo.value.collegeId,
		majorId: studentInfo.value.majorId,
		classstrid: studentInfo.value.classstrId,
		sex: studentInfo.value.sex
	})
	// console.log(res)
	if (res.code == 200) {
		buildList.value = res.data
	}
}

// 选择楼栋回调
const bindPickerChange_build = (e) => {
	currtIndex_build.value = e.detail.value
	buildId.value = buildList.value[currtIndex_build.value].buildId

	dormId.value = null
	bedId.value = null
	currtIndex_dorm.value = null
	currtIndex_bed.value = null

	// 获取寝室分组
	getDormGroup()
}

// 获取寝室分组
const getDormGroup = async () => {
	const res = await getDormGroupReq({
		schoolId: schoolId.value,
		buildId: buildId.value,
		collegeId: studentInfo.value.collegeId,
		majorId: studentInfo.value.majorId,
		classstrid: studentInfo.value.classstrId,
		sex: studentInfo.value.sex
	})
	// console.log(res)
	if (res.code == 200) {
		dormList.value = res.data
	}
}

// 选择寝室回调
const bindPickerChange_dorm = (e) => {
	currtIndex_dorm.value = e.detail.value
	dormId.value = dormList.value[currtIndex_dorm.value].dormitoryId

	bedId.value = null
	currtIndex_bed.value = null

	// 获取床位分组
	getBedGroup()
}

// 获取床位分组
const getBedGroup = async () => {
	const res = await getBedGroupReq({
		schoolId: schoolId.value,
		buildId: buildId.value,
		dormitoryId: dormId.value,
		collegeId: studentInfo.value.collegeId,
		majorId: studentInfo.value.majorId,
		classstrid: studentInfo.value.classstrId,
		sex: studentInfo.value.sex
	})
	// console.log(res)
	if (res.code == 200) {
		bedList.value = res.data

		if (res.data.length) {
			layoutNumber.value = res.data[0].layoutNumber
		}
	}
}

// 选择床位回调
const bindPickerChange_bed = (e) => {
	// console.log(e)
	currtIndex_bed.value = e.detail.value
	bedId.value = bedList.value[currtIndex_bed.value].bedId
}

// 点击查看床位回调
const handleBed = () => {
	if (!schoolId.value) {
		uni.showToast({
			title: '请先选择校区',
			icon: 'none'
		})
		return
	}
	if (!buildId.value) {
		uni.showToast({
			title: '请先选择楼栋',
			icon: 'none'
		})
		return
	}
	if (!dormId.value) {
		uni.showToast({
			title: '请先选择寝室',
			icon: 'none'
		})
		return
	}

	// if (!bedId.value) {
	// 	uni.showToast({
	// 		title: '请先选择床位',
	// 		icon: 'none'
	// 	})
	// 	return
	// }

	// console.log(layoutNumber.value)

	popup_dorm.value.open()
}

// 提交按钮回调
const handleSubmit = () => {
	if (!schoolId.value) {
		uni.showToast({
			title: '请选择校区',
			icon: 'none'
		})
		return
	}
	if (!buildId.value) {
		uni.showToast({
			title: '请选择楼栋',
			icon: 'none'
		})
		return
	}
	if (!dormId.value) {
		uni.showToast({
			title: '请选择寝室',
			icon: 'none'
		})
		return
	}
	if (!bedId.value) {
		uni.showToast({
			title: '请选择床位',
			icon: 'none'
		})
		return
	}
	popup.value.open()
}

// 弹窗确定按钮回调
const handleConfirm = async () => {
	const res = await postSubmitBedInfoReq({
		id: bedId.value,
		number: bedList.value[currtIndex_bed.value].number, //床位号
		studentCard: studentInfo.value.cardId, //学生身份证号
		school: schoolList.value[currtIndex.value].school, //校区名称
		schoolId: schoolId.value, //校区id
		buildId: buildId.value, //楼栋ID
		build: buildList.value[currtIndex_build.value].build, //楼栋名称
		dormitoryId: dormId.value, //宿舍ID
		dormitory: dormList.value[currtIndex_dorm.value].dormitory, //宿舍名称
		sex: studentInfo.value.sex, //床位性别
		college: studentInfo.value.college,
		collegeId: studentInfo.value.collegeId,
		major: studentInfo.value.major,
		majorId: studentInfo.value.majorId,
		classstr: studentInfo.value.classstr,
		classstrId: studentInfo.value.classstrId,
		isCheck: 1, // 是否入住 1：入住，0：未入住
		cardNum: studentInfo.value.admissNum,
		name: studentInfo.value.name,
		remark: ''
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
		setTimeout(() => {
			popup.value.close()
			let str = schoolList.value[currtIndex.value].school + buildList.value[currtIndex_build.value].build + dormList.value[currtIndex_dorm.value].dormitory
			// console.log(str)
			uni.reLaunch({
				url: `/pages/myDorm/myDorm?str=${str}`
			})
		}, 1500)
	}
}

// 弹窗关闭图标回调
const handleClose = () => {
	popup.value.close()
}

// 寝室示意图弹窗关闭图标回调
const handleCloseDorm = () => {
	popup_dorm.value.close()
}
</script>

<style lang="scss" scoped>
.container {
	padding-top: 12rpx;
	min-height: 100vh;
	background-color: #f5f9ff;

	.form {
		padding: 20rpx 20rpx 10rpx;
		background-color: #fff;

		.form_box {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			height: 75rpx;

			.form_key {
				width: 100rpx;
				font-size: 28rpx;
				text-align: end;
			}

			.form_value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 25rpx;
				width: 616rpx;
				height: 100%;
				font-size: 28rpx;
				border-radius: 4rpx;
				border: 2rpx solid #cccccc;

				.input {
					width: 100%;
					height: 100%;
				}

				.value_text {
					color: #cccccc;
				}

				.select {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 556rpx;
					height: 74rpx;
					font-size: 28rpx;
					color: #ccc;
				}

				.active {
					color: #000;
				}
			}
		}
	}

	.tips {
		padding-left: 120rpx;
		font-size: 28rpx;
		color: #0061ff;
		background-color: #fff;
	}

	.btn {
		padding: 100rpx 20rpx 0;
		background-color: #fff;

		.btn_box {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: #0061ff;
		}
	}

	.pop {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 659rpx;
		height: 728rpx;
		border-radius: 15rpx;
		background: linear-gradient(180deg, #ebf2ff 0%, #ffffff 100%);

		.pop_img {
			position: absolute;
			top: -103rpx;
			left: 227rpx;
			width: 206rpx;
			height: 206rpx;
		}

		.pop_img_dorm {
			margin-top: 80rpx;
			width: 475rpx;
			height: 600rpx;
		}

		.pop_close {
			position: absolute;
			top: 19rpx;
			right: 29rpx;
		}

		.pop_title {
			margin-top: 151rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.pop_content {
			margin-top: 85rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.pop_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 137rpx;
			width: 543rpx;
			height: 101rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: #0061ff;
		}

		.pop_tips {
			margin-top: 15rpx;
			font-size: 24rpx;
			color: #333333;
		}
	}
}
</style>