From 8b331e53d3815022f9cdc88bb385a9564ebe3f51 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 7 Aug 2026 17:16:52 +0800
Subject: [PATCH] =?UTF-8?q?fix(diy-recommend-code):=20Card=20=E9=A3=8E?=
 =?UTF-8?q?=E6=A0=BC=E7=AB=8B=E5=8D=B3=E5=88=86=E4=BA=AB=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E3=80=8C=E7=99=BD=E5=BA=95=E7=BA=A2=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

之前 Button 背景色由 diyData.buttonBgColor 决定，后端默认 #E4393C 导致
Card 风格的「立即分享」按钮显示为红色实心，与设计参考图不一致。

调整内容：
- props default 中 buttonBgColor 默认值改为空字符串
- 新增 isH5Platform 状态（条件编译 H5 段在 created 中标记）
- H5 端用 view 替代 button 触发分享，避开浏览器 button 默认样式
- 小程序/APP 端保留 button 以触发 open-type="share"
- Card 预设的「立即分享」按钮固定为白底 + 红边 + 红字设计

影响范围：仅 Card 卡片风格（stylePreset === 'card'）。
---
 components-diy/diy-recommend-code.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index 393712a..db62dc5 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -214,10 +214,14 @@
           <text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">复制推荐码</text>
         </view>
       </view>
-      <!-- 立即分享链接按钮：全宽铺满白底红边框，触发微信原生分享 -->
-      <button v-if="value.showShareButton !== false" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: (value.buttonBgColor && /^#[0-9a-f]{3,8}$/i.test(value.buttonBgColor)) ? value.buttonBgColor : '#FFFFFF', border: (value.buttonBgColor && /^#[0-9a-f]{3,8}$/i.test(value.buttonBgColor)) ? 'none' : '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
+      <!-- 立即分享链接按钮：Card 风格固定「白底红边框」设计，不读 buttonBgColor
+           H5 端改用 view 触发（避免 <button> 默认样式影响），小程序/APP 端保留 button 以触发 open-type=share -->
+      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
         <text :style="{ fontSize: '27rpx', fontWeight: '600', color: value.codeColor || '#FF6B6B' }">📤 {{ value.buttonText || '立即分享' }}</text>
       </button>
+      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (nc.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1', boxSizing: 'border-box' }">
+        <text :style="{ fontSize: '27rpx', fontWeight: '600', color: nc.codeColor || '#FF6B6B' }">📤 {{ nc.buttonText || '立即分享' }}</text>
+      </view>
       <!-- showLink -->
       <view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
         <text @tap="copyLink" style="font-size:22rpx;color:#999;text-decoration:underline;">{{ formatShareLink }}</text>
@@ -368,7 +372,7 @@ export default {
         textColor: '#FFFFFF',
         titleColor: '#333333',
         codeColor: '#E4393C',
-        buttonBgColor: '#E4393C',
+        buttonBgColor: '',         // 默认空：让 Card 风格的立即分享按钮走「白底红边框」分支，匹配设计参考图
         buttonTextColor: '#FFFFFF',
         shareButtonBgColor: '#67C23A',
         titleFontSize: 14,              
@@ -395,6 +399,8 @@ export default {
       code: '',
       shareLink: '',
       qrcodeUrl: '',
+      /* H5 平台标识：用于在 H5 端用 view 替代 button，避免浏览器 <button> 默认样式覆盖 */
+      isH5Platform: false,
       /* 状态机 */
       showConsent: false,       
       loadingCode: false,      
@@ -636,6 +642,12 @@ export default {
   },
   created() {
     try {
+      // H5 端检测：避开 <button> 默认样式影响（h5 端改用 view 触发）
+      try {
+        // #ifdef H5
+        this.isH5Platform = true;
+        // #endif
+      } catch (e) {}
       if (this.storeToken) {
         this._resetAll();
         var vm = this;