hookehuyr

fix(结账页面): 修复个人信息录入弹窗的标题和iframe渲染问题

- 移除个人信息录入弹窗打开时的标题修改逻辑
- 调整弹窗位置和高度样式
- 添加iframe的key属性以强制重新渲染
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)
......