fix(结账页面): 修复个人信息录入弹窗的标题和iframe渲染问题
- 移除个人信息录入弹窗打开时的标题修改逻辑 - 调整弹窗位置和高度样式 - 添加iframe的key属性以强制重新渲染
Showing
2 changed files
with
13 additions
and
6 deletions
| 1 | <template> | 1 | <template> |
| 2 | <van-popup | 2 | <van-popup |
| 3 | v-model:show="visible" | 3 | v-model:show="visible" |
| 4 | - position="right" | 4 | + position="bottom" |
| 5 | - :style="{ width: '100%', height: '100%' }" | 5 | + :style="{ width: '100%', height: '80%' }" |
| 6 | :close-on-click-overlay="false" | 6 | :close-on-click-overlay="false" |
| 7 | :lock-scroll="true" | 7 | :lock-scroll="true" |
| 8 | + :close-on-popstate="true" | ||
| 8 | @close="handleClose" | 9 | @close="handleClose" |
| 9 | > | 10 | > |
| 10 | <div class="info-entry-container"> | 11 | <div class="info-entry-container"> |
| 11 | <!-- 头部导航栏 --> | 12 | <!-- 头部导航栏 --> |
| 12 | - <!-- <div class="header"> | 13 | + <div class="header"> |
| 13 | <h2 class="title">个人信息录入</h2> | 14 | <h2 class="title">个人信息录入</h2> |
| 14 | - </div> --> | 15 | + </div> |
| 15 | 16 | ||
| 16 | <!-- iframe容器 --> | 17 | <!-- iframe容器 --> |
| 17 | <div class="iframe-container" ref="iframeContainer"> | 18 | <div class="iframe-container" ref="iframeContainer"> |
| 18 | <iframe | 19 | <iframe |
| 19 | ref="iframeRef" | 20 | ref="iframeRef" |
| 21 | + :key="iframeKey" | ||
| 20 | :src="iframeSrc" | 22 | :src="iframeSrc" |
| 21 | frameborder="0" | 23 | frameborder="0" |
| 22 | class="form-iframe" | 24 | class="form-iframe" |
| ... | @@ -55,12 +57,17 @@ const emit = defineEmits(['update:show', 'data-received', 'close']) | ... | @@ -55,12 +57,17 @@ const emit = defineEmits(['update:show', 'data-received', 'close']) |
| 55 | const visible = ref(false) | 57 | const visible = ref(false) |
| 56 | const iframeRef = ref(null) | 58 | const iframeRef = ref(null) |
| 57 | const iframeContainer = ref(null) | 59 | const iframeContainer = ref(null) |
| 60 | +const iframeKey = ref(0) // 用于强制重新渲染iframe | ||
| 58 | 61 | ||
| 59 | /** | 62 | /** |
| 60 | * 监听show属性变化,同步更新visible状态 | 63 | * 监听show属性变化,同步更新visible状态 |
| 61 | */ | 64 | */ |
| 62 | watch(() => props.show, (newVal) => { | 65 | watch(() => props.show, (newVal) => { |
| 63 | visible.value = newVal | 66 | visible.value = newVal |
| 67 | + // 当弹窗显示时,更新iframe的key以强制重新渲染 | ||
| 68 | + if (newVal) { | ||
| 69 | + iframeKey.value = Date.now() | ||
| 70 | + } | ||
| 64 | }, { immediate: true }) | 71 | }, { immediate: true }) |
| 65 | 72 | ||
| 66 | /** | 73 | /** | ... | ... |
| ... | @@ -255,7 +255,7 @@ | ... | @@ -255,7 +255,7 @@ |
| 255 | </template> | 255 | </template> |
| 256 | 256 | ||
| 257 | <script setup> | 257 | <script setup> |
| 258 | -import { ref, onMounted, onUnmounted, watch } from 'vue' | 258 | +import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' |
| 259 | import { useRoute, useRouter } from 'vue-router' | 259 | import { useRoute, useRouter } from 'vue-router' |
| 260 | import AppLayout from '@/components/layout/AppLayout.vue' | 260 | import AppLayout from '@/components/layout/AppLayout.vue' |
| 261 | import FrostedGlass from '@/components/ui/FrostedGlass.vue' | 261 | import FrostedGlass from '@/components/ui/FrostedGlass.vue' |
| ... | @@ -391,7 +391,7 @@ watch(showInfoEntry, (newVal) => { | ... | @@ -391,7 +391,7 @@ watch(showInfoEntry, (newVal) => { |
| 391 | if (newVal) { | 391 | if (newVal) { |
| 392 | // 弹窗打开时,修改标题为"个人信息录入" | 392 | // 弹窗打开时,修改标题为"个人信息录入" |
| 393 | // document.title = '个人信息录入' | 393 | // document.title = '个人信息录入' |
| 394 | - useTitle('个人信息录入') | 394 | + // useTitle('个人信息录入') |
| 395 | } else { | 395 | } else { |
| 396 | // 弹窗关闭时,修改标题为"结账" | 396 | // 弹窗关闭时,修改标题为"结账" |
| 397 | useTitle($route.meta.title) | 397 | useTitle($route.meta.title) | ... | ... |
-
Please register or login to post a comment