yueche_app/pages/authenticate/authenticate.vue

<template>
	<view class="container">
		<wd-form ref="form" :model="formValue">
			<wd-cell-group border>
				<wd-input
					v-model="formValue.username"
					label="姓名"
					label-width="100px"
					prop="username"
					clearable
					placeholder="请输入姓名"
					:rules="[{ required: false, validator: validatorName, message: '请输入姓名' }]"
				/>
				<wd-input
					v-if="cardType == '教师认证'"
					v-model="formValue.num"
					label="工号"
					label-width="100px"
					prop="num"
					clearable
					placeholder="请输入工号"
					:rules="[
						{
							required: false,
							validator: validatorNum,
							message: '请输入工号'
						}
					]"
				/>
				<wd-input
					v-if="cardType == '暖心认证'"
					v-model="formValue.studentNum"
					label="学号"
					label-width="100px"
					prop="studentNum"
					clearable
					placeholder="请输入学号"
					:rules="[
						{
							required: false,
							validator: validatorNum,
							message: '请输入学号'
						}
					]"
				/>
				<wd-input
					v-model="formValue.faculty"
					label="所在院系"
					label-width="100px"
					prop="faculty"
					clearable
					placeholder="请输入所在院系"
					:rules="[
						{
							required: false,
							validator: validatorNum,
							message: '请输入所在院系'
						}
					]"
				/>
				<wd-input
					v-if="cardType == '教师认证'"
					v-model="formValue.worker"
					label="职称"
					label-width="100px"
					prop="worker"
					clearable
					placeholder="请输入职称"
					:rules="[
						{
							required: false,
							validator: validatorNum,
							message: '请输入职称'
						}
					]"
				/>
				<wd-input
					v-if="cardType == '暖心认证'"
					v-model="formValue.teacherName"
					label="辅导员姓名"
					label-width="100px"
					prop="teacherName"
					clearable
					placeholder="请输入辅导员姓名"
					:rules="[
						{
							required: false,
							validator: validatorNum,
							message: '请输入辅导员姓名'
						}
					]"
				/>
				<wd-input
					v-model="formValue.mobile"
					label="手机号"
					label-width="100px"
					prop="mobile"
					clearable
					placeholder="请输入手机号码"
					:rules="[
						{
							required: false,
							validator: validatorPhone,
							message: '请输入手机号码'
						}
					]"
				/>

				<wd-cell prop="imgurl">
					<view class="form_title">上传证件：</view>
					<wd-upload :file-list="formValue.imgurl" action="https://ftf.jd.com/api/uploadImg" @change="handleFileChange">
						<view class="upload">
							<wd-icon color="#ABA6A6" name="photo" size="27"></wd-icon>
							身份证正面
						</view>
					</wd-upload>
				</wd-cell>

				<wd-cell prop="imgurlBack">
					<wd-upload :file-list="formValue.imgurlBack" action="https://ftf.jd.com/api/uploadImg" @change="handleFileChange">
						<view class="upload">
							<wd-icon color="#ABA6A6" name="photo" size="27"></wd-icon>
							身份证反面
						</view>
					</wd-upload>
				</wd-cell>
			</wd-cell-group>
			<view class="footer">
				<wd-button type="primary" size="large" block @click="handleSubmit">点击提交</wd-button>
			</view>
		</wd-form>
	</view>
</template>

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

const cardType = ref('')

// 表格绑定数据
const formValue = ref({
	username: '',
	num: '',
	studentNum: '',
	faculty: '',
	worker: '',
	teacherName: '',
	mobile: '',
	imgurl: [],
	imgurlBack: []
})

// 表格DOM
const form = ref(null)

onLoad((options) => {
	if (options.cardType) {
		cardType.value = options.cardType
		uni.setNavigationBarTitle({
			title: cardType.value
		})
	}
})

const handleFileChange = () => {}

// 保存按钮回调
const handleSubmit = () => {
	form.value
		.validate()
		.then(({ valid, errors }) => {
			if (valid) {
				if (formValue.value.id) {
					// 修改请求
					// submitEditReq()
				} else {
					// 新增请求
					// submitAddReq()
				}
			}
		})
		.catch((error) => {
			console.log(error, 'error')
		})
}

// 姓名验证规则
const validatorName = (val) => {
	const result = val.replace(/\s+/g, '')
	if (result) {
		if (result.length > 1 && result.length < 5) {
			return Promise.resolve()
		} else {
			return Promise.reject('姓名为2-4个字符')
		}
	}
}

// 身份证号码验证规则
const validatorNum = (val) => {
	if (val) {
		// 去除空格
		const cleanedId = val.replace(/\s+/g, '')

		// 基本格式校验：18位，前17位数字，最后一位可以是数字或X
		const idReg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/
		if (!idReg.test(cleanedId)) {
			return Promise.reject('请输入有效的18位身份证号码')
		}

		// 校验码验证
		// 加权因子
		const factors = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
		// 校验码对应值
		const parityBits = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']

		let sum = 0
		const code = cleanedId.toUpperCase() // 转为大写

		// 计算前17位与对应因子乘积的和
		for (let i = 0; i < 17; i++) {
			sum += parseInt(code.charAt(i)) * factors[i]
		}

		// 计算校验码
		const checkCode = parityBits[sum % 11]

		// 验证校验码
		if (code.charAt(17) !== checkCode) {
			return Promise.reject('身份证号码校验无效')
		}

		// 验证出生日期
		const year = parseInt(code.substr(6, 4))
		const month = parseInt(code.substr(10, 2))
		const day = parseInt(code.substr(12, 2))
		const birthDate = new Date(year, month - 1, day)

		if (birthDate.getFullYear() !== year || birthDate.getMonth() + 1 !== month || birthDate.getDate() !== day) {
			return Promise.reject('身份证号码中的出生日期无效')
		}

		return Promise.resolve()
	}
}

// 时间号码验证规则
const validatorPhone = (val) => {
	const phoneReg = /^1[3-9]\d{9}$/
	if (val) {
		if (phoneReg.test(val)) {
			return Promise.resolve()
		} else {
			return Promise.reject('手机号码格式错误')
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 20rpx 0;
	height: 100vh;
	background-color: #fff;
	overflow-y: auto;

	.form_title {
		margin-bottom: 30rpx;
		font-size: 28rpx;
		text-align: left;
	}

	.upload {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 316rpx;
		font-size: 28rpx;
		color: #bfbfbf;
		border-radius: 16rpx;
		border: 2rpx solid #707070;
		background-color: #fff;
	}

	.footer {
		margin: 50rpx auto 30rpx;
		width: 700rpx;

		:deep(.wd-button) {
			background-color: #ff8205;
		}
	}
}
</style>