H5-frontend/pages/index/add-student.vue

<template>
	<view class="page">
		<van-nav-bar title="新增学生" left-arrow @click-left="onBack" fixed />
		<view class="content">
			<view class="form-item">
				<text class="label">学生姓名</text>
				<input class="input" v-model="formData.name" placeholder="请输入学生姓名" />
			</view>
			
			<view class="form-item">
				<text class="label">身份证号</text>
				<input class="input" v-model="formData.idCard" placeholder="请输入身份证号" maxlength="18" @blur="parseGender" />
			</view>
			
			<view class="form-item">
				<text class="label">性别</text>
				<van-radio-group v-model="formData.gender" direction="horizontal">
					<van-radio name="男">男</van-radio>
					<van-radio name="女">女</van-radio>
				</van-radio-group>
			</view>
		</view>
		
		<view class="footer">
			<van-button plain type="primary" round size="large" @click="onBack">返回</van-button>
			<van-button type="primary" round size="large" @click="handleSave">保存</van-button>
		</view>
	</view>
</template>

<script setup>
import { addStudent } from '@/services/common'

const classId = ref('')
const userName = ref('')
const userPhone = ref('')

const formData = ref({
	name: '',
	idCard: '',
	gender: '男'
})

onLoad((options) => {
	classId.value = options.classId || ''
	userName.value = decodeURIComponent(options.userName || '')
	userPhone.value = decodeURIComponent(options.userPhone || '')
})

const parseGender = () => {
	const idCard = formData.value.idCard
	if (idCard.length === 18) {
		const genderCode = parseInt(idCard.charAt(16))
		formData.value.gender = genderCode % 2 === 0 ? '女' : '男'
	}
}

const onBack = () => {
	uni.navigateBack()
}

const handleSave = async () => {
	if (!formData.value.name) {
		return uni.showToast({
			title: '请输入学生姓名',
			icon: 'none'
		})
	}
	
	if (!formData.value.idCard) {
		return uni.showToast({
			title: '请输入身份证号',
			icon: 'none'
		})
	}
	
	if (!/^\d{17}[\dXx]$/.test(formData.value.idCard)) {
		return uni.showToast({
			title: '身份证号格式不正确',
			icon: 'none'
		})
	}
	
	try {
		const params = {
			class_id: classId.value,
			name: formData.value.name,
			gender: formData.value.gender,
			id_card: formData.value.idCard,
			created_user: userName.value,
			operator_phone: userPhone.value
		}
		
		const res = await addStudent(params)
		if (res && res.code === 200) {
			uni.showToast({
				title: '新增成功',
				icon: 'success'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		}
	} catch (error) {
		console.error('新增学生失败', error)
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #f5f5f5;
}

.content {
	padding: 20rpx 30rpx;
	padding-top: calc(20rpx + 46px);
}

.form-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.label {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 20rpx;
}

.input {
	font-size: 28rpx;
	color: #333;
	width: 100%;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: #fff;
	display: flex;
	gap: 20rpx;
}

.footer button {
	flex: 1;
}
</style>