外宿申请填写-申请须知弹窗优化

pages/dormitory/outsideAccommodation/applicationForm.vue

@@ -286,7 +286,12 @@
 		</view>
 
 		<!-- 申请须知弹窗（5秒自动关闭） -->
-		<view class="mask" v-if="showNoticePopup" @click="closeNoticePopup"></view>
+		<!-- 给mask添加.stop阻止事件冒泡，避免点击mask关闭弹窗 -->
+		<!-- 模板：给容器加过渡动画 -->
+		<transition name="popup-fade">
+			<view class="mask" v-if="showNoticePopup" @click.stop="() => {}"></view>
+		</transition>
+		<transition name="popup-slide">
 			<view class="notice-popup" v-if="showNoticePopup">
 				<view class="popup-header">
 					<text class="popup-title">申请须知</text>
@@ -304,6 +309,7 @@
 					</button>
 				</view>
 			</view>
+		</transition>
 		
 		<!-- 通用签名弹窗（使用 uni-app 内置绘图 API） -->
 		<view class="mask" v-if="showSignPopup" @click="closeSignPopup"></view>
@@ -1100,18 +1106,40 @@
 				});
 			},
 			submitForm(status) {
-				const requiredFields = [
+				// 定义英文字段名和中文提示的映射关系
-					'原宿舍号', '姓名', '性别', '出生日期',
+				const fieldMap = {
-					'专业', '班级', '学号', '身份证', '手机号码',
+					'originalDormitory': '原宿舍号',
-					'外宿原因', '外宿地址省市区', '详细门牌号', '紧急联系人',
+					'studentName': '姓名',
-					'紧急联系电话', '家长意见', '家长联系电话', '家长地址省市区',
+					'gender': '性别',
-					'家长地址详细', '签署日期'
+					'birthDate': '出生日期',
-				];
+					'majorName': '专业',
+					'className': '班级',
+					'studentNo': '学号',
+					'idCard': '身份证',
+					'studentPhone': '手机号码',
+					'applyReason': '外宿原因',
+					'address': '外宿地址省市区',
+					'outsideAddress': '详细门牌号',
+					'emergencyContact': '紧急联系人',
+					'emergencyPhone': '紧急联系电话',
+					'parentOpinion': '家长意见',
+					'parentPhone': '家长联系电话',
+					'parentAddress': '家长地址省市区',
+					'parentDetailAddress': '家长地址详细',
+					'promiseDate': '签署日期'
+				};
 
+				// 提取所有需要验证的英文字段名
+				const requiredFields = Object.keys(fieldMap);
+
+				// 筛选出为空的英文字段
 				const emptyFields = requiredFields.filter(field => !this.form[field]);
+
 				if (emptyFields.length) {
+					// 根据空的英文字段，找到对应的中文提示
+					const emptyFieldCn = fieldMap[emptyFields[0]];
 					uni.showToast({
-						title: '请填写' + emptyFields[0],
+						title: '请填写' + emptyFieldCn,
 						icon: 'none'
 					});
 					return;
@@ -1881,4 +1909,49 @@
 		padding: 12rpx 24rpx;
 		font-size: 26rpx;
 	}
+	/* 添加过渡样式 */
+	.popup-fade-enter-active, .popup-fade-leave-active {
+		transition: opacity 0.3s ease;
+	}
+	.popup-fade-enter-from, .popup-fade-leave-to {
+		opacity: 0;
+	}
+	
+	.popup-slide-enter-active, .popup-slide-leave-active {
+		transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	.popup-slide-enter-from {
+		opacity: 0;
+		transform: translate(-50%, -50%) translateY(50px);
+	}
+	.popup-slide-leave-to {
+		opacity: 0;
+		transform: translate(-50%, -50%) translateY(50px);
+	}
+	/* 蒙层渐入渐出动画 */
+	.popup-fade-enter-active, 
+	.popup-fade-leave-active {
+		transition: opacity 0.3s ease;
+	}
+	/* 进入前/离开后状态（透明） */
+	.popup-fade-enter, 
+	.popup-fade-leave-to {
+		opacity: 0;
+	}
+	
+	/* 弹窗滑入滑出动画（核心） */
+	.popup-slide-enter-active, 
+	.popup-slide-leave-active {
+		transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动曲线更丝滑 */
+	}
+	/* 进入前状态：透明 + 向下偏移50px */
+	.popup-slide-enter {
+		opacity: 0;
+		transform: translate(-50%, -50%) translateY(50px);
+	}
+	/* 离开后状态：透明 + 向下偏移50px */
+	.popup-slide-leave-to {
+		opacity: 0;
+		transform: translate(-50%, -50%) translateY(50px);
+	}
 </style>