hookehuyr

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

- 移除个人信息录入弹窗打开时的标题修改逻辑
- 调整弹窗位置和高度样式
- 添加iframe的key属性以强制重新渲染
<template>
<van-popup
v-model:show="visible"
position="right"
:style="{ width: '100%', height: '100%' }"
position="bottom"
:style="{ width: '100%', height: '80%' }"
:close-on-click-overlay="false"
:lock-scroll="true"
:close-on-popstate="true"
@close="handleClose"
>
<div class="info-entry-container">
<!-- 头部导航栏 -->
<!-- <div class="header">
<div class="header">
<h2 class="title">个人信息录入</h2>
</div> -->
</div>
<!-- iframe容器 -->
<div class="iframe-container" ref="iframeContainer">
<iframe
ref="iframeRef"
:key="iframeKey"
:src="iframeSrc"
frameborder="0"
class="form-iframe"
......@@ -55,12 +57,17 @@ const emit = defineEmits(['update:show', 'data-received', 'close'])
const visible = ref(false)
const iframeRef = ref(null)
const iframeContainer = ref(null)
const iframeKey = ref(0) // 用于强制重新渲染iframe
/**
* 监听show属性变化,同步更新visible状态
*/
watch(() => props.show, (newVal) => {
visible.value = newVal
// 当弹窗显示时,更新iframe的key以强制重新渲染
if (newVal) {
iframeKey.value = Date.now()
}
}, { immediate: true })
/**
......
......@@ -255,7 +255,7 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
......@@ -391,7 +391,7 @@ watch(showInfoEntry, (newVal) => {
if (newVal) {
// 弹窗打开时,修改标题为"个人信息录入"
// document.title = '个人信息录入'
useTitle('个人信息录入')
// useTitle('个人信息录入')
} else {
// 弹窗关闭时,修改标题为"结账"
useTitle($route.meta.title)
......