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

fix(diy-card): 操作区独立样式改单绑定 — uni-app 静默丢弃数组绑定(2.18 缺陷)

Browse Source 
2026-10-22 线上问题(qrBlockStyle)同根因漏网: 4 个操作区分支
:style="[actsBlockStyle, cornerClearStyle]" 数组绑定被 uni-app 运行时
静默丢弃(style 属性整体为 null) → 操作区独立成块(actsBlockBg/Radius/Pad)
与 corner 让位在 C 端全部失效, 后端配置了也不生效。

- mini.vue: 新增 actsBlockFinalStyle 合并 computed(块样式字符串 +
  cornerClearStyle.marginTop), 4 分支(上/下 x grid/chips)改单绑定
- 契约锁死: style-v2/ab-visual 数组绑定反例 + 单绑定断言
- H5 实测(8080 diy2699, 配置 #F7F8FA/12/12): 修复前 computed
  transparent/0/0 → 修复后 rgb(247,248,250)/12px/12px 与配置一致

验证: 名片 7 套件全绿 + 三回归 79/41/56
This commit is contained in:
ZF Sun
2026-10-24 14:03:28 +08:00
parent 4b99bcdd7e
commit 8617bb0395
3 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components-diy/diy-card-mini.vue
View File

@@ -94,7 +94,7 @@
</view>
<!-- 快捷操作·资料区上方档(2.18 actsPosition=above): below 时由下方同构块渲染 -->
<view v-if="actsAbove && showActs && acts.length && actsGrid" class="mini-acts-grid" :style="[actsBlockStyle, cornerClearStyle]">
<view v-if="actsAbove && showActs && acts.length && actsGrid" class="mini-acts-grid" :style="actsBlockFinalStyle">
<view v-for="(act, i) in acts" :key="'ta' + i" class="act-grid-item" :style="{ width: gridItemWidth }" hover-class="btn-press" @tap.stop="onAct(act)">
<view class="act-grid-icon" :style="actGridIconStyle(act)">
<!-- 自定义图标图片(2.18 媒体库, 优先) / SVG 线稿(2.18.1 与 wap detail 同源) / 首字兜底 -->
@@ -106,7 +106,7 @@
<text class="act-grid-label" :style="actGridLabelStyle(act)">{{ act.label }}</text>
</view>
</view>
<view v-if="actsAbove && showActs && acts.length && !actsGrid" class="mini-acts" :style="[actsBlockStyle, cornerClearStyle]">
<view v-if="actsAbove && showActs && acts.length && !actsGrid" class="mini-acts" :style="actsBlockFinalStyle">
<view v-for="(act, i) in acts" :key="'ta' + i" class="act-chip"
:style="i === 0 ? actPrimaryStyle : actGhostStyle" hover-class="btn-press" @tap.stop="onAct(act)">
<text class="act-text" :style="i === 0 ? actPrimaryTextStyle : actGhostTextStyle">{{ act.label }}</text>
@@ -149,7 +149,7 @@
</view>
<!-- 快捷操作·图标宫格档(grid): 彩色浅底图标 + 下方文字 -->
<view v-if="!actsAbove && showActs && acts.length && actsGrid" class="mini-acts-grid" :style="[actsBlockStyle, cornerClearStyle]">
<view v-if="!actsAbove && showActs && acts.length && actsGrid" class="mini-acts-grid" :style="actsBlockFinalStyle">
<view v-for="(act, i) in acts" :key="i" class="act-grid-item" :style="{ width: gridItemWidth }" hover-class="btn-press" @tap.stop="onAct(act)">
<view class="act-grid-icon" :style="actGridIconStyle(act)">
<!-- 自定义图标图片(2.18 媒体库, 优先) / SVG 线稿(2.18.1 与 wap detail 同源) / 首字兜底 -->
@@ -163,7 +163,7 @@
</view>
<!-- 快捷操作·胶囊芯片档(chips, 历史默认; 最小触达 72rpx; 首个为主动作) -->
<view v-if="!actsAbove && showActs && acts.length && !actsGrid" class="mini-acts" :style="[actsBlockStyle, cornerClearStyle]">
<view v-if="!actsAbove && showActs && acts.length && !actsGrid" class="mini-acts" :style="actsBlockFinalStyle">
<view v-for="(act, i) in acts" :key="i" class="act-chip"
:style="actStyle" hover-class="btn-press" @tap.stop="onAct(act)">
<text class="act-text" :style="actTextStyle">{{ act.label }}</text>
@@ -681,6 +681,17 @@ export default {
rowsClearStyle() {
return this.actsAbove ? {} : this.cornerClearStyle;
},
/**
* 操作区最终样式(2.18 独立成块 + corner 让位): 合并输出单字符串。
* uni-app 运行时会静默丢弃 :style="[字符串, 对象]" 数组绑定 ——
* 2026-10-22 线上问题(qrBlockStyle)同根因, 2026-10-24 H5 实测复现于操作区
* (actsBlockBg/Radius/Pad 与 corner 让位同时失效, style 属性整体为 null)
*/
actsBlockFinalStyle() {
const clear = this.cornerClearStyle || {};
const extra = clear.marginTop ? 'margin-top: ' + clear.marginTop + ';' : '';
return ((this.actsBlockStyle || '') + ' ' + extra).trim();
},
detailBtnStyle() {
// 发送名片大按钮: 纯色主题实心(2026-10-22 参考图定稿, 不再用渐变);
// 高度 104rpx(用户反馈: 比触达标准 80rpx 加高一档, 参考图观感)