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

refactor(diy-recommend-code): 复制按钮用 $util.objToStyle 生成 style

Browse Source 
之前复制按钮用字符串拼接方式:
  :style="'...static...' + method() + '...static...'"

虽然字符串拼接全平台兼容,但写法繁琐,且 camelCase/kebab-case
容易写错(camelCase 用驼峰,字符串里要手写 - 转换)。

改成调用 common/js/util.js 中已有的 objToStyle 方法:
  :style="$util.objToStyle(copyBtnStyleObj(...))"

copyBtnStyleObj(preset, textOnly) 返回对象:
- 边框/背景/border-color: 跟随后端 diyData.codeColor
- 文字色/字号/字重: 跟随后端 codeColor(可选 textOnly=true 时)
- 其余布局属性: 由 preset 参数覆盖(4 个预设各自差异)

$util.objToStyle 自动 camelCase → kebab-case(如 alignItems → align-items)
转换后拼接为标准 CSS 字符串,全平台兼容。

好处:
- 写法更清晰(对象语法)
- 不用手写 kebab-case
- 与项目其他地方统一风格(common/js/util.js 已有此工具)
This commit is contained in:
ZF Sun
2026-08-08 14:57:39 +08:00
parent 5833a244de
commit 8312de5d09
1 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
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:' + copyBtnBorderStyle() + ';border-radius:30rpx;padding:0 32rpx;height:60rpx;gap:8rpx;'">
<view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({display:'inline-flex',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',height:'60rpx',gap:'8rpx'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ 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;justify-content:center;align-items:center;background:#FFFFFF;border:' + copyBtnBorderStyle() + ';border-radius:30rpx;padding:0 32rpx;gap:8rpx;'">
<view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'60rpx',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',gap:'8rpx'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ 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;justify-content:center;align-items:center;background:#FFFFFF;border:' + copyBtnBorderStyle() + ';border-radius:30rpx;padding:0 32rpx;gap:8rpx;'">
<view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'60rpx',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',gap:'8rpx'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ 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;justify-content:center;align-items:center;background:#FFFFFF;border:' + copyBtnBorderStyle() + ';border-radius:32rpx;padding:0 24rpx;gap:6rpx;box-sizing:border-box;'">
<view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({height:'64rpx',display:'inline-flex',justifyContent:'center',alignItems:'center',borderRadius:'32rpx',padding:'0 24rpx',gap:'6rpx'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="'font-size:24rpx;color:' + copyBtnTextColor() + ';font-weight:600;'">{{ nc.copyButtonText || '复制推荐码' }}</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
<!-- 右下角：立即分享链接按钮（黄橙渐变胶囊，按内容自适应，触发微信原生分享）
H5 端用 view 触发，小程序/APP 端保留 button 以触发 open-type=share -->
@@ -802,21 +802,28 @@ export default {
].join('');
},
/**
* 复制按钮边框色(跟随后端 diyData.codeColor)
* 返回字符串,兼容 H5/小程序/APP/鸿蒙
* 复制按钮样式对象(跟随后端 diyData.codeColor)
* 返回对象,用 $util.objToStyle 转字符串,
* 兼容 H5/小程序/APP/鸿蒙
* @param {Object} preset 预设差异(可选,如 {borderRadius:'32rpx',height:'64rpx'})
* @param {Boolean} textOnly 只返回文字样式(用于内嵌 text 节点)
*/
copyBtnBorderStyle() {
copyBtnStyleObj(preset, textOnly) {
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;
if (textOnly) {
return Object.assign({
fontSize: '24rpx',
color: codeColor,
fontWeight: '600'
}, preset || {});
}
const base = {
background: '#FFFFFF',
border: `2rpx solid ${codeColor}`,
boxSizing: 'border-box'
};
return Object.assign(base, preset || {});
},
px2rpx(val) {
return Number(val || 0) * 2