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

refactor(diy-recommend-code): 复制按钮 style 改用字符串拼接兼容多端

Browse Source 
之前 4 个预设(gradient/minimal/card/horizontal)的"复制推荐码"按钮
用 :style="{...}" 对象语法 + value.codeColor || '#xxx' 三元拼接。

对象语法在 H5 / 小程序正常,但在鸿蒙元服务等部分平台对嵌套对象/
三元拼接的支持有限,容易渲染异常。

修改:
- 新增 methods:
  copyBtnBorderStyle()  → 返回 '2rpx solid #xxx'
  copyBtnTextColor()    → 返回 '#xxx'
- 4 处复制按钮改成 :style="'...字符串...' + 方法() + '...字符串...'"
  风格,只把边框/文字色动态部分用方法返回,
  其余布局属性(display/border-radius/padding/gap 等)写成静态字符串。
- 字符串拼接方式在 H5 / 小程序 / APP / 鸿蒙元服务全平台表现一致

copyBtnBorderStyle() 与 copyBtnTextColor() 都从 diyData.codeColor 读取,
商家改 codeColor 时所有预设的复制按钮边框/文字色都跟随变化。
This commit is contained in:
ZF Sun
2026-08-08 14:51:57 +08:00
parent 92fe95d131
commit 5833a244de
1 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
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', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#DC143C'), borderRadius: '30rpx', padding: '0 32rpx', height: '60rpx', gap: '8rpx' }">
<view @tap="copyRecommendCode" :style="'display:inline-flex;align-items:center;background:#FFFFFF;border:' + copyBtnBorderStyle() + ';border-radius:30rpx;padding:0 32rpx;height:60rpx;gap:8rpx;'">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#DC143C', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
</view>
</view>
@@ -175,9 +175,9 @@
</view>
<!-- 复制推荐码按钮：白色小按钮，在虚线框下方、立即分享链接上方 -->
<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' }">
<view @tap="copyRecommendCode" :style="'width:fit-content;height:60rpx;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:' + copyBtnBorderStyle() + ';border-radius:30rpx;padding:0 32rpx;gap:8rpx;'">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
</view>
<!-- 立即分享链接按钮：红橙渐变胶囊全宽铺满，触发微信原生分享
@@ -231,9 +231,9 @@
</view>
<!-- 复制推荐码按钮：白色小按钮，在虚线框下方、立即分享链接上方，居中 -->
<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' }">
<view @tap="copyRecommendCode" :style="'width:fit-content;height:60rpx;display:flex;justify-content:center;align-items:center;background:#FFFFFF;border:' + copyBtnBorderStyle() + ';border-radius:30rpx;padding:0 32rpx;gap:8rpx;'">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
</view>
<!-- 立即分享链接按钮：Card 风格固定「白底红边框」设计，不读 buttonBgColor
@@ -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', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF8F00'), borderRadius: '32rpx', padding: '0 24rpx', gap: '6rpx', boxSizing: 'border-box' }">
<view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" :style="'height:64rpx;display:inline-flex;justify-content:center;align-items:center;background:#FFFFFF;border:' + copyBtnBorderStyle() + ';border-radius:32rpx;padding:0 24rpx;gap:6rpx;box-sizing:border-box;'">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF8F00', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
<!-- 右下角：立即分享链接按钮（黄橙渐变胶囊，按内容自适应，触发微信原生分享）
H5 端用 view 触发，小程序/APP 端保留 button 以触发 open-type=share -->
@@ -801,6 +801,23 @@ export default {
'font-weight:700;font-size:26rpx;'
].join('');
},
/**
* 复制按钮边框色(跟随后端 diyData.codeColor)
* 返回字符串,兼容 H5/小程序/APP/鸿蒙
*/
copyBtnBorderStyle() {
const v = this.nc;
const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
return `2rpx solid ${codeColor}`;
},
/**
* 复制按钮文字色(跟随后端 diyData.codeColor)
*/
copyBtnTextColor() {
const v = this.nc;
const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
return codeColor;
},
px2rpx(val) {
return Number(val || 0) * 2
},