hookehuyr

feat(表单): 增加表单弹窗高度和动态标题功能

- 将表单弹窗高度从80%调整为90%以显示更多内容
- 添加title属性使表单标题可动态配置
- 在CheckoutPage中实现标题根据场景变化(新增/编辑)
......@@ -2,7 +2,7 @@
<van-popup
v-model:show="visible"
position="bottom"
:style="{ width: '100%', height: '80%' }"
:style="{ width: '100%', height: '90%' }"
:close-on-click-overlay="false"
:lock-scroll="true"
:close-on-popstate="true"
......@@ -11,7 +11,7 @@
<div class="info-entry-container">
<!-- 头部导航栏 -->
<div class="header">
<h2 class="title">个人信息录入</h2>
<h2 class="title">{{ title }}</h2>
</div>
<!-- iframe容器 -->
......@@ -45,6 +45,10 @@ const props = defineProps({
iframeSrc: {
type: String,
required: true
},
title: {
type: String,
default: '个人信息录入'
}
})
......
......@@ -97,7 +97,7 @@
<div class="mt-3 text-center">
<div
@click="handleEditInfo"
class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600"
class="px-4 py-2 border border-gray-200 rounded-lg bg-white/50 text-sm"
>
编辑信息
</div>
......@@ -248,6 +248,7 @@
<FormPage
v-model:show="showInfoEntry"
:iframe-src="iframeSrc"
:title="iframeTitle"
@data-received="handleInfoEntryComplete"
@close="handleInfoEntryClose"
/>
......@@ -335,6 +336,8 @@ onMounted(async () => {
if (!savedInfoData) {
// 只有未录入过信息时才弹出弹窗
showInfoEntry.value = true
// 设置弹窗标题
iframeTitle.value = '个人信息录入'
iframeSrc.value = itemWithForm.form_url
console.log('首次录入,显示个人信息录入弹窗')
} else {
......@@ -379,6 +382,8 @@ const orderComplete = ref(false)
const showInfoEntry = ref(false)
// 个人信息录入弹窗的iframe地址
const iframeSrc = ref(null)
// 个人信息录入弹窗的标题
const iframeTitle = ref('个人信息录入')
// 个人信息录入弹窗的iframe地址
const iframeInfoSrc = ref(null)
// iframe元素引用
......@@ -490,6 +495,8 @@ const handleEditInfo = () => {
// 设置iframe地址并显示弹窗
iframeSrc.value = editUrl
// 设置弹窗标题
iframeTitle.value = '编辑个人信息'
showInfoEntry.value = true
} else {
console.log('无法编辑:未找到form_url或customize_id')
......@@ -499,6 +506,8 @@ const handleEditInfo = () => {
// 处理个人信息录入关闭
const handleInfoEntryClose = () => {
showInfoEntry.value = false
// 重置弹窗标题
iframeTitle.value = '个人信息录入'
// cartItems是数组,需要找到包含form_url的项目
const itemWithForm = cartItems.value.find(item => item.form_url)
......