wanzai_school_app/pagesReservation/register/register.vue

<template>
	<view class="container">
		<view class="body">
			<!-- 访客姓名区域 -->
			<view class="body_box">
				<view class="box_key">
					<text class="key_icon">*</text>
					访客姓名
				</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="请输入访客姓名" placeholder-style="color:#CCCCCC;" />
				</view>
			</view>

			<!-- 访客手机号区域 -->
			<view class="body_box">
				<view class="box_key">
					<text class="key_icon">*</text>
					访客手机号
				</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="请输入访客手机号" placeholder-style="color:#CCCCCC;" />
				</view>
			</view>

			<!-- 来访时间区域 -->
			<view class="body_box">
				<view class="box_key">
					<text class="key_icon">*</text>
					来访时间
				</view>
				<view class="box_value">
					<uni-datetime-picker>
						<view class="value_time">请选择来访时间 ></view>
					</uni-datetime-picker>
				</view>
			</view>

			<view class="body_box">
				<view class="box_key">
					<text class="key_icon">*</text>
					来访结束时间
				</view>
				<view class="box_value">
					<uni-datetime-picker>
						<view class="value_time">请选择来访结束时间 ></view>
					</uni-datetime-picker>
				</view>
			</view>

			<!-- 证件号区域 -->
			<view class="body_box">
				<view class="box_key">
					<text class="key_icon">*</text>
					证件号
				</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="请输入访客证件号" placeholder-style="color:#CCCCCC;" />
				</view>
			</view>

			<!-- 访问事由区域 -->
			<view class="body_box">
				<view class="box_key">
					<text class="key_icon">*</text>
					访问事由
				</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="请输入访问事由" placeholder-style="color:#CCCCCC;" />
				</view>
			</view>

			<!-- 车牌号区域 -->
			<view class="body_box">
				<view class="box_key">车牌号</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="（选填）驾车请填写车牌号" placeholder-style="color:#CCCCCC;" />
				</view>
			</view>

			<!-- 同行人数区域 -->
			<view class="body_box">
				<view class="box_key">同行人数</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="请输入同行的人数" placeholder-style="color:#CCCCCC;" />
					<text class="value_text">人</text>
				</view>
			</view>

			<!-- 受访者姓名区域 -->
			<view class="body_box" v-if="type == 2">
				<view class="box_key">
					<text class="key_icon">*</text>
					受访者姓名
				</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="请输入受访者姓名" placeholder-style="color:#CCCCCC;" />
				</view>
			</view>

			<!-- 受访者电话区域 -->
			<view class="body_box" v-if="type == 2">
				<view class="box_key">
					<text class="key_icon">*</text>
					受访者电话
				</view>
				<view class="box_value">
					<input class="value_input" type="text" placeholder="请输入受访者电话" placeholder-style="color:#CCCCCC;" />
				</view>
			</view>

			<!-- 选择受访学生区域 -->
			<view class="body_box no_border" v-if="type == 1">
				<view class="box_key">
					<text class="key_icon">*</text>
					选择受访学生（可多选）
				</view>
			</view>

			<!-- 学生列表区域 -->
			<view class="student_list" v-if="type == 1">
				<!-- 每一个学生区域 -->
				<view class="student" v-for="item in list" :key="item.id" @click="handleClick(item)">
					<radio class="student_checked" color="#0061FF" :checked="item.isChecked" />
					<view class="student_info">{{ item.name }}（{{ item.number }}）</view>
				</view>
			</view>
		</view>

		<!-- 授权区域 -->
		<label class="auth" @click="handleAuth">
			<radio style="transform: scale(0.5)" color="#0061FF" :checked="authValue" />
			<text class="auth_text">同意授权证件号用于访客身份的验证</text>
		</label>

		<!-- 按钮区域 -->
		<view class="btn" :class="{ active: authValue }">访客预约</view>
	</view>
</template>

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

// 判断是哪种身份 1为学生家长 2为其他访客
const type = ref('')

// 是否授权
const authValue = ref(false)

// 受访学生列表数据
const list = ref([
	{
		id: 1,
		name: '张三',
		number: '145225225425',
		isChecked: false
	},
	{
		id: 2,
		name: '李四',
		number: '145225225425',
		isChecked: true
	}
])

onLoad((options) => {
	type.value = options.type
})

// 点击每一个学生回调
const handleClick = (item) => {
	item.isChecked = !item.isChecked
}

// 点击授权radio时的回调
const handleAuth = () => {
	authValue.value = !authValue.value
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f1f6fe;

	.body {
		margin-top: 20rpx;
		padding-left: 20rpx;
		background-color: #fff;

		.body_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 20rpx;
			height: 85rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.box_key {
				.key_icon {
					color: #d43030;
				}
			}

			.box_value {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 50%;

				.value_input {
					text-align: end;
				}

				.value_text {
					margin-left: 20rpx;
				}

				.value_time {
					text-align: end;
					color: #cccccc;
				}
			}
		}

		.no_border {
			border: none;
		}

		.student_list {
			.student {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				width: 710rpx;
				height: 110rpx;
				border-radius: 18rpx;
				background-color: #f2f4f9;

				.student_checked {
					margin-left: 48rpx;
				}

				.student_info {
					margin-left: 53rpx;
					font-size: 32rpx;
				}
			}
		}
	}

	.auth {
		display: flex;
		align-items: center;
		margin: 20rpx 0 40rpx 20rpx;
		font-size: 24rpx;

		.auth_text {
			height: 35rpx;
		}
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 100rpx;
		width: 710rpx;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		background-color: #95b8e6;
	}

	.active {
		background-color: #0061ff;
	}
}
</style>