refactor(formdata.vue): update default styles and config merging logic

- Adjusted the merging order of form configuration to prioritize frontend defaults when backend configurations are absent.
- Clarified comments regarding the purpose of new visual styles and their application.
- Modified the hideInnerBanner logic to ensure consistent behavior with the updated form styles.
This commit is contained in:
2026-09-03 17:50:11 +08:00
parent b4c47fcc26
commit b2211edeab
6 changed files with 1186 additions and 691 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -178,8 +178,9 @@ export default {
// 即使消费节点都在 v-if="detail" 内,detail 置空瞬间(提交成功/登录回跳等)也会求值,
// 必须做空值守卫,否则真机抛 Cannot read properties of null (reading 'json_data') 导致渲染中断
diyValue() {
// 新视觉默认样式:强制覆盖后端 form_config 中可能存在的旧默认(horizontal / 红按钮 / 灰背景等),
// 使表单在前端统一呈现为新设计稿样式;后台仍保留行为类配置(如 captcha / behavior / submitText)。
// 新视觉默认样式:仅作兜底(后端 form_config 未配置的字段才生效)。
// 注意合并顺序:detail.form_config 在后 —— 后台显式配置的值(submit_bg_color / input_radius / form_layout 等)
// 必须覆盖前端默认,否则商家端样式配置完全不生效(曾因此导致提交按钮恒为蓝色)。
const styleDefaults = {
formLayout: 'vertical',
formPaddingX: 28,
@@ -213,7 +214,7 @@ export default {
}
return {
jsonData: this.detail.json_data,
formConfig: Object.assign({}, this.detail.form_config || {}, styleDefaults),
formConfig: Object.assign({}, styleDefaults, this.detail.form_config || {}),
// 全屏底图模式下隐藏卡片内 banner,避免与底图重复(见 hideInnerBanner)
show_banner: this.hideInnerBanner ? 0 : this.detail.show_banner,
form_banner: this.detail.form_banner || 'public/uniapp/form/banner.png',
@@ -266,15 +267,10 @@ export default {
return 'padding-left:' + this.containerInset + 'rpx;padding-right:' + this.containerInset + 'rpx;';
},
// 表单风格(与 diy-form.vue hasBannerMode 对齐):优先读显式 form_style,未设置时回退到原 bgImage 隐式判定
// - card :顶部图条替代内联 banner → 隐藏内联 banner
// - card :卡片浮起需要 banner 作为被压对象 → 保留内联 banner(与后端预览一致);仅 bgImage 全屏底图时隐藏避免重复
// - classic:保留内联 banner(与原行为一致),仅当后台显式配 bgImage 才隐藏
// 老表单无 form_style 字段时 → undefined → 走原隐式判定,零迁移风险
// 如需保留卡片内 banner:把下面这行改成 `return false;` 即可
hideInnerBanner() {
const fc = (this.detail && this.detail.form_config) || {};
const style = fc.formStyle !== undefined ? fc.formStyle : fc.form_style;
if (style === 'card') return true;
if (style === 'classic') return !!this.bgImage;
return !!this.bgImage;
},
// 行为设置:提交验证码开启时 diy-form 隐藏内置提交按钮,本页渲染验证码 + 自有提交按钮