From f66b70c087b9a637dcce369475b6fbd2cdad3ff0 Mon Sep 17 00:00:00 2001 From: jing <1683105490@qq.com> Date: Mon, 31 Aug 2026 15:40:14 +0800 Subject: [PATCH 1/3] =?UTF-8?q?chore=EF=BC=9A=E6=8E=A8=E8=8D=90=E7=A0=81?= =?UTF-8?q?=E5=88=86=E4=BA=AB=E6=8C=89=E9=92=AE=E4=B8=8A=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .local.config.js | 2 +- components-diy/diy-member-my-order.vue | 4 ++-- components-diy/diy-recommend-code.vue | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.local.config.js b/.local.config.js index bb6b23c..fc1eb79 100644 --- a/.local.config.js +++ b/.local.config.js @@ -202,7 +202,7 @@ const localDevConfig = ({ // })['2724']; // 生物菌肥 // })['2811']; // 选择要使用的环境配置 // })['local-11']; // 选择要使用的环境配置 -})['2811']; // 本地 +})['2482']; // 本地 // })['local-2']; // 本地 // })['local-11']; // 本地 // })['1-test']; // test diff --git a/components-diy/diy-member-my-order.vue b/components-diy/diy-member-my-order.vue index 6f6afcf..acfd66e 100644 --- a/components-diy/diy-member-my-order.vue +++ b/components-diy/diy-member-my-order.vue @@ -137,8 +137,8 @@ export default { }, computed: { warpCss() { - var obj = ''; - obj += 'background-color:' + this.value.componentBgColor + ';'; + var obj = ''; + obj += 'background-color:' + this.value.componentBgColor + ';'; if (this.value.componentAngle == 'round') { obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;'; obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;'; diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue index d3c4b15..506f850 100644 --- a/components-diy/diy-recommend-code.vue +++ b/components-diy/diy-recommend-code.vue @@ -120,7 +120,7 @@ - - + 📤 From 278d8c94f94936d47c9661327200c1a431f0e7f1 Mon Sep 17 00:00:00 2001 From: jing <1683105490@qq.com> Date: Tue, 1 Sep 2026 08:54:26 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore=EF=BC=9A=E8=A1=A8=E5=8D=95=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9=E8=A1=A8=E5=8D=95=E6=B5=AE=E4=BA=8E?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E6=96=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .local.config.js | 2 +- components-diy/diy-form.vue | 104 +++++++++++++++++++++++++++++------ pages_tool/form/formdata.vue | 96 +++++++++++++++++++++++++++++++- 3 files changed, 182 insertions(+), 20 deletions(-) diff --git a/.local.config.js b/.local.config.js index fc1eb79..bb6b23c 100644 --- a/.local.config.js +++ b/.local.config.js @@ -202,7 +202,7 @@ const localDevConfig = ({ // })['2724']; // 生物菌肥 // })['2811']; // 选择要使用的环境配置 // })['local-11']; // 选择要使用的环境配置 -})['2482']; // 本地 +})['2811']; // 本地 // })['local-2']; // 本地 // })['local-11']; // 本地 // })['1-test']; // test diff --git a/components-diy/diy-form.vue b/components-diy/diy-form.vue index 5bdadbc..822aca6 100644 --- a/components-diy/diy-form.vue +++ b/components-diy/diy-form.vue @@ -6,24 +6,44 @@ 否则会触发 MP 编译器注入的 propsToData 观察者（对应编译产物里 r=function(){var o=this.value.show_banner...this.$mp.data...}） 报 "Cannot read properties of undefined (reading 'show_banner')"。 --> - + - - {{ value && value.form_tip }} - - - - - {{ submitText }} + + + + {{ value && value.form_tip }} + + + + + {{ submitText }} + + + @@ -108,6 +128,30 @@ export default { padding: `0 ${this._num(this.mergedFormConfig && this.mergedFormConfig.bannerPaddingX, 0)}rpx` }); }, + // 后台配了 banner 图片时启用卡片浮起布局（与参考设计左图一致）；无 banner 走原平铺，零外溢 + hasBannerMode() { + const v = this.value || {}; + return !!(v.show_banner && v.form_banner); + }, + // 卡片容器内联样式：maring-top（负偏移让卡片向上压住 banner 底部）+ border-radius + padding-x（与 bannerPaddingX 对齐）+ box-shadow。 + // 数值由 formConfig 走 camelCase/snake_case 双读，缺省走默认值，使后端零配置时也能看到卡片浮起效果。 + cardWrapStyle() { + const cfg = this.mergedFormConfig || {}; + const sidePad = this._num(cfg.cardSidePad, this._num(cfg.bannerPaddingX, 28)); + // overlap：负值，让卡片向上"压"住 banner 底部（与设计图一致） + const overlap = -Math.abs(this._num(cfg.cardOverlap, 48)); + // 卡片圆角：缺省 24rpx + const radius = this._num(cfg.cardRadius, 24); + // 阴影：缺省中等阴影（与设计方案一致） + const shadow = cfg.cardShadow || '0 8rpx 24rpx rgba(0,0,0,0.08)'; + return this.$util.objToStyle({ + marginTop: overlap + 'rpx', + paddingLeft: sidePad + 'rpx', + paddingRight: sidePad + 'rpx', + borderRadius: radius + 'rpx', + boxShadow: shadow + }); + }, // 提示语样式：padding-x、font-size、color、bg-color、border-bottom（与后端 .form-preview-tip 对齐） tipStyle() { const cfg = this.mergedFormConfig || {}; @@ -229,7 +273,12 @@ export default { tipFontSize: pick('tipFontSize', 'tip_font_size'), tipColor: pick('tipColor', 'tip_color'), tipBgColor: pick('tipBgColor', 'tip_bg_color'), - tipBorderColor: pick('tipBorderColor', 'tip_border_color') + tipBorderColor: pick('tipBorderColor', 'tip_border_color'), + // 卡片浮起（仅 show_banner && form_banner 启用） + cardOverlap: pick('cardOverlap', 'card_overlap'), + cardRadius: pick('cardRadius', 'card_radius'), + cardShadow: pick('cardShadow', 'card_shadow'), + cardSidePad: pick('cardSidePad', 'card_side_pad') }; // 移除 undefined / 空字符串（保留 0/false） Object.keys(base).forEach(function(k) { @@ -392,12 +441,35 @@ export default { // 默认左右无边距（与后端 --banner-padding-x 对齐；由内联 bannerStyle 覆盖） margin: 0; + // banner 图片作为卡片上方的"底图"：建立层叠上下文，让 .form-card 通过 z-index 浮在其上。 + // 仅在卡片浮起模式（.is-card-overlap）启用，不影响其它使用方（diy-group 等）的旧布局。 + &.is-card-overlap { + position: relative; + z-index: 1; + } + .banner-img { width: 100%; display: block; } } + // 卡片容器：浮在 banner 图片上方（参考设计左图）。 + // 仅在 hasBannerMode=true 时渲染（见 template v-if）； + // 外边距 / 圆角 / 阴影 / 左右内边距 全部由 cardWrapStyle 内联写入（读取后台 formConfig.card*）。 + .form-card { + position: relative; + z-index: 2; + background-color: #ffffff; + // 兜底圆角：与后端未配置时内联写入的 24rpx 一致；后台配置时由内联覆盖 + border-radius: 24rpx; + // 兜底阴影：与后端未配置时内联写入的中等阴影一致 + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08); + // 顶部负 margin 由内联 cardWrapStyle 写入（cardOverlap，缺省 -48rpx 把卡片向上压住 banner 底部） + // 底部留白让卡片与后面内容（如推荐码、其它 diy 组件）有间距 + padding-bottom: 24rpx; + } + .form-tip { // 提示语：上下内边距 / 左右内边距 / 字号 / 颜色 / 背景 全部由 tipStyle 内联写入 padding: 0; diff --git a/pages_tool/form/formdata.vue b/pages_tool/form/formdata.vue index fd5345c..06a1a3f 100644 --- a/pages_tool/form/formdata.vue +++ b/pages_tool/form/formdata.vue @@ -5,6 +5,10 @@ + + - + @@ -56,7 +60,7 @@ - + - + @@ -65,7 +65,7 @@ :onSubmit 接管提交逻辑（带 uniacid + showModal）；跨 H5 / MP 一致，不依赖 $listeners。 注意：create 重度依赖本组件 this（id/uniacid/memberInfo/$api 等），必须在 created 阶段 bind this， 否则 diy-form 通过 this.onSubmit(formData) 调用时 this 会漂移到子组件实例 --> - +