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

chore ：推荐码样式123

Browse Source
This commit is contained in:
jinhhanhan
2026-08-06 14:03:24 +08:00
parent 408c40fbe9
commit f4517be6c3
1 changed files with 167 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,51 @@
<template>
<view data-component-name="diy-recommend-code">
<!-- ============ 未登录：占位引导卡片（保持原有风格与逻辑一致） ============ -->
<view class="invite-login-tip" v-if="!storeToken" @tap="goLogin"
:style="loginWrapStyle">
<text class="tip-icon">{{ value.loginIcon || '🔑' }}</text>
<text class="tip-text" :style="{ color: value.loginTipColor || '#666666' }">
{{ value.loginTipText || '登录后查看我的推荐码' }}
</text>
<text class="tip-btn" :style="loginBtnStyle">
{{ value.loginBtnText || '去登录' }}
</text>
<!-- ============ 未登录：占位引导卡片（全部内联样式，匹配参考图） ============ -->
<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);">
<!-- 背景装饰blob -->
<view style="position:absolute;top:-60rpx;left:-50rpx;width:240rpx;height:240rpx;border-radius:50%;background:rgba(255,107,107,0.05);z-index:0;"></view>
<view style="position:absolute;bottom:-80rpx;right:-50rpx;width:260rpx;height:260rpx;border-radius:50%;background:rgba(255,193,7,0.04);z-index:0;"></view>
<view style="position:absolute;top:30rpx;right:80rpx;width:100rpx;height:100rpx;border-radius:50%;background:rgba(255,152,0,0.05);z-index:0;"></view>
<!-- 左侧：3D钥匙+礼物装饰区 -->
<view style="flex-shrink:0;width:200rpx;height:200rpx;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;">
<!-- 圆形底座 -->
<view style="position:absolute;bottom:0;width:170rpx;height:170rpx;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,0.95) 0%,rgba(255,240,230,0.6) 50%,rgba(255,220,210,0.15) 100%);box-shadow:0 6rpx 24rpx rgba(255,107,107,0.12);"></view>
<!-- 钥匙+礼物组合 -->
<view style="position:relative;z-index:2;display:flex;align-items:center;justify-content:center;">
<view style="transform:rotate(-25deg);margin-right:-6rpx;">
<text style="font-size:76rpx;line-height:1;">🔑</text>
</view>
<view style="margin-left:-6rpx;">
<text style="font-size:68rpx;line-height:1;">🎁</text>
</view>
</view>
<!-- 闪光装饰 -->
<text style="position:absolute;top:6rpx;right:14rpx;font-size:26rpx;z-index:3;">✨</text>
<text style="position:absolute;top:54rpx;left:6rpx;font-size:18rpx;z-index:3;opacity:0.7;">✨</text>
<text style="position:absolute;bottom:24rpx;right:20rpx;font-size:20rpx;z-index:3;opacity:0.5;">⭐</text>
</view>
<!-- 右侧：标题+副标题+特性标签+按钮 -->
<view style="flex:1;margin-left:20rpx;display:flex;flex-direction:column;position:relative;z-index:1;">
<!-- 主标题 -->
<text style="font-size:30rpx;font-weight:700;color:#1A1A1A;line-height:1.4;">{{ value.loginTipText || '登录后查看我的推荐码' }}</text>
<!-- 特性标签行 -->
<view style="display:flex;align-items:center;gap:14rpx;margin-top:14rpx;">
<view style="display:flex;align-items:center;gap:4rpx;">
<text style="font-size:22rpx;">💎</text>
<text style="font-size:21rpx;color:#666;">专属推荐码</text>
</view>
<view style="display:flex;align-items:center;gap:4rpx;">
<text style="font-size:22rpx;">👥</text>
<text style="font-size:21rpx;color:#666;">邀请好友</text>
</view>
</view>
<!-- 去登录按钮 -->
<view style="margin-top:18rpx;display:flex;align-items:center;gap:6rpx;width:fit-content;background:linear-gradient(90deg,#FF6B6B 0%,#FF8E8E 100%);border-radius:32rpx;padding:14rpx 36rpx;box-shadow:0 4rpx 12rpx rgba(255,107,107,0.3);">
<text style="font-size:26rpx;color:#FFFFFF;font-weight:600;">{{ value.loginBtnText || '去登录' }}</text>
<text style="font-size:24rpx;color:#FFFFFF;">›</text>
</view>
</view>
</view>
<!-- ============ 已登录：推荐码卡片（后端驱动，3 套预设 + consent 遮罩） ============ -->
<view v-else>
@@ -69,107 +105,146 @@
<!-- ============ 推荐码卡片：仅在非 consent 且非首次加载时渲染 ============ -->
<block v-if="!showConsent && !(loadingCode && !code)">
<!-- ============ 预设 1：Gradient 渐变风格（默认） ============ -->
<view v-if="stylePreset === 'gradient'" class="style-gradient" :style="gradientStyle">
<view class="rc-header">
<text class="rc-title" :style="{ color: value.titleColor || '#5C3D1E' }">{{ value.title || '我的推荐码' }}</text>
</view>
<view class="rc-code-box rc-code-gradient" @tap="copyRecommendCode" style="display:block;text-align:center;background:transparent;padding:36rpx 30rpx;">
<text class="rc-code rc-code-gradient-text" :style="codeTextStyle">{{ code || '暂无' }}</text>
</view>
<!-- 复制链接按钮：在推荐码下方居中，白色背景 -->
<view class="rc-copy-link-row rc-copy-link-gradient" style="margin-top:24rpx;display:block;text-align:center;width:100%;">
<button class="rc-btn rc-btn-copy rc-btn-copy-gradient" :style="gradientCopyLinkStyle" open-type="share" @tap="onShareClick" :disabled="loadingCode">
<text>{{ value.placeholderCopyText || '立即分享链接' }}</text>
</button>
</view>
<view class="rc-action-bar">
<view v-if="isFeatureOn(value.showButton)" class="rc-btn rc-btn-share"
:style="mainBtnBgStyle()" @tap="onShareClick" open-type="share">
<text>{{ value.buttonText || '立即分享' }}</text>
</view>
<view v-if="isFeatureOn(value.allowRegenerate)" class="rc-btn rc-btn-regenerate"
:style="secondaryBtnStyle" @tap="regenerate">
<text>{{ value.placeholderRegenerateText || '换一个新码' }}</text>
<!-- ============ 预设 1：Gradient 渐变风格（默认）全部内联样式 ============ -->
<view v-if="stylePreset === 'gradient'" 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:#52C41A;border-radius:16rpx;padding:4rpx 14rpx;gap:4rpx;">
<text style="font-size:18rpx;color:#FFFFFF;">✓</text>
<text style="font-size:20rpx;color:#FFFFFF;font-weight:600;">已获得推荐码</text>
</view>
</view>
<!-- showLink：是否显示分享链接文字 -->
<view v-if="isFeatureOn(value.showLink)" class="rc-link-row">
<text class="rc-link-text" @tap="copyLink">{{ formatShareLink}}</text>
<!-- 推荐码+复制按钮区域：浅米黄色背景 -->
<view style="margin-top:24rpx;background:#FFF8F0;border-radius:16rpx;padding:32rpx 20rpx 24rpx;position:relative;z-index:1;">
<!-- 推荐码居中显示 -->
<view style="text-align:center;">
<text style="font-size:64rpx;font-weight:900;color:#DC143C;letter-spacing:2rpx;font-family:'Courier New',monospace;">{{ code || '暂无' }}</text>
</view>
<!-- 复制推荐码按钮：白色小按钮，红边框，在推荐码下方居中 -->
<view style="margin-top:12rpx;display:flex;justify-content:center;">
<view @tap="copyRecommendCode" style="width:fit-content;height:60rpx;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:2rpx solid #DC143C;border-radius:30rpx;padding:0 32rpx;gap:8rpx;">
<text style="font-size:22rpx;">📋</text>
<text style="font-size:24rpx;color:#DC143C;font-weight:600;">复制推荐码</text>
</view>
</view>
</view>
<!-- showQR：是否显示二维码 -->
<view v-if="isFeatureOn(value.showQR)" class="rc-qr-row">
<image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img" />
<text class="rc-qr-tip" :style="{ color: 'rgba(92,61,30,0.8)' }">
{{ value.posterQrTip || '扫码进入并填写入驻信息' }}
</text>
<!-- 立即分享链接按钮：黄橙渐变，小圆角 -->
<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>
</view>
<!-- showLink -->
<view v-if="isFeatureOn(value.showLink)" style="margin-top:20rpx;text-align:center;position:relative;z-index:1;">
<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:20rpx;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;">
<image :src="qrcodeRenderUrl" mode="aspectFit" style="width:200rpx;height:200rpx;" />
<text style="font-size:22rpx;color:#999;margin-top:12rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
</view>
</view>
<!-- ============ 预设 2：Minimal 极简风格（纯色 + 边框） ============ -->
<view v-if="stylePreset === 'minimal'" class="style-minimal" :style="minimalStyle">
<view class="rc-header">
<text class="rc-title" :style="{ color: value.titleColor || '#5C3D1E' }">{{ value.title || '我的推荐码' }}</text>
<!-- ============ 预设 2：Minimal 极简风格（全部内联样式） ============ -->
<view v-if="stylePreset === 'minimal'" style="width:100%;box-sizing:border-box;margin-top:24rpx;background:linear-gradient(90deg,#FFFFFF 0%,#FFF8F8 30%,#FFF5F5 60%,#FFF0F0 100%);border-radius:32rpx;padding:28rpx 28rpx;position:relative;overflow:hidden;box-shadow:0 4rpx 16rpx rgba(255,107,107,0.08);">
<!-- 背景礼物装饰大图1（右上角，移至顶部） -->
<view style="position:absolute;top:-20rpx;right:-30rpx;z-index:0;">
<text style="font-size:200rpx;opacity:0.15;">🎁</text>
</view>
<view class="rc-code-box rc-code-minimal" @tap="copyRecommendCode" :style="minimalCodeBoxStyle">
<text class="rc-code rc-code-minimal-text" :style="codeTextStyle">{{ code || '暂无' }}</text>
<text class="rc-copy rc-copy-minimal" :style="minimalCopyBtnStyle" @tap.stop="copyLink">{{ value.placeholderCopyText || '立即分享链接' }}</text>
<!-- 背景礼物装饰大图2（左下角） -->
<view style="position:absolute;bottom:-40rpx;left:-30rpx;z-index:0;">
<text style="font-size:180rpx;opacity:0.12;">🎁</text>
</view>
<view class="rc-action-bar rc-action-minimal">
<button v-if="isFeatureOn(value.showButton)" class="rc-btn rc-btn-share rc-btn-share-minimal"
:style="mainBtnBgStyle()" @tap="onShareClick" open-type="share">
<text>{{ value.buttonText || '立即分享' }}</text>
</button>
<view v-if="isFeatureOn(value.allowRegenerate)" class="rc-btn rc-btn-regenerate"
:style="secondaryBtnStyle" @tap="regenerate">
<text>{{ value.placeholderRegenerateText || '换一个新码' }}</text>
<!-- 背景散落小礼物装饰 -->
<view style="position:absolute;top:120rpx;left:30rpx;z-index:0;">
<text style="font-size:60rpx;opacity:0.15;">🎁</text>
</view>
<view style="position:absolute;top:200rpx;right:60rpx;z-index:0;">
<text style="font-size:48rpx;opacity:0.18;">🎀</text>
</view>
<view style="position:absolute;bottom:160rpx;right:20rpx;z-index:0;">
<text style="font-size:52rpx;opacity:0.15;">🎁</text>
</view>
<!-- 标题行 + 已获得标签 -->
<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,107,107,0.15);border-radius:16rpx;padding:4rpx 14rpx;">
<text style="font-size:20rpx;color:#FF6B6B;font-weight:600;">已获得</text>
</view>
</view>
<view v-if="isFeatureOn(value.showLink)" class="rc-link-row">
<text class="rc-link-text rc-link-minimal" @tap="copyLink">{{ formatShareLink }}</text>
<!-- 描述文字 -->
<view style="margin-top:8rpx;padding-right:70rpx;position:relative;z-index:1;">
<text style="font-size:23rpx;color:#888;line-height:1.5;">分享给好友，邀请注册即可获得奖励</text>
</view>
<view v-if="isFeatureOn(value.showQR)" class="rc-qr-row rc-qr-minimal">
<image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img rc-qr-minimal-img" />
<text class="rc-qr-tip rc-qr-tip-minimal" :style="{ color: '#8B7355' }">
{{ value.posterQrTip || '扫码进入并填写入驻信息' }}
</text>
<!-- 推荐码红色虚线框：推荐码居中，圆角更圆，更紧凑 -->
<view style="margin-top:20rpx;background:rgba(255,255,255,0.7);border:2rpx dashed #FF6B6B;border-radius:32rpx;padding:12rpx 16rpx;position:relative;z-index:1;">
<view style="text-align:center;">
<text style="font-size:56rpx;font-weight:800;color:#FF4444;letter-spacing:2rpx;font-family:'Courier New',monospace;">{{ code || '暂无' }}</text>
</view>
</view>
<!-- 复制推荐码按钮：白色小按钮，在虚线框下方、立即分享链接上方 -->
<view style="margin-top:14rpx;display:flex;justify-content:center;position:relative;z-index:1;">
<view @tap="copyRecommendCode" style="width:fit-content;height:60rpx;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:2rpx solid #FF6B6B;border-radius:30rpx;padding:0 32rpx;gap:8rpx;">
<text style="font-size:22rpx;">📋</text>
<text style="font-size:24rpx;color:#FF6B6B;font-weight:600;">复制推荐码</text>
</view>
</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>
</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>
</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;" />
<text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
</view>
</view>
<!-- ============ 预设 3：Card 金色边框卡片风格 ============ -->
<view v-if="stylePreset === 'card'" class="style-card" :style="cardStyleBox">
<view class="rc-accent-bar" :style="{ background: value.accentColor || '#F0C040' }"></view>
<view class="rc-header rc-header-card">
<text class="rc-title" :style="{ color: value.titleColor || '#B8860B' }">{{ value.title || '我的推荐码' }}</text>
<!-- ============ 预设 3：Card 卡片风格（全部内联样式） ============ -->
<view v-if="stylePreset === 'card'" style="width:100%;box-sizing:border-box;margin-top:24rpx;background:linear-gradient(180deg,#FFF9F5 0%,#FFF5F0 100%);border-radius:32rpx;padding:28rpx 28rpx;position:relative;overflow:hidden;">
<!-- 右上角礼物装饰（开盖礼物盒） -->
<view style="position:absolute;top:16rpx;right:20rpx;z-index:2;">
<text style="font-size:52rpx;">🎁</text>
</view>
<view class="rc-code-box rc-code-card" @tap="copyRecommendCode" style="display:block;text-align:center;background:rgba(184,134,11,0.04);padding:36rpx 30rpx;border-radius:20rpx;">
<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-card rc-copy-link-card" :style="{ background: value.accentColor || '#DAA520', color: '#FFFFFF' }" open-type="share" @tap="onShareClick" :disabled="loadingCode">
<text>{{ value.placeholderCopyText || '立即分享链接' }}</text>
</button>
</view>
<view class="rc-action-bar rc-action-card">
<button v-if="isFeatureOn(value.showButton)" class="rc-btn rc-btn-share"
:style="mainBtnBgStyle()" @tap="onShareClick" open-type="share">
<text>{{ value.buttonText || '立即分享' }}</text>
</button>
<view v-if="isFeatureOn(value.allowRegenerate)" class="rc-btn rc-btn-regenerate"
:style="secondaryBtnStyle" @tap="regenerate">
<text>{{ value.placeholderRegenerateText || '换一个新码' }}</text>
<!-- 标题行 + 已生效标签 -->
<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,107,107,0.12);border-radius:16rpx;padding:4rpx 14rpx;">
<text style="font-size:20rpx;color:#FF6B6B;font-weight:600;">✓ 已生效</text>
</view>
</view>
<view v-if="isFeatureOn(value.showLink)" class="rc-link-row rc-link-card">
<text class="rc-link-text" @tap="copyLink">{{ formatShareLink }}</text>
<!-- 描述文字 -->
<view style="margin-top:8rpx;padding-right:70rpx;position:relative;z-index:1;">
<text style="font-size:23rpx;color:#999;line-height:1.5;">推荐码已生成，可用于邀请好友或企业入驻绑定推荐关系</text>
</view>
<view v-if="isFeatureOn(value.showQR)" class="rc-qr-row rc-qr-card">
<view class="rc-qr-wrap-card" :style="{ borderColor: value.accentColor || '#F0C040' }">
<image :src="qrcodeRenderUrl" mode="aspectFit" class="rc-qr-img rc-qr-card-img" />
<!-- 推荐码红色虚线框：居中，圆角，紧凑 -->
<view style="margin-top:20rpx;display:flex;justify-content:center;position:relative;z-index:1;">
<view style="background:rgba(255,255,255,0.7);border:2rpx dashed #FF6B6B;border-radius:32rpx;padding:12rpx 32rpx;text-align:center;">
<text style="font-size:48rpx;font-weight:800;color:#FF4444;letter-spacing:2rpx;font-family:'Courier New',monospace;">{{ code || '暂无' }}</text>
</view>
<text class="rc-qr-tip rc-qr-tip-card" :style="{ color: '#B8860B' }">
{{ value.posterQrTip || '扫码进入并填写入驻信息' }}
</text>
</view>
<!-- 复制推荐码按钮：白色小按钮，在虚线框下方、立即分享链接上方，居中 -->
<view style="margin-top:14rpx;display:flex;justify-content:center;position:relative;z-index:1;">
<view @tap="copyRecommendCode" style="width:fit-content;height:60rpx;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:2rpx solid #FF6B6B;border-radius:30rpx;padding:0 32rpx;gap:8rpx;">
<text style="font-size:22rpx;">📋</text>
<text style="font-size:24rpx;color:#FF6B6B;font-weight:600;">复制推荐码</text>
</view>
</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>
</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>
</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;" />
<text style="font-size:22rpx;color:#999;margin-top:8rpx;">{{ value.posterQrTip || '扫码进入并填写入驻信息' }}</text>
</view>
</view>