From a6e9176dbf219cfbfa74db0ad1c4b509b1ba1299 Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Thu, 6 Aug 2026 15:03:29 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E6=8E=A8=E8=8D=90=E7=A0=814=20?=
 =?UTF-8?q?=E7=A7=8D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-recommend-code.vue | 148 ++++++++++++++------------
 1 file changed, 78 insertions(+), 70 deletions(-)

diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index a62937b..dbec99c 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -1,5 +1,5 @@
 <template>
-	<view data-component-name="diy-recommend-code">
+	<view data-component-name="diy-recommend-code" style="width:100%;box-sizing:border-box;overflow:hidden;">
     <!-- ============ 未登录：占位引导卡片（全部内联样式，匹配参考图） ============ -->
     <view v-if="!storeToken" @tap="goLogin"
           style="width:100%;box-sizing:border-box;margin-top:24rpx;display:flex;align-items:center;background:linear-gradient(135deg,#FFF5F5 0%,#FFF0F0 35%,#FFEDED 65%,#FFE8E8 100%);border-radius:32rpx;padding:36rpx 28rpx;position:relative;overflow:hidden;box-shadow:0 4rpx 16rpx rgba(255,107,107,0.1);">
@@ -49,51 +49,34 @@
     </view>
     <!-- ============ 已登录：推荐码卡片（后端驱动，3 套预设 + consent 遮罩） ============ -->
     <view v-else>
-      <!-- ============ Consent 同意遮罩（全部内联样式，不依赖 SCSS） ============ -->
-      <view v-if="showConsent" style="width:100%;box-sizing:border-box;background:linear-gradient(180deg,#FFF9F5 0%,#FFF0F0 100%);border-radius:24rpx;padding:40rpx 32rpx 36rpx;position:relative;overflow:hidden;">
-        <!-- 顶部标签 -->
-        <view style="display:inline-block;background:rgba(255,107,107,0.1);border-radius:20rpx;padding:6rpx 20rpx;">
-          <text style="font-size:22rpx;color:#FF6B6B;font-weight:600;">{{ value.title || '我的推荐码' }}</text>
-        </view>
-        <!-- 主标题区 -->
-        <view style="display:flex;align-items:center;justify-content:space-between;margin-top:28rpx;">
-          <view style="flex:1;">
-            <text style="font-size:40rpx;font-weight:800;color:#1A1A1A;display:block;">分享推荐码</text>
-            <text style="font-size:40rpx;font-weight:800;color:#FF6B6B;">邀请有礼</text>
-          </view>
-          <view style="flex-shrink:0;margin-left:20rpx;">
-            <text style="font-size:80rpx;">🎁</text>
+      <!-- ============ Consent 同意遮罩（全部内联样式，匹配样式4参考图） ============ -->
+      <view v-if="showConsent" style="width:100%;box-sizing:border-box;margin-top:24rpx;background:#FFFFFF;border-radius:32rpx;padding:28rpx 28rpx;position:relative;overflow:hidden;box-shadow:0 4rpx 16rpx rgba(0,0,0,0.06);">
+        <!-- 标题行 + 待获取标签 -->
+        <view style="display:flex;align-items:center;gap:12rpx;position:relative;z-index:1;">
+          <text style="font-size:34rpx;font-weight:800;color:#1A1A1A;">{{ value.title || '我的推荐码' }}</text>
+          <view style="display:inline-flex;align-items:center;background:rgba(255,152,0,0.12);border-radius:16rpx;padding:4rpx 14rpx;gap:4rpx;">
+            <text style="font-size:18rpx;color:#FF8F00;">✓</text>
+            <text style="font-size:20rpx;color:#FF8F00;font-weight:600;">待获取推荐码</text>
           </view>
         </view>
