xgxt_sd/zhxg_app
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
962704835@qq.com
2025-12-17 19:09:42 +08:00
parent f6e4fb3781
commit b69ea9f172
1 changed files with 99 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
pages/dormitory/outsideAccommodation/applicationForm.vue
View File

@@ -286,25 +286,31 @@
</view>
<!-- 申请须知弹窗（5秒自动关闭） -->
<view class="mask" v-if="showNoticePopup" @click="closeNoticePopup"></view>
<view class="notice-popup" v-if="showNoticePopup">
<view class="popup-header">
<text class="popup-title">申请须知</text>
<text class="countdown" v-if="countdown > 0">剩余 {{countdown}} 秒</text>
<!-- 给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>
<text class="countdown" v-if="countdown > 0">剩余 {{countdown}} 秒</text>
</view>
<view class="popup-content">
<view class="notice-item">1. 仅限南宁市学生申请外宿，需完整填写所有必填项并上传对应附件</view>
<view class="notice-item">2. 外宿原因需上传佐证材料（因病提供病例，外宿居所提供住房证明等）</view>
<view class="notice-item">3. 家长意见需上传签字扫描件，本人承诺需完成电子签名</view>
<view class="notice-item">4. 审批通过后需经学院领导签署意见，方可办理退房手续</view>
</view>
<view class="popup-footer">
<button type="primary" @click="closeNoticePopup" :disabled="countdown > 0" class="popup-btn">
我已阅读并知晓
</button>
</view>
</view>
<view class="popup-content">
<view class="notice-item">1. 仅限南宁市学生申请外宿，需完整填写所有必填项并上传对应附件</view>
<view class="notice-item">2. 外宿原因需上传佐证材料（因病提供病例，外宿居所提供住房证明等）</view>
<view class="notice-item">3. 家长意见需上传签字扫描件，本人承诺需完成电子签名</view>
<view class="notice-item">4. 审批通过后需经学院领导签署意见，方可办理退房手续</view>
</view>
<view class="popup-footer">
<button type="primary" @click="closeNoticePopup" :disabled="countdown > 0" class="popup-btn">
我已阅读并知晓
</button>
</view>
</view>
</transition>
<!-- 通用签名弹窗（使用 uni-app 内置绘图 API） -->
<view class="mask" v-if="showSignPopup" @click="closeSignPopup"></view>
<view class="sign-popup" v-if="showSignPopup">
@@ -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>