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.cardNumber"
					label="工号"
					label-width="100px"
					prop="cardNumber"
					clearable
					placeholder="请输入工号"
					:rules="[
						{
							required: false,
							message: '请输入工号'
						}
					]"
				/>
				<wd-input
					v-if="cardType == '暖心认证'"
					v-model="formValue.cardNumber"
					label="学号"
					label-width="100px"
					prop="cardNumber"
					clearable
					placeholder="请输入学号"
					:rules="[
						{
							required: false,
							message: '请输入学号'
						}
					]"
				/>
				<wd-input
				    v-if="cardType == '教师认证'"
					v-model="formValue.college"
					label="所在院系"
					label-width="100px"
					prop="college"
					clearable
					placeholder="请输入所在院系"
					:rules="[
						{
							required: false,
							message: '请输入所在院系'
						}
					]"
				/>
				<wd-input
					v-if="cardType == '教师认证'"
					v-model="formValue.professor"
					label="职称"
					label-width="100px"
					prop="professor"
					clearable
					placeholder="请输入职称"
					:rules="[
						{
							required: false,
							message: '请输入职称'
						}
					]"
				/>
				<!-- <wd-input
					v-if="cardType == '暖心认证'"
					v-model="formValue.instructor"
					label="辅导员姓名"
					label-width="100px"
					prop="instructor"
					clearable
					placeholder="请输入辅导员姓名"
					:rules="[
						{
							required: false,
							message: '请输入辅导员姓名'
						}
					]"
				/> -->
				<wd-input
					v-model="formValue.mobile"
					v-if="cardType == '教师认证'"
					label="手机号"
					label-width="100px"
					prop="mobile"
					clearable
					placeholder="请输入手机号码"
					:rules="[
						{
							required: false,
							validator: validatorPhone,
							message: '请输入手机号码'
						}
					]"
				/>

				<wd-cell prop="imgurl" v-if="cardType == '教师认证'">
					<view class="form_title">上传证件：</view>
					<wd-upload :file-list="frontFileList" :custom-upload="customUpload1"
					:limit="1"
					:build-form-data="beforeChoose1"
					:formData="formData2"
					 @change="handleFrontChange">
						<view class="upload">
							<wd-icon color="#ABA6A6" name="photo" size="27"></wd-icon>
							身份证正面
						</view>
					</wd-upload>
				</wd-cell>

				<wd-cell prop="imgurlBack" v-if="cardType == '教师认证'">
					<wd-upload :file-list="backFileList" 
					:custom-upload="customUpload"
					:limit="1"
					:build-form-data="beforeChoose"
					:formData="formData2"
					@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,computed,watch   } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { myRequest,myUploadFile } from '@/utils/api.ts'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
const BASE_URL = 'https://car.meiyishuoo.com/ride-sharing/carBuy'; // 
const cardType = ref('')



// 表格绑定数据
const formValue = ref({
	id: uni.getStorageSync('carUserInfo').id ,
	username: '',
	cardNumber: '',
	college: '',
	professor: '',
	// instructor: '',
	mobile: '',
	file1: '',
	file2: '',
})
const info = ref({})
// 存储两处上传的文件列表
const frontFileList = ref([]); // 身份证正面
const backFileList = ref([]);  // 身份证反面
// 上传额外参数（响应式）
const formData2 = computed(() => ({
  type: 'idCardBack' // 身份证反面标识，固定参数
}));

// 表格DOM
const form = ref(null)
// 是否修改
const ifXiu = ref(false)

// 监听backFileList变化，同步到formValue.file1
// watch(
//   backFileList,
//   (newList) => {
//     // 取最新上传的第一张图片的url（若存在）
//     if (newList.length > 0) {
//       formValue.value.file2 = newList[0] || '';
//     } else {
//       // 若列表为空，清空file2（可选）
//       formValue.value.file2 = '';
//     }
//     console.log('formValue.file2已同步：', formValue.value.file2,formValue.value);
//   },
//   { deep: true },  // 深度监听，确保数组内对象变化也能触发
  
//   frontFileList,
//   (newList) => {
//     // 取最新上传的第一张图片的url（若存在）
//     if (newList.length > 0) {
//       formValue.value.file1 = newList[0] || '';
//     } else {
//       // 若列表为空，清空file1（可选）
//       formValue.value.file1 = '';
//     }
//     console.log('formValue.file1已同步：', formValue.value.file1);
//   },
//   { deep: true },  // 深度监听，确保数组内对象变化也能触发
// );