-        <!-- 描述文字 -->
-        <view style="margin-top:20rpx;">
-          <text style="font-size:25rpx;color:#888;line-height:1.7;">{{ value.consentText || '您的推荐码将用于企业入驻时识别推荐人关系，请确认后获取。' }}</text>
-        </view>
-        <!-- 特性图标行 -->
-        <view style="display:flex;justify-content:space-between;margin-top:36rpx;padding:0 4rpx;">
-          <view style="display:flex;flex-direction:column;align-items:center;flex:1;">
-            <view style="width:80rpx;height:80rpx;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,107,107,0.12);">
-              <text style="font-size:36rpx;">🏢</text>
-            </view>
-            <text style="font-size:21rpx;color:#666;margin-top:12rpx;">推荐关系识别</text>
+        <!-- 推荐码占位+按钮区域：浅暖色背景 -->
+        <view style="margin-top:24rpx;background:linear-gradient(135deg,#FFF8F0 0%,#FFF5F0 50%,#FFF0EB 100%);border-radius:16rpx;padding:28rpx 24rpx 24rpx;position:relative;overflow:hidden;">
+          <!-- 右上角礼物装饰 -->
+          <view style="position:absolute;top:-10rpx;right:-6rpx;z-index:2;">
+            <text style="font-size:72rpx;">🎁</text>
+            <text style="position:absolute;top:-4rpx;left:-10rpx;font-size:14rpx;">✨</text>
           </view>
-          <view style="display:flex;flex-direction:column;align-items:center;flex:1;">
-            <view style="width:80rpx;height:80rpx;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,153,51,0.12);">
-              <text style="font-size:36rpx;">📋</text>
-            </view>
-            <text style="font-size:21rpx;color:#666;margin-top:12rpx;">企业入驻使用</text>
+          <!-- 推荐码占位文字居中 -->
+          <view style="text-align:center;position:relative;z-index:1;">
+            <text style="font-size:48rpx;font-weight:900;color:#FFCCC0;letter-spacing:2rpx;font-family:'Courier New',monospace;">待获取</text>
           </view>
-          <view style="display:flex;flex-direction:column;align-items:center;flex:1;">
-            <view style="width:80rpx;height:80rpx;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,153,51,0.12);">
-              <text style="font-size:36rpx;">✅</text>
-            </view>
-            <text style="font-size:21rpx;color:#666;margin-top:12rpx;">确认后获取</text>
+          <!-- 描述文字 -->
+          <view style="margin-top:12rpx;text-align:center;position:relative;z-index:1;">
+            <text style="font-size:22rpx;color:#999;line-height:1.5;">{{ value.consentText || '您的推荐码将用于企业入驻时识别推荐人关系，请确认后获取。' }}</text>
           </view>
-        </view>
-        <!-- 按钮 -->
-        <view style="margin-top:40rpx;">
-          <view @tap="confirmConsent" :style="loadingCode ? 'width:100%;height:88rpx;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FF6B6B 0%,#FF9933 100%);border-radius:44rpx;opacity:0.7;pointer-events:none;' : 'width:100%;height:88rpx;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FF6B6B 0%,#FF9933 100%);border-radius:44rpx;'">
-            <text style="font-size:30rpx;font-weight:700;color:#FFFFFF;">{{ loadingCode ? '提交中...' : (value.consentButtonText || '同意并获取推荐码') }}</text>
+          <!-- 同意并获取推荐码按钮：红橙渐变，小圆角，全宽 -->
+          <view @tap="confirmConsent" :style="loadingCode ? 'margin-top:16rpx;height:76rpx;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FF6B35 0%,#FF4444 100%);border-radius:16rpx;opacity:0.7;pointer-events:none;position:relative;z-index:1;' : 'margin-top:16rpx;height:76rpx;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FF6B35 0%,#FF4444 100%);border-radius:16rpx;box-shadow:0 4rpx 12rpx rgba(255,68,68,0.25);position:relative;z-index:1;'">
+            <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">{{ loadingCode ? '提交中...' : (value.consentButtonText || '同意并获取推荐码') }}</text>
           </view>
         </view>
       </view>
@@ -131,7 +114,7 @@
       </view>
       <!-- 立即分享链接按钮：黄橙渐变，小圆角 -->
       <view @tap="copyLink" style="margin-top:20rpx;height:80rpx;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:16rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);position:relative;z-index:1;">
-        <text style="font-size:28rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.placeholderCopyText || '立即分享链接' }}</text>
+        <text style="font-size:28rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.buttonText || '立即分享' }}</text>
       </view>
       <!-- showLink -->
       <view v-if="isFeatureOn(value.showLink)" style="margin-top:20rpx;text-align:center;position:relative;z-index:1;">
