hookehuyr

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

- 将表单弹窗高度从80%调整为90%以显示更多内容
- 添加title属性使表单标题可动态配置
- 在CheckoutPage中实现标题根据场景变化(新增/编辑)
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <van-popup 2 <van-popup
3 v-model:show="visible" 3 v-model:show="visible"
4 position="bottom" 4 position="bottom"
5 - :style="{ width: '100%', height: '80%' }" 5 + :style="{ width: '100%', height: '90%' }"
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-on-popstate="true"
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 <div class="info-entry-container"> 11 <div class="info-entry-container">
12 <!-- 头部导航栏 --> 12 <!-- 头部导航栏 -->
13 <div class="header"> 13 <div class="header">
14 - <h2 class="title">个人信息录入</h2> 14 + <h2 class="title">{{ title }}</h2>
15 </div> 15 </div>
16 16
17 <!-- iframe容器 --> 17 <!-- iframe容器 -->
...@@ -45,6 +45,10 @@ const props = defineProps({ ...@@ -45,6 +45,10 @@ const props = defineProps({
45 iframeSrc: { 45 iframeSrc: {
46 type: String, 46 type: String,
47 required: true 47 required: true
48 + },
49 + title: {
50 + type: String,
51 + default: '个人信息录入'
48 } 52 }
49 }) 53 })
50 54
......
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
97 <div class="mt-3 text-center"> 97 <div class="mt-3 text-center">
98 <div 98 <div
99 @click="handleEditInfo" 99 @click="handleEditInfo"
100 - class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600" 100 + class="px-4 py-2 border border-gray-200 rounded-lg bg-white/50 text-sm"
101 > 101 >
102 编辑信息 102 编辑信息
103 </div> 103 </div>
...@@ -248,6 +248,7 @@ ...@@ -248,6 +248,7 @@
248 <FormPage 248 <FormPage
249 v-model:show="showInfoEntry" 249 v-model:show="showInfoEntry"
250 :iframe-src="iframeSrc" 250 :iframe-src="iframeSrc"
251 + :title="iframeTitle"
251 @data-received="handleInfoEntryComplete" 252 @data-received="handleInfoEntryComplete"
252 @close="handleInfoEntryClose" 253 @close="handleInfoEntryClose"
253 /> 254 />
...@@ -335,6 +336,8 @@ onMounted(async () => { ...@@ -335,6 +336,8 @@ onMounted(async () => {
335 if (!savedInfoData) { 336 if (!savedInfoData) {
336 // 只有未录入过信息时才弹出弹窗 337 // 只有未录入过信息时才弹出弹窗
337 showInfoEntry.value = true 338 showInfoEntry.value = true
339 + // 设置弹窗标题
340 + iframeTitle.value = '个人信息录入'
338 iframeSrc.value = itemWithForm.form_url 341 iframeSrc.value = itemWithForm.form_url
339 console.log('首次录入,显示个人信息录入弹窗') 342 console.log('首次录入,显示个人信息录入弹窗')
340 } else { 343 } else {
...@@ -379,6 +382,8 @@ const orderComplete = ref(false) ...@@ -379,6 +382,8 @@ const orderComplete = ref(false)
379 const showInfoEntry = ref(false) 382 const showInfoEntry = ref(false)
380 // 个人信息录入弹窗的iframe地址 383 // 个人信息录入弹窗的iframe地址
381 const iframeSrc = ref(null) 384 const iframeSrc = ref(null)
385 +// 个人信息录入弹窗的标题
386 +const iframeTitle = ref('个人信息录入')
382 // 个人信息录入弹窗的iframe地址 387 // 个人信息录入弹窗的iframe地址
383 const iframeInfoSrc = ref(null) 388 const iframeInfoSrc = ref(null)
384 // iframe元素引用 389 // iframe元素引用
...@@ -490,6 +495,8 @@ const handleEditInfo = () => { ...@@ -490,6 +495,8 @@ const handleEditInfo = () => {
490 495
491 // 设置iframe地址并显示弹窗 496 // 设置iframe地址并显示弹窗
492 iframeSrc.value = editUrl 497 iframeSrc.value = editUrl
498 + // 设置弹窗标题
499 + iframeTitle.value = '编辑个人信息'
493 showInfoEntry.value = true 500 showInfoEntry.value = true
494 } else { 501 } else {
495 console.log('无法编辑:未找到form_url或customize_id') 502 console.log('无法编辑:未找到form_url或customize_id')
...@@ -499,6 +506,8 @@ const handleEditInfo = () => { ...@@ -499,6 +506,8 @@ const handleEditInfo = () => {
499 // 处理个人信息录入关闭 506 // 处理个人信息录入关闭
500 const handleInfoEntryClose = () => { 507 const handleInfoEntryClose = () => {
501 showInfoEntry.value = false 508 showInfoEntry.value = false
509 + // 重置弹窗标题
510 + iframeTitle.value = '个人信息录入'
502 511
503 // cartItems是数组,需要找到包含form_url的项目 512 // cartItems是数组,需要找到包含form_url的项目
504 const itemWithForm = cartItems.value.find(item => item.form_url) 513 const itemWithForm = cartItems.value.find(item => item.form_url)
......