用户报名更新

components/applyForm/index.vue

@@ -126,7 +126,11 @@
 					<text class="checkbox-modal__title">{{ currentCheckboxItem.name || '请选择' }}</text>
 					<text class="checkbox-modal__close" @click="showCheckboxModal = false">完成</text>
 				</view>
-				<view class="checkbox-modal__content">
+				<scroll-view 
+					class="checkbox-modal__content" 
+					scroll-y="true"
+					:style="{ height: checkboxContentHeight + 'px' }"
+				>
 					<checkbox-group @change="(e)=>{checkboxGroupChange(e, currentCheckboxItem)}">
 						<label 
 							class="checkbox-modal__item" 
@@ -141,7 +145,7 @@
 							<text class="checkbox-modal__label">{{checkboxitem.value}}</text>
 						</label>
 					</checkbox-group>
-				</view>
+				</scroll-view>
 			</view>
 		</u-popup>
 	</view>
@@ -179,6 +183,7 @@
 				showCheckboxModal: false,
 				currentCheckboxItem: {},
 				currentCheckboxIndex: 0,
+				checkboxContentHeight: 400, // 多选弹窗内容区域高度，单位px
 				// 日期
 				dateShow: false,
 				dateParams: {
@@ -222,6 +227,7 @@
 			this.formData = {
 				token: token
 			}
+			this.calculateCheckboxHeight()
 		},
 		onLoad() {
 
@@ -327,6 +333,22 @@
 				this.currentCheckboxItem = item
 				this.currentCheckboxIndex = index
 				this.showCheckboxModal = true
+				this.$nextTick(() => {
+					this.calculateCheckboxHeight()
+				})
+			},
+			// 计算多选弹窗内容区域高度
+			calculateCheckboxHeight() {
+				uni.getSystemInfo({
+					success: (res) => {
+						// 屏幕高度的 60%，减去 header 的高度
+						const maxHeight = res.windowHeight * 0.6
+						// header 大约 100rpx，转换为 px
+						const headerHeight = 100 * (res.windowWidth / 750)
+						// content 高度 = 最大高度 - header - 底部 padding
+						this.checkboxContentHeight = maxHeight - headerHeight - 80
+					}
+				})
 			},
 			// 多选
 			checkboxGroupChange(e, item) {
@@ -850,16 +872,17 @@
 		}
 
 		&__content {
-			max-height: 60vh;
-			overflow-y: auto;
 			padding: 20rpx 30rpx 40rpx;
+			box-sizing: border-box;
 		}
 
 		&__item {
 			display: flex;
 			align-items: center;
 			padding: 24rpx 0;
+			padding-left: 10rpx; // 增加左侧 padding，确保 checkbox 不被遮挡
 			border-bottom: 1rpx solid #f5f5f5;
+			box-sizing: border-box;
 
 			&:last-child {
 				border-bottom: none;
@@ -868,12 +891,14 @@
 
 		&__control {
 			transform: scale(1.1);
+			flex-shrink: 0; // 防止 checkbox 被压缩
 		}
 
 		&__label {
 			margin-left: 20rpx;
 			font-size: 28rpx;
 			color: #333;
+			flex: 1;
 		}
 	}
 

components/difference-modal/index.vue

@@ -4,7 +4,11 @@
 			<view class="difference-modal__header">
 				<text class="difference-modal__title">信息差异提示</text>
 			</view>
-			<view class="difference-modal__content">
+			<scroll-view 
+				class="difference-modal__content" 
+				scroll-y="true"
+				:style="{ height: contentHeight + 'px' }"
+			>
 				<text class="difference-modal__tip">您本次提交的信息与过往信息不同，是否更新本次信息？</text>
 				<view class="difference-modal__list">
 					<view 
@@ -17,22 +21,23 @@
 						</view>
 						<view class="difference-modal__item-content">
 							<view class="difference-modal__value-row">
-								<text class="difference-modal__label">原值：</text>
-								<text class="difference-modal__value difference-modal__value--old">{{ item.oldValue }}</text>
+								<text class="difference-modal__label">原信息：</text>
+								<view class="difference-modal__value difference-modal__value--old">{{ item.oldValue }}</view>
 							</view>
 							<view class="difference-modal__value-row">
-								<text class="difference-modal__label">新值：</text>
-								<text class="difference-modal__value difference-modal__value--new">{{ item.newValue }}</text>
-							</view>
+								<text class="difference-modal__label">新信息：</text>
+								<view class="difference-modal__value difference-modal__value--new">{{ item.newValue }}</view>
 							</view>
 						</view>
 					</view>
 				</view>
+			</scroll-view>
 			<view class="difference-modal__footer">
+				<view class="difference-modal__footer-row">
 					<u-button 
 						type="default" 
 						@click="handleChoice(false)"
-					:custom-style="{ marginRight: '20rpx', flex: 1 }"
+						:custom-style="{ flex: 1 }"
 					>
 						维持原信息
 					</u-button>
@@ -44,6 +49,15 @@
 						按本次信息更新
 					</u-button>
 				</view>
+				<view class="difference-modal__footer-row difference-modal__footer-row--center">
+					<u-button 
+						type="default" 
+						@click="handleChoice('cancel')"
+					>
+						返回修改
+					</u-button>
+				</view>
+			</view>
 		</view>
 	</u-popup>
 </template>
@@ -61,9 +75,41 @@
 				default: () => []
 			}
 		},
