wanzai_school_app/pages/addStudentMsg/addStudentMsg.vue

<template>
	<view class="container">
		<!-- 姓名区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				孩子姓名
			</view>
			<view class="box_value">
				<input class="input" type="text" placeholder="请输入孩子姓名" v-model="name" />
			</view>
		</view>

		<!-- 性别区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				性别
			</view>
			<view class="box_value">
				<view class="men" @click="handlegender(1)">
					<radio color="#0061FF" style="transform: scale(0.7)" :checked="gender == 1" />
					男
				</view>

				<view class="women" @click="handlegender(2)">
					<radio color="#0061FF" style="transform: scale(0.7)" :checked="gender == 2" />
					女
				</view>
			</view>
		</view>

		<!-- 人脸图片区域 -->
		<view class="box2">
			<view class="box_key">
				<text class="text">*</text>
				人脸图片
			</view>
			<view class="box_upload">
				<uni-icons type="plusempty" size="30" color="#666666"></uni-icons>
				上传照片
			</view>
		</view>
		<view class="tips">注：支持.jpg .png，五官清晰无遮挡，大小不超过2M</view>

		<!-- 时间组区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				时间组
			</view>

			<picker @change="bindPickerChange" :value="currentIndex" :range="array">
				<view class="box_value" :class="{ unactive: !currentIndex }">
					{{ currentIndex ? array[currentIndex] : '请选择' }}
					<image class="value_img" src="/static/images/bottom2.png" mode="aspectFill"></image>
				</view>
			</picker>
		</view>

		<!-- 家属区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				家属
			</view>
			<view class="box_value">
				<input class="input" type="text" placeholder="请输入姓名" />
				<view class="value_icon">
					<uni-icons type="plus" size="25" color="#0061FF"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 手机号码区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				手机号码
			</view>
			<view class="box_value">
				<input class="input" type="text" placeholder="请输入手机号码" />
			</view>
		</view>

		<!-- 家属与本人的关系区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				家属与本人的关系
			</view>
			<view class="box_value">
				<input class="input" type="text" placeholder="请输入家属与本人的关系" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 姓名
const name = ref()
// 性别
const gender = ref(1)
// 时间组当前激活索引
const currentIndex = ref()
// 时间组数据
const array = ref(['上午', '下午'])
// 切换性别回调
const handlegender = (v) => {
	gender.value = v
}
// 切换时间组回调
const bindPickerChange = (e) => {
	currentIndex.value = e.detail.value
}
</script>

<style lang="scss" scoped>
.container {
	padding: 10rpx 0 30rpx 15rpx;
	height: 100vh;
	font-size: 28rpx;

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		border-bottom: 2rpx solid #e6e6e6;

		.box_key {
			display: flex;
			align-items: center;
			font-weight: bold;

			.text {
				color: #d43030;
			}
		}

		.box_value {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 20rpx;
			width: 320rpx;
			height: 96rpx;

			.input {
				height: 100%;
				text-align: end;
			}

			.men,
			.women {
				display: flex;
				align-items: center;
			}

			.women {
				margin-left: 20rpx;
			}

			.value_icon {
				margin-left: 15rpx;
			}

			.value_img {
				margin-left: 20rpx;
				width: 27rpx;
				height: 16rpx;
			}
		}

		.unactive {
			color: #6a6a6a;
		}
	}

	.box2 {
		display: flex;
		margin-top: 40rpx;

		.box_key {
			display: flex;
			font-weight: bold;

			.text {
				color: #d43030;
			}
		}

		.box_upload {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-left: 30rpx;
			width: 160rpx;
			height: 160rpx;
			font-size: 24rpx;
			color: #666666;
			border-radius: 6rpx;
			background-color: #f2f2f2;
		}
	}

	.tips {
		margin-top: 20rpx;
		margin-bottom: 5rpx;
		font-size: 24rpx;
		color: #a6a6a6;
	}
}
</style>