@@ -190,7 +173,7 @@
       </view>
       <!-- 立即分享链接按钮：红色背景全宽铺满 -->
       <view @tap="copyLink" style="margin-top:16rpx;height:76rpx;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%);border-radius:38rpx;box-shadow:0 4rpx 12rpx rgba(255,68,68,0.3);position:relative;z-index:1;">
-        <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.placeholderCopyText || '立即分享链接' }}</text>
+        <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.buttonText || '立即分享' }}</text>
       </view>
       <!-- showLink -->
       <view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
@@ -235,7 +218,7 @@
       </view>
       <!-- 立即分享链接按钮：全宽铺满白底红边框 -->
       <view @tap="copyLink" style="margin-top:16rpx;height:76rpx;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:2rpx solid #FF6B6B;border-radius:38rpx;position:relative;z-index:1;">
-        <text style="font-size:27rpx;font-weight:600;color:#FF6B6B;">📤 {{ value.placeholderCopyText || '立即分享链接' }}</text>
+        <text style="font-size:27rpx;font-weight:600;color:#FF6B6B;">📤 {{ value.buttonText || '立即分享' }}</text>
       </view>
       <!-- showLink -->
       <view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
@@ -248,35 +231,58 @@
       </view>
     </view>
     
-    <!-- ============ 预设 4：Bookgold 金棕风格 ============ -->
-    <view v-if="stylePreset === 'horizontal'" class="style-bookgold" :style="bookGoldStyle">
-      <view class="rc-header rc-header-bookgold">
-        <text class="rc-title" :style="{ color: value.titleColor || '#FFFFFF' }">{{ value.title || '我的推荐码' }}</text>
-      </view>
-      <view class="rc-code-box rc-code-bookgold" @tap="copyRecommendCode" :style="bookGoldCodeBoxStyle + 'display:block;text-align:center;'">
-        <text class="rc-code" :style="codeTextStyle">{{ code || '暂无' }}</text>
-      </view>
-      <view style="margin-top:24rpx;display:block;text-align:center;width:100%;">
-        <button class="rc-btn rc-btn-copy rc-copy-bookgold" :style="bookGoldCopyBtnStyle" open-type="share" @tap="onShareClick" :disabled="loadingCode">
-          <text>{{ value.placeholderCopyText || '立即分享链接' }}</text>
-        </button>
-      </view>
-      <view class="rc-action-bar rc-action-bookgold">
-        <view v-if="isFeatureOn(value.allowRegenerate)" class="rc-btn rc-btn-regenerate"
-              :style="secondaryBtnStyle" @tap="regenerate">
-          <text>{{ value.placeholderRegenerateText || '换一个新码' }}</text>
+    <!-- ============ 预设 4：Horizontal 横向风格（全部内联样式，匹配参考图） ============ -->
+    <view v-if="stylePreset === 'horizontal'" style="width:100%;box-sizing:border-box;margin-top:24rpx;background:#FFFFFF;border-radius:32rpx;padding:28rpx 28rpx;position:relative;overflow:hidden;box-shadow:0 4rpx 16rpx rgba(0,0,0,0.06);">
+      <!-- 卡片顶部：主标题 -->
+      <text style="font-size:34rpx;font-weight:800;color:#1A1A1A;display:block;">{{ value.title || '我的推荐码' }}</text>
+      <!-- 内容主体框：浅橙细边框，极浅米白底色 -->
+      <view style="margin-top:20rpx;background:#FFFCF8;border:2rpx solid #FFE0B2;border-radius:20rpx;padding:24rpx 24rpx 20rpx;position:relative;overflow:hidden;">
+        <!-- 2.1 状态标签（左上角） -->
+        <view style="display:inline-flex;align-items:center;background:rgba(255,152,0,0.1);border-radius:20rpx;padding:4rpx 14rpx;gap:4rpx;">
+          <view style="width:28rpx;height:28rpx;border-radius:50%;background:#FF9800;display:flex;align-items:center;justify-content:center;">
+            <text style="font-size:16rpx;color:#FFFFFF;">✓</text>
+          </view>
+          <text style="font-size:20rpx;color:#FF8F00;font-weight:600;">已获得推荐码</text>
+        </view>
+        <!-- 2.2 礼品装饰插画（容器右上角） -->
+        <view style="position:absolute;top:-8rpx;right:-4rpx;z-index:2;">
+          <text style="font-size:64rpx;">🎁</text>
+          <!-- 粉色、浅橙色飘散碎片装饰 -->
+          <text style="position:absolute;top:-2rpx;left:-12rpx;font-size:12rpx;">✨</text>
+          <text style="position:absolute;top:24rpx;left:-18rpx;font-size:10rpx;opacity:0.6;">✨</text>
+          <text style="position:absolute;top:-6rpx;right:10rpx;font-size:8rpx;opacity:0.5;">⭐</text>
+        </view>
+        <!-- 2.3 推荐码核心文本（左对齐） -->
+        <view style="margin-top:20rpx;position:relative;z-index:1;">
+          <text style="font-size:72rpx;font-weight:900;color:#FF4444;letter-spacing:2rpx;font-family:'Courier New',monospace;">{{ code || '暂无' }}</text>
+        </view>
+        <!-- 2.4 + 2.5 按钮行：左复制、右分享，上下错落 -->
+        <view style="margin-top:16rpx;display:flex;align-items:flex-end;justify-content:space-between;gap:16rpx;position:relative;z-index:1;">
+          <!-- 左下角：复制推荐码按钮（描边圆角胶囊） -->
+          <view @tap="copyRecommendCode" style="height:64rpx;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:2rpx solid #FFB74D;border-radius:32rpx;padding:0 24rpx;gap:6rpx;">
+            <text style="font-size:22rpx;">📋</text>
+            <text style="font-size:24rpx;color:#FF8F00;font-weight:600;">复制推荐码</text>
+          </view>
+          <!-- 右下角：立即分享链接按钮（渐变橙色圆角胶囊，靠右，略低于左侧） -->
+          <view @tap="copyLink" style="height:72rpx;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#FF9800 0%,#FF4444 100%);border-radius:36rpx;padding:0 40rpx;box-shadow:0 4rpx 12rpx rgba(255,68,68,0.25);margin-bottom:-4rpx;">
+            <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ value.buttonText || '立即分享' }}</text>
+          </view>
         </view>
       </view>
