onlinenew_h5/pages/info/info.vue

<template>
	<view class="container">
		<view class="header">注：请按照自己的真实情况核实</view>

		<!-- 信息内容区域 -->
		<view class="form">
			<image v-if="studentInfo.picture" class="form_photo" :src="studentInfo.picture" mode=" aspectFill"></image>
			<image v-else class="form_photo" src="/static/7.png" mode=" aspectFill"></image>
			<view class="form_box">
				<view class="box_key">录取号：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入录取号"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.admissNum"
						:disabled="studentInfo.admissNum"
					/>
				</view>
			</view>

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

			<view class="form_box">
				<view class="box_key">身份证号：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入身份证号"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.cardId"
						:disabled="studentInfo.cardId"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="box_key">出生年月：</view>
				<view class="box_input">
					<picker mode="date" :value="studentInfo.birthday" @change="bindPickerChangeTime">
						<view class="select" :class="{ active: studentInfo.birthday }">
							{{ studentInfo.birthday ? studentInfo.birthday : '请选择出生年月' }}
							<uni-icons type="down" size="20" color="#ccc"></uni-icons>
						</view>
					</picker>
				</view>
			</view>

			<view class="form_box">
				<view class="box_key">性别：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入性别"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.sex"
						:disabled="studentInfo.sex"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="box_key">校区：</view>
				<view class="box_input">
					<picker @change="bindPickerChange" :value="currtIndex" :range="schoolList" range-key="school" :disabled="currtIndex != null">
						<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="box_key">院系：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入院系"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.college"
						:disabled="studentInfo.college"
					/>
				</view>
			</view>

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

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

			<view class="form_box">
				<view class="box_key">考生号：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入考生号"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.examNum"
						:disabled="studentInfo.examNum"
					/>
				</view>
			</view>

			<!-- <view class="form_box">
				<view class="box_key">毕业中学：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入毕业中学"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.graduationSchool"
						:disabled="studentInfo.graduationSchool"
					/>
				</view>
			</view> -->

			<view class="form_box">
				<view class="box_key">政治面貌：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入政治面貌"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.politicalStatu"
						:disabled="studentInfo.politicalStatu"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="box_key">学制：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入学制"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.eduSystem"
						:disabled="studentInfo.eduSystem"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="box_key">层次：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入层次"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.batchValue"
						:disabled="studentInfo.batchValue"
					/>
				</view>
			</view>

			<view class="form_box">
				<view class="box_key">民族：</view>
				<view class="box_input">
					<input
						class="input"
						type="text"
						placeholder="请输入民族"
						placeholder-style="color:#CCCCCC;font-size:28rpx"
						v-model="studentInfo.nationality"
						:disabled="studentInfo.nationality"
					/>
				</view>
			</view>
		</view>

		<!-- 温馨提示区域 -->
		<view class="tips">
			<view class="tips_title">温馨提示：</view>
			<view class="tips_text">{{ info }}</view>
		</view>

		<!-- 按钮区域 -->
		<view class="btns">
			<view class="btn up" @click="handleUp">上一步</view>
			<view class="btn down" @click="handleNext">下一步</view>
		</view>
	</view>
</template>

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

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

// 校区数据
const schoolList = ref([])

// 校区当前索引
const currtIndex = ref(null)

const info = ref()

onLoad(() => {
	studentInfo.value = uni.getStorageSync('studentInfo')
	// console.log(studentInfo.value)

	// 获取设置信息
	getSettingsInfo()

	// 获取校区数据
	getSchoolListData()
})

// 获取设置信息
const getSettingsInfo = async () => {
	const res = await getSettingsInfoReq()
	// console.log(res)
	if (res.code == 200) {
		uni.setStorageSync('settingInfo', res.data)
		info.value = res.data.basicVerification
	}
}

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

		if (studentInfo.value.schoolId) {
			schoolList.value.forEach((ele, index) => {
				if (ele.id == studentInfo.value.schoolId) {
					currtIndex.value = index
				}
			})
		}
	}
}

// 选择出生年月回调
const bindPickerChangeTime = (e) => {
	// console.log(e)
	studentInfo.value.birthday = e.detail.value
}

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

// 点击上一步按钮回调
const handleUp = () => {
	uni.navigateBack()
}

// 点击下一步按钮回调
const handleNext = () => {
	if (!studentInfo.value.admissNum) {
		uni.showToast({
			title: '请输入录取号',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.name) {
		uni.showToast({
			title: '请输入姓名',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.cardId) {
		uni.showToast({
			title: '请输入身份证号',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.birthday) {
		uni.showToast({
			title: '请选择出生年月',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.sex) {
		uni.showToast({
			title: '请输入性别',
			icon: 'none'
		})
		return
	}

	if (currtIndex.value == null) {
		uni.showToast({
			title: '请选择校区',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.college) {
		uni.showToast({
			title: '请输入院系',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.major) {
		uni.showToast({
			title: '请输入专业',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.classstr) {
		uni.showToast({
			title: '请输入班级',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.examNum) {
		uni.showToast({
			title: '请输入考生号',
			icon: 'none'
		})
		return
	}

	// if (!studentInfo.value.graduationSchool) {
	// 	uni.showToast({
	// 		title: '请输入毕业中学',
	// 		icon: 'none'
	// 	})
	// 	return
	// }

	if (!studentInfo.value.politicalStatu) {
		uni.showToast({
			title: '请输入政治面貌',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.eduSystem) {
		uni.showToast({
			title: '请输入学制',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.batchValue) {
		uni.showToast({
			title: '请输入批次',
			icon: 'none'
		})
		return
	}

	if (!studentInfo.value.nationality) {
		uni.showToast({
			title: '请输入民族',
			icon: 'none'
		})
		return
	}

	uni.setStorageSync('studentInfo', studentInfo.value)
	// console.log(studentInfo.value)
	uni.navigateTo({
		url: '/pages/family/family'
	})
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding-bottom: 50rpx;
	min-height: 100vh;
	background-color: #f5f9ff;

	.header {
		padding-left: 20rpx;
		height: 93rpx;
		line-height: 93rpx;
		font-size: 28rpx;
		font-weight: bold;
		background-color: #fff;
	}

	.form {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
		background-color: #fff;

		.form_photo {
			margin-top: 28rpx;
			margin-bottom: 33rpx;
			width: 186rpx;
			height: 231rpx;
		}

		.form_box {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 50rpx;
			margin-bottom: 20rpx;
			width: 100%;
			height: 75rpx;

			.box_key {
				width: 140rpx;
				text-align: end;
				font-size: 28rpx;
			}

			.box_input {
				box-sizing: border-box;
				padding: 0 25rpx;
				width: 500rpx;
				height: 74rpx;
				border: 2rpx solid #cccccc;
				border-radius: 4rpx;

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

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

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

	.tips {
		padding: 40rpx 15rpx 30rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		background-color: #fff;

		.tips_title {
			padding-top: 28rpx;
			padding-left: 8rpx;
			background-color: #fff2f2;
		}

		.tips_text {
			padding-bottom: 28rpx;
			padding-left: 8rpx;
			background-color: #fff2f2;
		}
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 10rpx 0 20rpx;
		height: 100rpx;
		background-color: #fff;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 300rpx;
			height: 100rpx;
			font-size: 32rpx;
			border-radius: 8rpx;
		}

		.up {
			border: 2rpx solid #0061ff;
		}

		.down {
			color: #fff;
			background-color: #0061ff;
		}
	}

	.btn_out {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		width: 690rpx;
		height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		border-radius: 8rpx;
		background-color: #0061ff;
	}
}
</style>