feat(表单): 增加表单弹窗高度和动态标题功能
- 将表单弹窗高度从80%调整为90%以显示更多内容 - 添加title属性使表单标题可动态配置 - 在CheckoutPage中实现标题根据场景变化(新增/编辑)
Showing
2 changed files
with
16 additions
and
3 deletions
| ... | @@ -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) | ... | ... |
-
Please register or login to post a comment