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:
@@ -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: '同意并获取推荐码',
|
||||
|
||||
Reference in New Issue
Block a user