-      <!-- showLink：是否显示分享链接文字 -->
-      <view v-if="isFeatureOn(value.showLink)" class="rc-link-row rc-link-bookgold">
-        <text class="rc-link-text" @tap="copyLink">{{ formatShareLink}}</text>
+      <!-- 换一个新码 -->
+      <view v-if="isFeatureOn(value.allowRegenerate)" style="margin-top:16rpx;display:flex;justify-content:center;">
+        <view @tap="regenerate" style="background:rgba(255,68,68,0.06);border-radius:24rpx;padding:8rpx 24rpx;">
+          <text style="font-size:22rpx;color:#FF4444;font-weight:600;">{{ value.placeholderRegenerateText || '换一个新码' }}</text>
+        </view>
       </view>
-      <!-- showQR：是否显示二维码 -->
-      <view v-if="isFeatureOn(value.showQR)" class="rc-qr-row rc-qr-bookgold">
-        <image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img rc-qr-bookgold-img" />
-        <text class="rc-qr-tip rc-qr-tip-bookgold" :style="{ color: '#E8DDD0' }">
-          {{ value.posterQrTip || '扫码进入并填写入驻信息' }}
-        </text>
+      <!-- showLink -->
+      <view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;">
+        <text @tap="copyLink" style="font-size:22rpx;color:#999;text-decoration:underline;">{{ formatShareLink }}</text>
+      </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;" />
+        <text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
       </view>
     </view>
     </block>
@@ -439,6 +445,8 @@ export default {
     cardBaseStyle() {
       const v = this.nc;
       return [
+        'width:100%;',
+        'margin-top:24rpx;',
         `padding:${this.px2rpx(v.padding)}rpx;`,
         `border-radius:${this.px2rpx(v.borderRadius)}rpx;`,
         'box-sizing:border-box;'