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

chore：添加独立成块逐向间距配置支持

Browse Source
This commit is contained in:
ZF Sun
2026-10-26 17:44:09 +08:00
parent 69e59d7902
commit 7c4d6cbb72
3 changed files with 103 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -249,6 +249,19 @@ import {
normalizeActVis, normalizeActDeleted, normalizeActLabels, normalizeCustomActs, normalizeActOrder, libIconBg,
} from './diy-card-common.js';
/**
* 2.20 三块「独立成块」逐向间距: 开关开启时输出逐向 margin/padding 覆盖串。
* 关闭或缺键(存量实例)输出空串 -> 完全回落历史形态(统一 pad/类默认), 旧页面零变化。
* 纯数值拼接, 不用 calc()(WXSS 不支持)。
*/
function blockCustomSpacing(c, prefix) {
if (!flagOn(c[prefix + 'SpacingCustom'], false)) return '';
const side = (k) => px2rpx(num(c[prefix + k], 0));
const m = [side('MarginTop'), side('MarginRight'), side('MarginBottom'), side('MarginLeft')];
const p = [side('PaddingTop'), side('PaddingRight'), side('PaddingBottom'), side('PaddingLeft')];
return 'margin: ' + m.join('rpx ') + 'rpx; padding: ' + p.join('rpx ') + 'rpx;';
}
export default {
name: 'diy-card-mini',
props: {
@@ -338,7 +351,9 @@ export default {
if (this.qrPos !== 'corner' || !this.showQrBase) return {};
const size = resolveQrSize(this.qrPos, this.c.qrSize);
const pad = this.qrStyle === 'plain' ? 0 : (this.qrStyle === 'gradient' ? 12 : 20);
return { paddingRight: (size + pad + 40) + 'rpx' };
// 2.20 逐向微调: 浮层 margin-right 使其左移, 头部右让位同步叠加(纯数值)
const customRight = flagOn(this.c.qrSpacingCustom, false) ? px2rpx(num(this.c.qrMarginRight, 0)) : 0;
return { paddingRight: (size + pad + 40 + customRight) + 'rpx' };
},
/**
* corner 档资料行/操作区让位量: 按二维码实际占高反算
@@ -351,7 +366,9 @@ export default {
const size = resolveQrSize(this.qrPos, this.c.qrSize);
const pad = this.qrStyle === 'plain' ? 0 : (this.qrStyle === 'gradient' ? 6 : 10) * 2;
const tip = this.showQrTip ? 42 : 0;
const total = 20 + size + pad + tip;
// 2.20 逐向微调: 二维码 margin-top 会把浮层下推, 让位量同步叠加(纯数值)
const customTop = flagOn(this.c.qrSpacingCustom, false) ? px2rpx(num(this.c.qrMarginTop, 0)) : 0;
const total = 20 + size + pad + tip + customTop;
const headHeight = this.headTheme ? 164 : 104;
return { marginTop: Math.max(24, total - headHeight + 10) + 'rpx' };
},
@@ -372,7 +389,11 @@ export default {
style.marginLeft = this.blockEdgeMargin;
style.marginRight = this.blockEdgeMargin;
}
return this.$util.objToStyle(style);
let out = this.$util.objToStyle(style);
// 2.20 逐向微调: 追加逐向 margin/padding(margin 后置覆盖 edge 内缩; head/corner 浮层随 margin 平移)
const qrCustom = blockCustomSpacing(this.c, 'qr');
if (qrCustom) out += ' ' + qrCustom;
return out;
},
/** 二维码图样式: 尺寸 + 外观衬底(plain 原图 / card 白卡 / theme 主题色 / gradient 渐变) + 微调位移(只动图, 白卡容器不动) */
qrImgStyle() {
@@ -833,17 +854,27 @@ export default {
},
actsBlockFinalStyle() {
const clear = this.cornerClearStyle || {};
const custom = blockCustomSpacing(this.c, 'acts');
const parts = [];
if (this.actsBlockStyle) parts.push(this.actsBlockStyle);
if (clear.marginTop) parts.push('margin-top: ' + clear.marginTop + ';');
if (this.actsBlockStyle) {
// 独立块左右与卡边留 8px(参考图), 抵消卡片内边距
parts.push('margin-left: ' + this.blockEdgeMargin + ';');
parts.push('margin-right: ' + this.blockEdgeMargin + ';');
if (custom) {
// 2.20 逐向微调: 逐向 margin 完全接管(edge 内缩/让位/上浮并入 margin-top 数值叠加), 逐向 padding 覆盖统一 pad
parts.push(custom);
const customTop = px2rpx(num(this.c.actsMarginTop, 0));
const clearTop = clear.marginTop ? parseFloat(clear.marginTop) : 0;
const floatTop = this.actsFloat ? -95 : 0;
parts.push('margin: ' + (clearTop + floatTop + customTop) + 'rpx ' + px2rpx(num(this.c.actsMarginRight, 0)) + 'rpx ' + px2rpx(num(this.c.actsMarginBottom, 0)) + 'rpx ' + px2rpx(num(this.c.actsMarginLeft, 0)) + 'rpx;');
} else {
if (clear.marginTop) parts.push('margin-top: ' + clear.marginTop + ';');
if (this.actsBlockStyle) {
// 独立块左右与卡边留 8px(参考图), 抵消卡片内边距
parts.push('margin-left: ' + this.blockEdgeMargin + ';');
parts.push('margin-right: ' + this.blockEdgeMargin + ';');
}
}
if (this.actsFloat) {
// 参考图定稿: 独立成块上浮, 压在蓝色 hero 下沿, 带阴影浮层观感
parts.push('margin-top: -95rpx;');
if (!custom) parts.push('margin-top: -95rpx;');
parts.push('z-index: 4;');
parts.push('box-shadow: 0 8rpx 30rpx rgba(30, 111, 217, 0.10);');
}
@@ -893,8 +924,15 @@ export default {
/** 资料区最终样式: 独立成块(白卡) 或 跟随卡片(连一体) + corner 让位合并 */
rowsFinalStyle() {
const clear = this.rowsClearStyle || {};
const custom = blockCustomSpacing(this.c, 'rows');
const extra = clear.marginTop ? 'margin-top: ' + clear.marginTop + ';' : '';
if (this.rowsIndependent) {
if (custom) {
// 2.20 逐向微调: 逐向 margin/padding 接管; corner 让位量并入 margin-top 数值叠加(纯数值, 无 calc)
const customTop = px2rpx(num(this.c.rowsMarginTop, 0));
const combinedTop = clear.marginTop ? (parseFloat(clear.marginTop) + customTop) : customTop;
return ((this.rowsBlockStyle || '') + ' ' + custom + ' margin-top: ' + combinedTop + 'rpx;').trim();
}
return ((this.rowsBlockStyle || '') + ' ' + extra).trim();
}
// 跟随卡片: 去掉 .mini-rows 静态白卡(白底/描边/阴影/圆角/内边距), 与上方资料同底连为一体