From ec4fb3e68815450ae1383e36c7c6d0642dd776ca Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 7 Aug 2026 18:06:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(diy-recommend-code):=20=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E5=AE=B9=E5=99=A8=E6=94=AF=E6=8C=81=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?/=E8=BE=B9=E6=A1=86/=E8=83=8C=E6=99=AF/=E5=9C=86=E8=A7=92/?=
 =?UTF-8?q?=E5=86=85=E8=BE=B9=E8=B7=9D=E5=8F=AF=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 6 个 props 字段：
- qrSize: 数字,默认 200,二维码图片宽高(rpx)
- qrBoxBorderColor: 颜色,默认 '',容器边框色（空=按预设默认）
- qrBoxBorderWidth: 数字,默认 0,边框宽度(rpx,0=按预设默认)
- qrBoxBorderRadius: 数字,默认 0,容器圆角(rpx)
- qrBoxBackground: 颜色,默认 '',容器背景色（空=透明）
- qrBoxPadding: 数字,默认 0,容器内边距(rpx)

修改点：4 个预设（gradient/minimal/card/horizontal）的 showQR 块
不再用硬编码 <image width=200rpx>，改为：
  <view style="<动态 width/height/border/borderRadius/bg/padding>">
    <image style="width:100%;height:100%">
  </view>
保证缩放、边框、背景、圆角、内边距都能响应 props 字段。

后端同步：design.html / wap.html 新增 nc.qrSize / nc.qrBoxBorderColor /
  nc.qrBoxBorderWidth / nc.qrBoxBorderRadius / nc.qrBoxBackground /
  nc.qrBoxPadding 字段并应用。

注：单位上,前端 rpx；后端 px。两者各自适配,与现有 fontSize/
  borderRadius/titleFontSize 等字段命名一致。
---
 components-diy/diy-recommend-code.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index 02db0aa..ab63bb1 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -125,7 +125,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:20rpx;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:12rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -189,7 +191,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:16rpx;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -238,7 +242,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:16rpx;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -297,7 +303,9 @@
       </view>
       <!-- showQR -->
       <view v-if="isFeatureOn(value.showQR)" style="margin-top:16rpx;display:flex;flex-direction:column;align-items:center;">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
+        <view :style="{ width: px2rpx(nc.qrSize || 200) + 'rpx', height: px2rpx(nc.qrSize || 200) + 'rpx', background: nc.qrBoxBackground || 'transparent', border: nc.qrBoxBorderWidth && nc.qrBoxBorderColor ? (px2rpx(nc.qrBoxBorderWidth) + 'rpx solid ' + nc.qrBoxBorderColor) : 'none', borderRadius: px2rpx(nc.qrBoxBorderRadius || 0) + 'rpx', padding: px2rpx(nc.qrBoxPadding || 0) + 'rpx', boxSizing: 'border-box' }">
+          <image :src="qrcodeRenderUrl" mode="aspectFit" style="width:100%;height:100%;display:block;" />
+        </view>
         <text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
@@ -396,6 +404,13 @@ export default {
         padding: 16,                     
         showQR: false,
         showLink: false,
+        // 二维码容器样式（与后端 diyData / design.html 对齐）
+        qrSize: 200,                    // 二维码图片尺寸（前端 rpx）
+        qrBoxBorderColor: '',           // 容器边框色;空=不渲染边框
+        qrBoxBorderWidth: 0,            // 边框宽度（rpx）
+        qrBoxBorderRadius: 0,           // 容器圆角（rpx）
+        qrBoxBackground: '',            // 容器背景色;空=透明
+        qrBoxPadding: 0,                // 容器内边距（rpx）
 
         /* ============== 兼容旧字段（不破坏之前商家已经配置过的卡片） ============== */
         // 外间距