fix(diy-recommend-code): 复制按钮 style 单位 rpx 改 px 适配鸿蒙元服务

之前复制按钮用 rpx 单位:
- border:2rpx solid #xxx
- font-size:24rpx
- height:60rpx / padding:0 32rpx / border-radius:30rpx / gap:8rpx

在 H5/微信小程序没问题,但鸿蒙元服务对动态拼接 style 中的 rpx
解析异常,渲染尺寸可能错乱。

修复: rpx 全改成 px(1rpx = 0.5px,即原数值 / 2):
- border:1px solid #xxx     (原 2rpx)
- font-size:12px            (原 24rpx)
- border-radius:15px        (原 30rpx)
- padding:0 16px            (原 0 32rpx)
- height:30px               (原 60rpx)
- gap:4px                   (原 8rpx)

horizontal 预设:
- border-radius:16px        (原 32rpx)
- padding:0 12px            (原 0 24rpx)
- height:32px               (原 64rpx)
- gap:3px                   (原 6rpx)

这样 4 处复制按钮 + 文字节点所有动态 style 数值都用 px,
鸿蒙元服务全平台兼容。
This commit is contained in:
2026-08-08 15:01:52 +08:00
parent 8312de5d09
commit ec960a29c4

View File

@@ -104,7 +104,7 @@
</view>
<!-- 复制推荐码按钮:白色小按钮,红边框,在推荐码下方居中 -->
<view v-if="value.showCopyButton !== false" style="margin-top:16rpx;text-align:center;">
<view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({display:'inline-flex',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',height:'60rpx',gap:'8rpx'}))">
<view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({display:'inline-flex',alignItems:'center',borderRadius:'15px',padding:'0 16px',height:'30px',gap:'4px'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
@@ -175,7 +175,7 @@
</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="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'60rpx',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',gap:'8rpx'}))">
<view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'30px',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'15px',padding:'0 16px',gap:'4px'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
@@ -231,7 +231,7 @@
</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="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'60rpx',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'30rpx',padding:'0 32rpx',gap:'8rpx'}))">
<view @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({width:'fit-content',height:'30px',display:'flex',justifyContent:'center',alignItems:'center',borderRadius:'15px',padding:'0 16px',gap:'4px'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
@@ -289,7 +289,7 @@
<!-- 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="$util.objToStyle(copyBtnStyleObj({height:'64rpx',display:'inline-flex',justifyContent:'center',alignItems:'center',borderRadius:'32rpx',padding:'0 24rpx',gap:'6rpx'}))">
<view v-if="value.showCopyButton !== false" @tap="copyRecommendCode" :style="$util.objToStyle(copyBtnStyleObj({height:'32px',display:'inline-flex',justifyContent:'center',alignItems:'center',borderRadius:'16px',padding:'0 12px',gap:'3px'}))">
<text style="font-size:22rpx;">📋</text>
<text :style="$util.objToStyle(copyBtnStyleObj({}, true))">{{ nc.copyButtonText || '复制推荐码' }}</text>
</view>
@@ -805,7 +805,9 @@ export default {
* 复制按钮样式对象(跟随后端 diyData.codeColor)
* 返回对象,用 $util.objToStyle 转字符串,
* 兼容 H5/小程序/APP/鸿蒙
* @param {Object} preset 预设差异(可选,如 {borderRadius:'32rpx',height:'64rpx'})
* 注意:使用 px 而非 rpx 单位,避免鸿蒙元服务对动态 style 中 rpx
* 解析异常的问题。1rpx = 0.5px,直接换算成 px 数值。
* @param {Object} preset 预设差异(可选,如 {borderRadius:'16px',height:'32px'})
* @param {Boolean} textOnly 只返回文字样式(用于内嵌 text 节点)
*/
copyBtnStyleObj(preset, textOnly) {
@@ -813,14 +815,14 @@ export default {
const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
if (textOnly) {
return Object.assign({
fontSize: '24rpx',
fontSize: '12px', // 原 24rpx → 12px
color: codeColor,
fontWeight: '600'
}, preset || {});
}
const base = {
background: '#FFFFFF',
border: `2rpx solid ${codeColor}`,
border: `1px solid ${codeColor}`, // 原 2rpx → 1px
boxSizing: 'border-box'
};
return Object.assign(base, preset || {});