onLoad((options) => {
	console.log(options)
	if (options.cardType) {
		cardType.value = options.cardType
		if (options.info) {
			ifXiu.value=true
			uni.setNavigationBarTitle({
				title: '修改认证'
			})
			formValue.value = JSON.parse(decodeURIComponent(options.info))
			console.log(formValue.value)
			// 同步已上传的图片到上传组件的文件列表
			if (formValue.value.file1) {
			  frontFileList.value.push(formValue.value.file1)
			}
			if (formValue.value.file2) {
			  backFileList.value.push(formValue.value.file2)
			}
		} else {
			ifXiu.value=false
			uni.setNavigationBarTitle({
				title: cardType.value
			})
		}
	}
})


// 处理身份证正面上传变化
// 文件选择前的校验与参数处理
const beforeChoose1 = async ({ file, formData, resolve }) => {
  // 1. 提取文件后缀（修复原代码中file.url的错误，小程序中临时路径用path）
  const tempPath = file.path || file.url; // 兼容H5和小程序
  const lastDotIndex = tempPath.lastIndexOf('.');
  const fileExt = lastDotIndex > -1 ? tempPath.slice(lastDotIndex + 1).toLowerCase() : '';
  console.log('文件信息：', file, '路径：', tempPath, '后缀：', fileExt);

  // 2. 校验文件是否已上传（通过文件名去重）
  if (frontFileList.value.some(item => item.name === file.name)) {
    uni.showToast({ title: '当前图片已上传，请选择其他照片', icon: 'none' });
    resolve(false); // 阻止上传
    return;
  }
  // 3. 校验文件大小（5M以内）
  if (file.size >= 5 * 1024 * 1024) {
    uni.showToast({ title: '请上传小于5M的图片', icon: 'none' });
    resolve(false); // 阻止上传
    return;
  }
  // 4. 校验文件类型
  if (!['png', 'jpg', 'jpeg'].includes(fileExt)) {
    uni.showToast({ title: '请上传png/jpg/jpeg格式的图片', icon: 'none' });
    resolve(false); // 阻止上传
    return;
  }
  // 校验通过：返回包含允许上传的标识（兼容组件要求）
    resolve({
      ...formData,
      allowUpload: true // 显式允许上传
    });
	
	try {
	  // 调用封装的上传方法
	  const res = await myUploadFile({
	    url: '/filesload.action',
	    filePath: file.path || file.url, // 临时文件路径
	    name: 'myFile', // 后端接收文件的字段名
	    formData: formData2.value // 额外参数
	  });
	
	  if (res.code === 200) {
			frontFileList.value.push(res.data.url);
			uni.showToast({ title: '上传成功', icon: 'none' });
			console.log('上传成功，图片链接：', res.data.url,frontFileList);
	  } else {
	    // 接口返回错误
	    // onError(res.message || '上传失败1');
	    uni.showToast({ title: res.message || '上传失败2', icon: 'none' });
	  }
	} catch (err) {
	  console.error('上传失败：', err);
	  uni.showToast({ title: '网络异常，请重试', icon: 'none' });
	}
};

const handleFrontChange = async ({ fileList }) => {
	frontFileList.value = fileList; // 自动同步删除后的列表
};

