diff --git a/components-diy/diy-form.vue b/components-diy/diy-form.vue index 043a366..2c8b435 100644 --- a/components-diy/diy-form.vue +++ b/components-diy/diy-form.vue @@ -136,9 +136,18 @@ export default { padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx` }); }, - // 后台配了 banner 图片时启用卡片浮起布局(与参考设计左图一致);无 banner 走原平铺,零外溢 + // 表单风格:优先读显式 form_style(classic / card),未设置时回退到隐式判定(看 show_banner && form_banner) + // - classic:经典风格,平铺无 banner 卡片 + // - card :卡片浮起风格,banner + 卡片浮起 + 容器内缩 + // 注意:必须读 this.formCfg(原始 formConfig 对象)而不是 mergedFormConfig(白名单组装对象,不含 form_style 键) + // 双键兼容:formdata 链路 camel(formStyle,api splitFormConfig 转换);DIY 链路 snake(form_style,design.js 直存) + // 老表单无 form_style 字段时 → undefined → 走隐式判定,与原行为完全一致,零迁移风险 hasBannerMode() { const v = this.value || {}; + const fc = this.formCfg || {}; + const style = fc.formStyle !== undefined ? fc.formStyle : fc.form_style; + if (style === 'card') return true; + if (style === 'classic') return false; return !!(v.show_banner && v.form_banner); }, // 卡片容器内联样式:maring-top(负偏移让卡片向上压住 banner 底部)+ border-radius + padding-x + box-shadow + background。 diff --git a/pages_tool/form/formdata.vue b/pages_tool/form/formdata.vue index a79c0cf..52a7dd8 100644 --- a/pages_tool/form/formdata.vue +++ b/pages_tool/form/formdata.vue @@ -263,9 +263,16 @@ export default { containerStyle() { return 'padding-left:' + this.containerInset + 'rpx;padding-right:' + this.containerInset + 'rpx;'; }, - // 图条模式下隐藏 diy-form 卡片顶部的 banner,避免与图条重复 + // 表单风格(与 diy-form.vue hasBannerMode 对齐):优先读显式 form_style,未设置时回退到原 bgImage 隐式判定 + // - card :顶部图条替代内联 banner → 隐藏内联 banner + // - 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 隐藏内置提交按钮,本页渲染验证码 + 自有提交按钮