feat(diy-recommend-code): 复制推荐码按钮支持显示/文案自定义

新增 props 字段:
- showCopyButton: 布尔,默认 true,控制"复制推荐码"按钮显示
- copyButtonText: 字符串,默认 "复制推荐码",自定义按钮文案

修改点:
- props default: 新增 showCopyButton: true、copyButtonText: '复制推荐码';
                  移除未使用的 placeholderCopyText、placeholderShareText、
                  showButton,统一用 showShareButton 名称
- 4 个预设(gradient/minimal/card/horizontal)的"复制推荐码"按钮
                  包裹层加 v-if="value.showCopyButton !== false"
                  按钮文案改为 {{ nc.copyButtonText || '复制推荐码' }}

后端同步: design.html / wap.html 同步加 nc.showCopyButton / nc.copyButtonText 字段。
This commit is contained in:
2026-08-07 17:53:26 +08:00
parent 24df6f0dd5
commit 75e40c752b

View File

@@ -103,10 +103,10 @@
<text :style="{ fontSize: px2rpx(Math.max(16, Math.min(48, (Number(value.codeFontSize) || 28) * 0.93))) + 'rpx', fontWeight: '900', color: value.codeColor || '#DC143C', letterSpacing: '2rpx', fontFamily: 'Courier New, monospace' }">{{ code || value.placeholderCode || 'ABCD1234' }}</text>
</view>
<!-- 复制推荐码按钮:白色小按钮,红边框,在推荐码下方居中 -->
<view style="margin-top:16rpx;display:flex;justify-content:center;">
<view v-if="value.showCopyButton !== false" style="margin-top:16rpx;display:flex;justify-content:center;">
<view @tap="copyRecommendCode" :style="{ width: 'fit-content', height: '60rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#DC143C'), borderRadius: '30rpx', padding: '0 32rpx', gap: '8rpx' }">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#DC143C', fontWeight: '600' }">复制推荐码</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#DC143C', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
</view>
</view>
@@ -168,10 +168,10 @@
</view>
</view>
<!-- 复制推荐码按钮:白色小按钮,在虚线框下方、立即分享链接上方 -->
<view style="margin-top:14rpx;display:flex;justify-content:center;position:relative;z-index:1;">
<view v-if="value.showCopyButton !== false" 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', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '30rpx', padding: '0 32rpx', gap: '8rpx' }">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">复制推荐码</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
</view>
<!-- 立即分享链接按钮:红橙渐变胶囊全宽铺满,触发微信原生分享
@@ -218,10 +218,10 @@
</view>
</view>
<!-- 复制推荐码按钮:白色小按钮,在虚线框下方、立即分享链接上方,居中 -->
<view style="margin-top:14rpx;display:flex;justify-content:center;position:relative;z-index:1;">
<view v-if="value.showCopyButton !== false" 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', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '30rpx', padding: '0 32rpx', gap: '8rpx' }">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">复制推荐码</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
</view>
<!-- 立即分享链接按钮:Card 风格固定「白底红边框」设计,不读 buttonBgColor
@@ -271,9 +271,9 @@
<!-- 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', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FFB74D'), borderRadius: '32rpx', padding: '0 24rpx', gap: '6rpx' }">
<view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" :style="{ height: '64rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FFB74D'), borderRadius: '32rpx', padding: '0 24rpx', gap: '6rpx' }">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF8F00', fontWeight: '600' }">复制推荐码</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF8F00', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
<!-- 右下角:立即分享链接按钮(黄橙渐变胶囊,靠右,触发微信原生分享)
H5 端用 view 触发,小程序/APP 端保留 button 以触发 open-type=share -->
@@ -367,11 +367,12 @@ export default {
/* ============== 内容配置,diy_view.php 默认值对齐) ============== */
title: '我的推荐码',
buttonText: '立即分享',
copyButtonText: '复制推荐码',
showButton: true,
showShareButton: true,
showCopyButton: true,
allowRegenerate: true,
placeholderRegenerateText: '换一个新码',
placeholderCopyText: '复制链接',
placeholderShareText: '分享',
requireConsent: true,
consentText: '您的推荐码将用于企业入驻来源追踪,我们会记录每一次通过您分享链接完成的入驻申请,用于您的推广收益结算。',
consentButtonText: '同意并获取推荐码',