diff --git a/components/applyForm/index.vue b/components/applyForm/index.vue index bc6da0f..c27e121 100644 --- a/components/applyForm/index.vue +++ b/components/applyForm/index.vue @@ -126,7 +126,11 @@ {{ currentCheckboxItem.name || '请选择' }} 完成 - + - + @@ -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; } } diff --git a/components/difference-modal/index.vue b/components/difference-modal/index.vue index 9647576..1928c15 100644 --- a/components/difference-modal/index.vue +++ b/components/difference-modal/index.vue @@ -4,7 +4,11 @@ 信息差异提示 - + 您本次提交的信息与过往信息不同,是否更新本次信息? - 原值: - {{ item.oldValue }} + 原信息: + {{ item.oldValue }} - 新值: - {{ item.newValue }} + 新信息: + {{ item.newValue }} - + - - 维持原信息 - - - 按本次信息更新 - + + + 维持原信息 + + + 按本次信息更新 + + + + + 返回修改 + + @@ -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 @@ \ No newline at end of file diff --git a/packages/apply/index.vue b/packages/apply/index.vue index a86e831..c98d52f 100644 --- a/packages/apply/index.vue +++ b/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()