// 处理身份证反面上传
// 文件选择前的校验与参数处理
const beforeChoose = async ({ file, formData, resolve }) => {
  // 1. 提取文件后缀（修复原代码中file.url的错误，小程序中临时路径用path）
  const tempPath = file.path || file.url; // 兼容H5和小程序
  const lastDotIndex = tempPath.lastIndexOf('.');
  const fileExt = lastDotIndex > -1 ? tempPath.slice(lastDotIndex + 1).toLowerCase() : '';
  console.log('文件信息：', file, '路径：', tempPath, '后缀：', fileExt);

  // 2. 校验文件是否已上传（通过文件名去重）
  if (backFileList.value.some(item => item.name === file.name)) {
    uni.showToast({ title: '当前图片已上传，请选择其他照片', icon: 'none' });
    resolve(false); // 阻止上传
    return;
  }

  // 3. 校验文件大小（5M以内）
  if (file.size >= 5 * 1024 * 1024) {
    uni.showToast({ title: '请上传小于5M的图片', icon: 'none' });
    resolve(false); // 阻止上传
    return;
  }

  // 4. 校验文件类型
  if (!['png', 'jpg', 'jpeg'].includes(fileExt)) {
    uni.showToast({ title: '请上传png/jpg/jpeg格式的图片', icon: 'none' });
    resolve(false); // 阻止上传
    return;
  }

  // 校验通过：返回包含允许上传的标识（兼容组件要求）
    resolve({
      ...formData,
      allowUpload: true // 显式允许上传
    });
    console.log('beforeChoose校验通过，允许上传');
	
	try {
	  // 调用封装的上传方法
	  const res = await myUploadFile({
	    url: '/filesload.action',
	    filePath: file.path || file.url, // 临时文件路径
	    name: 'myFile', // 后端接收文件的字段名
	    formData: formData2.value // 额外参数
	  });
	
	  if (res.code === 200) {
		  console.log(122)
	    // 上传成功：调用组件的onSuccess更新文件列表
	    // onSuccess({
	    //   ...file,
	    //   url: res.data.url, // 后端返回的在线图片地址
	    //   status: 'success' // 标记为成功状态
	    // });
		backFileList.value.push(res.data.url);
		uni.showToast({ title: '上传成功', icon: 'none' });
	    console.log('上传成功，图片链接：', res.data.url,backFileList);
	  } else {
	    // 接口返回错误
	    // onError(res.message || '上传失败1');
	    uni.showToast({ title: res.message || '上传失败2', icon: 'none' });
	  }
	} catch (err) {
	  // 网络错误或其他异常
	  // onError('网络异常，请重试');
	  console.error('上传失败：', err);
	  uni.showToast({ title: '网络异常，请重试', icon: 'none' });
	}
};

// 监听文件列表变化（删除后会触发）
const handleFileChange = ({ fileList }) => {
  backFileList.value = fileList; // 自动同步删除后的列表
  // console.log('当前文件列表：', backFileList);
};

// // 自定义上传逻辑（覆盖默认action上传，更灵活控制）
// const customUpload = async (options) => {
// 	// 打印日志确认是否被调用
// 	  console.log('customUpload被触发，文件信息：', options.file);
// 	console.log('kljlllll')
//   const { file, onSuccess, onError } = options;
//   try {
//     // 调用封装的上传方法
//     const res = await myUploadFile({
//       url: '/filesload.action',
//       filePath: file.path || file.url, // 临时文件路径
//       name: 'myFile', // 后端接收文件的字段名
//       formData: formData2.value // 额外参数
//     });

//     if (res.code === 200) {
//       // 上传成功：调用组件的onSuccess更新文件列表
//       onSuccess({
//         ...file,
//         url: res.data.url, // 后端返回的在线图片地址
//         status: 'success' // 标记为成功状态
//       });
//       console.log('上传成功，图片链接：', res.data.url);
//     } else {
//       // 接口返回错误
//       onError(res.message || '上传失败1');
//       uni.showToast({ title: res.message || '上传失败2', icon: 'none' });
//     }
//   } catch (err) {
//     // 网络错误或其他异常
//     onError('网络异常，请重试');
//     console.error('上传失败：', err);
//     uni.showToast({ title: '网络异常，请重试', icon: 'none' });
//   }
// };


