From 5833a244de9585a6ffa2e09f27fcbed02588634d Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 8 Aug 2026 14:51:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(diy-recommend-code):=20=E5=A4=8D?=
=?UTF-8?q?=E5=88=B6=E6=8C=89=E9=92=AE=20style=20=E6=94=B9=E7=94=A8?=
=?UTF-8?q?=E5=AD=97=E7=AC=A6=E4=B8=B2=E6=8B=BC=E6=8E=A5=E5=85=BC=E5=AE=B9?=
=?UTF-8?q?=E5=A4=9A=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
之前 4 个预设(gradient/minimal/card/horizontal)的"复制推荐码"按钮
用 :style="{...}" 对象语法 + value.codeColor || '#xxx' 三元拼接。
对象语法在 H5 / 小程序正常,但在鸿蒙元服务等部分平台对嵌套对象/
三元拼接的支持有限,容易渲染异常。
修改:
- 新增 methods:
copyBtnBorderStyle() → 返回 '2rpx solid #xxx'
copyBtnTextColor() → 返回 '#xxx'
- 4 处复制按钮改成 :style="'...字符串...' + 方法() + '...字符串...'"
风格,只把边框/文字色动态部分用方法返回,
其余布局属性(display/border-radius/padding/gap 等)写成静态字符串。
- 字符串拼接方式在 H5 / 小程序 / APP / 鸿蒙元服务全平台表现一致
copyBtnBorderStyle() 与 copyBtnTextColor() 都从 diyData.codeColor 读取,
商家改 codeColor 时所有预设的复制按钮边框/文字色都跟随变化。
---
components-diy/diy-recommend-code.vue | 33 ++++++++++++++++++++-------
1 file changed, 25 insertions(+), 8 deletions(-)
diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index f5b5f9c..71878ff 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -104,9 +104,9 @@
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
@@ -175,9 +175,9 @@
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
@@ -801,6 +801,23 @@ export default {
'font-weight:700;font-size:26rpx;'
].join('');
},
+ /**
+ * 复制按钮边框色(跟随后端 diyData.codeColor)
+ * 返回字符串,兼容 H5/小程序/APP/鸿蒙
+ */
+ copyBtnBorderStyle() {
+ const v = this.nc;
+ const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
+ return `2rpx solid ${codeColor}`;
+ },
+ /**
+ * 复制按钮文字色(跟随后端 diyData.codeColor)
+ */
+ copyBtnTextColor() {
+ const v = this.nc;
+ const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
+ return codeColor;
+ },
px2rpx(val) {
return Number(val || 0) * 2
},