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

feat(diy-recommend-code): 复制按钮颜色跟随后端 diyData.codeColor

Browse Source 
之前 gradient 和 horizontal 预设的"复制推荐码"按钮边框/文字颜色
是写死的:
- gradient: #DC143C
- horizontal: #FF8F00

minimal 和 card 已经跟随后端 codeColor 字段。统一所有预设都跟随
codeColor,让商家可以在后端 diyData 调整颜色。

修复:
- gradient 复制按钮: 边框/文字改用 '2rpx solid ' + (value.codeColor || '#DC143C')
  文字色改用 value.codeColor || '#DC143C'
- horizontal 复制按钮: 边框/文字改用 '2rpx solid ' + (value.codeColor || '#FF8F00')
  文字色改用 value.codeColor || '#FF8F00'

这样 4 个预设风格统一,商家改 codeColor 时所有预设的复制按钮边框/
文字色都会跟随。
This commit is contained in:
ZF Sun
2026-08-08 14:47:52 +08:00
parent 07718235c3
commit 92fe95d131
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,9 +104,9 @@
</view>
<!-- 复制推荐码按钮：白色小按钮，红边框，在推荐码下方居中 -->
<view v-if="value.showCopyButton !== false" style="margin-top:16rpx;text-align:center;">
<view @tap="copyRecommendCode" style="display:inline-flex;align-items:center;background:#FFFFFF;border:2rpx solid #DC143C;border-radius:30rpx;padding:0 32rpx;height:60rpx;gap:8rpx;">
<view @tap="copyRecommendCode" :style="{ display: 'inline-flex', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#DC143C'), borderRadius: '30rpx', padding: '0 32rpx', height: '60rpx', gap: '8rpx' }">
<text style="font-size:22rpx;">📋</text>
<text style="font-size:24rpx;color:#DC143C;font-weight:600;">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#DC143C', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
</view>
</view>
@@ -289,9 +289,9 @@
<!-- 2.4 + 2.5 按钮行：左复制、右分享，按内容自适应宽度，两端对称对齐 -->
<view style="margin-top:16rpx;display:flex;align-items:center;justify-content:space-between;gap:16rpx;padding:0 8rpx;position:relative;z-index:1;">
<!-- 左下角：复制推荐码按钮（描边圆角胶囊，按内容自适应） -->
<view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" style="height:64rpx;display:inline-flex;justify-content:center;align-items:center;background:#FFFFFF;border:2rpx solid #FF8F00;border-radius:32rpx;padding:0 24rpx;gap:6rpx;box-sizing:border-box;">
<view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" :style="{ height: '64rpx', display: 'inline-flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF8F00'), borderRadius: '32rpx', padding: '0 24rpx', gap: '6rpx', boxSizing: 'border-box' }">
<text style="font-size:22rpx;">📋</text>
<text style="font-size:24rpx;color:#FF8F00;font-weight:600;">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF8F00', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
<!-- 右下角：立即分享链接按钮（黄橙渐变胶囊，按内容自适应，触发微信原生分享）
H5 端用 view 触发，小程序/APP 端保留 button 以触发 open-type=share -->