// 保存按钮回调
const handleSubmit = () => {
	console.log(cardType.value,'k')
	
	if(cardType.value == '教师认证'){
		form.value
			.validate()
			.then(({ valid, errors }) => {
				if (valid) {
					if (ifXiu.value) {
						// 修改请求
						submitEditReq()
					} else {
						// 新增请求
						submitAddReq()
					}
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}else if(cardType.value == '暖心认证'){
		form.value
			.validate()
			.then(({ valid, errors }) => {
				if (valid) {
					if (ifXiu.value) {
						// 修改请求
						submitEditReqStu()
					} else {
						console.log(cardType.value,'k      xxx')
						// 新增请求
						submitAddReqStu()
					}
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
}
//教师认证
// 新增请求
const submitAddReq = async () => {
	const leng=frontFileList.value.length-1
	const leng2=frontFileList.value.length-1
	if (frontFileList.value.length > 0) {
		
	  formValue.value.file1 = frontFileList.value[leng];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file1 = '';
	  uni.showToast({ title:  '请上传身份证正面照片', icon: 'none' });
	}
	if (backFileList.value.length > 0) {
		
	  formValue.value.file2 = backFileList.value[leng2];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file2 = '';
	  uni.showToast({ title:  '请上传身份证反面照片', icon: 'none' });
	}
	
	// 基础数据（必传字段）
	  const requestData = {
	    username: formValue.value.username,
	    cardNumber: formValue.value.cardNumber,
	    college: formValue.value.college,
	    professor: formValue.value.professor,
	    mobile: formValue.value.mobile,
	    file1: formValue.value.file1,
	    file2: formValue.value.file2
	    // 先不包含 professor
	  };
	console.log(formValue.value,'aaammmmm')
	const res = await myRequest({
		url: '/vertifyinsertTea.action',
		method: 'post',
		data: requestData
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/transportation/transportation'
			})
		}, 1500)
	}
}

// 修改请求
const submitEditReq = async () => {
	const leng=frontFileList.value.length-1
	const leng2=frontFileList.value.length-1
	if (frontFileList.value.length > 0) {
		
	  formValue.value.file1 = frontFileList.value[leng];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file1 = '';
	  uni.showToast({ title:  '请上传身份证正面照片', icon: 'none' });
	}
	if (backFileList.value.length > 0) {
		
	  formValue.value.file2 = backFileList.value[leng2];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file2 = '';
	  uni.showToast({ title:  '请上传身份证反面照片', icon: 'none' });
	}
	
	// 基础数据（必传字段）
	  const requestData = {
	    id: formValue.value.id,
	    username: formValue.value.username,
	    cardNumber: formValue.value.cardNumber,
	    college: formValue.value.college,
	    professor: formValue.value.professor,
	    mobile: formValue.value.mobile,
	    file1: formValue.value.file1,
	    file2: formValue.value.file2
	    // 先不包含 professor
	  };
	console.log(formValue.value,'aaammmmmxiu')
	const res = await myRequest({
		url: '/vertifyupdateTea.action',
		method: 'post',
		data: requestData
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/transportation/transportation'
			})
		}, 1500)
	}
}

//暖心认证
// 新增请求
const submitAddReqStu = async () => {
	const leng=frontFileList.value.length-1
	const leng2=frontFileList.value.length-1
	if (frontFileList.value.length > 0) {
		
	  formValue.value.file1 = frontFileList.value[leng];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file1 = '';
	  uni.showToast({ title:  '请上传身份证正面照片', icon: 'none' });
	}
	if (backFileList.value.length > 0) {
		
	  formValue.value.file2 = backFileList.value[leng2];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file2 = '';
	  uni.showToast({ title:  '请上传身份证反面照片', icon: 'none' });
	}
	
	// 基础数据（必传字段）
	  const requestData = {
	    username: formValue.value.username,
	    cardNumber: formValue.value.cardNumber,
	    // college: formValue.value.college,
	    // instructor: formValue.value.instructor,
	    // mobile: formValue.value.mobile,
	    // file1: formValue.value.file1,
	    // file2: formValue.value.file2
	    // 先不包含 professor
	  };
	console.log(formValue.value,'aaammmmm')
	const res = await myRequest({
		url: '/vertifyinsertPtu.action',
		method: 'post',
		data: formValue.value
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/transportation/transportation'
			})
		}, 1500)
	}
}

// 修改请求
const submitEditReqStu = async () => {
	const leng=frontFileList.value.length-1
	const leng2=frontFileList.value.length-1
	if (frontFileList.value.length > 0) {
		
	  formValue.value.file1 = frontFileList.value[leng];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file1 = '';
	  uni.showToast({ title:  '请上传身份证正面照片', icon: 'none' });
	}
	if (backFileList.value.length > 0) {
		
	  formValue.value.file2 = backFileList.value[leng2];
	} else {
	  // 若列表为空，清空file2（可选）
	  formValue.value.file2 = '';
	  uni.showToast({ title:  '请上传身份证反面照片', icon: 'none' });
	}
	
	// 基础数据（必传字段）
	  const requestData = {
	    id: formValue.value.id,
	    username: formValue.value.username,
	    cardNumber: formValue.value.cardNumber,
	    // college: formValue.value.college,
	    // instructor: formValue.value.instructor,
	    // mobile: formValue.value.mobile,
	    // file1: formValue.value.file1,
	    // file2: formValue.value.file2
	    // 先不包含 professor
	  };
	console.log(formValue.value,'aaammmmm')
	const res = await myRequest({
		url: '/vertifyupdatePtu.action',
		method: 'post',
		data: formValue.value
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/transportation/transportation'
			})
		}, 1500)
	}
}

// 姓名验证规则
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>