Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：推荐码4 种样式

Browse Source
This commit is contained in:
jinhhanhan
2026-08-06 15:03:29 +08:00
parent f4517be6c3
commit a6e9176dbf
1 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
components-diy/diy-recommend-code.vue
View File

@@ -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;'