+		data() {
+			return {
+				contentHeight: 400 // 默认高度，单位px
+			}
+		},
+		mounted() {
+			this.calculateHeight()
+		},
+		watch: {
+			show(newVal) {
+				if (newVal) {
+					this.$nextTick(() => {
+						this.calculateHeight()
+					})
+				}
+			}
+		},
 		methods: {
 			handleChoice(update) {
 				this.$emit('choice', update)
+			},
+			calculateHeight() {
+				// 使用系统信息计算合适的高度
+				// 弹框最大高度 80vh，减去 header 和 footer 的高度
+				uni.getSystemInfo({
+					success: (res) => {
+						// 屏幕高度的 70%（减小了 10%）
+						const maxHeight = res.windowHeight * 0.7
+						// header 大约 120rpx，footer 大约 200rpx，转换为 px
+						const headerHeight = 120 * (res.windowWidth / 750)
+						const footerHeight = 200 * (res.windowWidth / 750)
+						// content 高度 = 总高度 - header - footer - 额外减少 50px
+						this.contentHeight = maxHeight - headerHeight - footerHeight - 50
+					}
+				})
 			}
 		}
 	}
@@ -72,12 +118,19 @@
 <style scoped lang="scss">
 	.difference-modal {
 		width: 640rpx;
-		max-height: 80vh;
+		max-width: 640rpx;
+		max-height: 70vh;
 		background-color: #fff;
 		border-radius: 14rpx;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
+		box-sizing: border-box;
+		
+		// 确保所有子元素都使用 border-box
+		* {
+			box-sizing: border-box;
+		}
 		
 		&__header {
 			padding: 40rpx 30rpx 20rpx;
@@ -92,9 +145,9 @@
 		}
 		
 		&__content {
-			flex: 1;
 			padding: 30rpx;
-			overflow-y: auto;
+			box-sizing: border-box;
+			width: 100%;
 		}
 		
 		&__tip {
@@ -102,14 +155,24 @@
 			color: #666;
 			line-height: 1.6;
 			margin-bottom: 30rpx;
+			word-wrap: break-word;
+			word-break: break-all;
+			box-sizing: border-box;
 		}
 		
 		&__list {
+			width: 100%;
+			box-sizing: border-box;
+			
 			.difference-modal__item {
 				margin-bottom: 30rpx;
 				padding: 20rpx;
 				background-color: #f8f8f8;
 				border-radius: 8rpx;
+				box-sizing: border-box;
+				width: 100%;
+				max-width: 100%;
+				overflow: hidden;
 				
 				&:last-child {
 					margin-bottom: 0;
@@ -119,19 +182,30 @@
 		
 		&__item-header {
 			margin-bottom: 15rpx;
+			width: 100%;
+			box-sizing: border-box;
 		}
 		
 		&__item-name {
 			font-size: 30rpx;
 			font-weight: bold;
 			color: #333;
+			word-wrap: break-word;
+			word-break: break-all;
 		}
 		
 		&__item-content {
+			width: 100%;
+			max-width: 100%;
+			box-sizing: border-box;
+			
 			.difference-modal__value-row {
 				display: flex;
-				align-items: center;
+				align-items: flex-start;
 				margin-bottom: 10rpx;
+				width: 100%;
+				max-width: 100%;
+				box-sizing: border-box;
 				
 				&:last-child {
 					margin-bottom: 0;
@@ -143,11 +217,21 @@
 			font-size: 26rpx;
 			color: #666;
 			width: 100rpx;
+			flex-shrink: 0;
+			box-sizing: border-box;
 		}
 		
 		&__value {
 			font-size: 26rpx;
 			flex: 1;
+			min-width: 0; // 允许 flex 子元素缩小
+			max-width: 100%;
+			word-wrap: break-word;
+			word-break: break-all;
+			white-space: normal;
+			line-height: 1.5;
+			overflow-wrap: break-word;
+			box-sizing: border-box;
 			
 			&--old {
 				color: #999;
@@ -161,9 +245,21 @@
 		
 		&__footer {
 			padding: 30rpx;
+            padding-bottom:50rpx;
 			border-top: 1rpx solid #f0f0f0;
+			display: flex;
+			flex-direction: column;
+			gap: 20rpx;
+		}
+		
+		&__footer-row {
 			display: flex;
 			justify-content: space-between;
+			gap: 20rpx;
+			
+			&--center {
+				justify-content: center;
+			}
 		}
 	}
 </style>

packages/apply/index.vue

@@ -239,10 +239,16 @@
 					return false
 				}
 			},
-			// 处理用户选择（按本次信息更新/维持原信息）
+			// 处理用户选择（按本次信息更新/维持原信息/返回修改）
 			async handleDifferenceChoice(update) {
 				this.showDifferenceModal = false
 				
+				if (update === 'cancel') {
+					// 选择"返回修改"，关闭弹窗，解锁，让用户重新修改表单
+					this.isLocked = false
+					return
+				}
+				
 				if (update) {
 					// 选择"按本次信息更新"
 					const success = await this.updateUserInfo()