Explorar o código

fix(attestation): 优化图片上传与手机号输入逻辑

- 取消手机号输入框禁用状态,允许修改手机号
- 移除身份证和手机号的隐藏处理,显示完整信息
- 图片压缩尺寸限制调整为120KB以内,提升压缩效果
- 添加压缩失败超过限制时的用户提示和重传逻辑
- 图片大小检查增加下限60KB和上限120KB的校验,确保图片质量
- 上传日志增加最终图片大小输出,便于调试
- 提交时增加手机号格式校验,防止无效手机号提交
zouzexu hai 1 semana
pai
achega
d99829207c
Modificáronse 1 ficheiros con 27 adicións e 10 borrados
  1. 27 10
      src/pages/index/attestation/index.vue

+ 27 - 10
src/pages/index/attestation/index.vue

@@ -17,7 +17,7 @@
 			</view>
 			<view class="form-item">
 				<view class="">手机号码</view>
-				<input type="number" v-model="formData.phone" :disabled="isEdit" placeholder="请输入本人或监护人手机号" />
+				<input type="number" v-model="formData.phone" placeholder="请输入本人或监护人手机号" />
 			</view>
 			<view class="form-tips">请填写本人或监护人手机号</view>
 			<view class="form-item-upload">
@@ -79,7 +79,6 @@ onLoad((option) => {
 		newFormData.value.identityCard = formData.value.identityCard;
 		newFormData.value.phone = formData.value.phone;
 		formData.value.identityCard = idCardHide(formData.value.identityCard);
-		formData.value.phone = phoneHide(formData.value.phone);
 
 		isEdit.value = option.edit
 		showOverlay.value = false;
@@ -111,12 +110,16 @@ const handleUploadClick = () => {
 		upload1.value.selectImage();
 	}, 3000);
 };
+// 目标大小上限(字节):要求压缩后小于 120KB
+const MAX_IMAGE_SIZE = 120 * 1024;
+
 // 压缩图片处理
 const handleChange = async (e) => {
 	// tipsPopup.value.open();
 	// return
+	let imageUrl = '';
 	try {
-		const imageUrl = e.join(','); // 获取网络图片URL
+		imageUrl = e.join(','); // 获取网络图片URL
 		const downloadRes = await uni.downloadFile({ url: imageUrl });
 		if (downloadRes.statusCode !== 200) {
 			throw new Error('图片下载失败');
@@ -127,7 +130,8 @@ const handleChange = async (e) => {
 			quality
 		});
 		let fileInfo = await uni.getFileInfo({ filePath: compressRes.tempFilePath });
-		while (fileInfo.size >= 200 * 1024 && quality > 10) {
+		// 循环压缩直到小于 120KB 或 quality 触底
+		while (fileInfo.size >= MAX_IMAGE_SIZE && quality > 10) {
 			quality -= 10;
 			compressRes = await uni.compressImage({
 				src: downloadRes.tempFilePath,
@@ -135,15 +139,22 @@ const handleChange = async (e) => {
 			});
 			fileInfo = await uni.getFileInfo({ filePath: compressRes.tempFilePath });
 		}
+		// 兜底:质量降到最低仍大于 120KB,提示用户重传
+		if (fileInfo.size >= MAX_IMAGE_SIZE) {
+			console.warn('压缩后仍超出限制,size=', fileInfo.size);
+			TipsUtils.tips_toast('图片过大,请上传更清晰且较小的照片');
+			formData.value.realNameImg = '';
+			return;
+		}
 		uploadImage(compressRes.tempFilePath, (url) => {
 			formData.value.realNameImg = url;
-			console.log('上传图片返回的地址:', formData.value.realNameImg);
+			console.log('上传图片返回的地址:', formData.value.realNameImg, '最终大小(KB):', (fileInfo.size / 1024).toFixed(2));
 		});
 	} catch (error) {
 		console.error('图片处理失败:', error);
 		// TipsUtils.tips_toast(error.errMsg);
 		formData.value.realNameImg = imageUrl;
-		console.log('上传图片返回的地址:', formData.value.realNameImg);
+		console.log('上传图片返回的地址(降级使用原图):', formData.value.realNameImg);
 	}
 }
 
@@ -153,7 +164,7 @@ const removeImages = () => {
 	console.log('触发清空:', formData.value.realNameImg);
 }
 
-// 检查图片大小
+// 检查图片大小(下限 60KB,上限 120KB)
 const checkImageSizeBeforeSubmit = async () => {
 	try {
 		const imageUrl = formData.value.realNameImg;
@@ -162,12 +173,17 @@ const checkImageSizeBeforeSubmit = async () => {
 			throw new Error('图片下载失败');
 		}
 		const fileInfo = await uni.getFileInfo({ filePath: downloadRes.tempFilePath });
-		console.log(fileInfo, '图片信息');
-		// 如果图片小于60KB (60 * 1024 字节),提示重新上传
+		console.log(fileInfo, '图片信息', '大小(KB):', (fileInfo.size / 1024).toFixed(2));
+		// 下限:图片小于 60KB,提示重新上传
 		if (fileInfo.size < 60 * 1024) {
 			TipsUtils.tips_toast('图片大小不能小于60KB,请重新上传');
 			return;
 		}
+		// 上限:图片大于等于 120KB,提示重新上传(防止压缩失效)
+		if (fileInfo.size >= MAX_IMAGE_SIZE) {
+			TipsUtils.tips_toast('图片大小不能超过120KB,请重新上传');
+			return;
+		}
 		// 如果图片大小符合要求,则继续进行人脸识别流程
 		queryUserIsRealName();
 	} catch (error) {
@@ -177,11 +193,12 @@ const checkImageSizeBeforeSubmit = async () => {
 }
 
 const editSubmit = () => {
+	if (!ValidateUtils.validatePhone(formData.value.phone)) return TipsUtils.tips_toast('手机号格式不正确');
 	if (!formData.value.realNameImg) return TipsUtils.tips_toast('请上传近期高清、无遮挡照片');
 	const from = {
 		...formData.value,
 		identityCard: isEdit.value ? newFormData.value.identityCard : formData.value.identityCard,
-		phone: isEdit.value ? newFormData.value.phone : formData.value.phone,
+		phone: formData.value.phone,
 	}
 	http.post('/my/familyMembers/editFamilyMembers', { ...from }, { loading: true }).then((res) => {
 		TipsUtils.tips_toast(res.message)