Merge branch 'feat/camcard' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into feat/camcard
This commit is contained in:
@@ -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;
|
||||
},
|
||||
/**
|
||||
* 二维码衬底 · 外层框(qrStyle 装饰 + 微调位移都在这里)
|
||||
@@ -851,17 +872,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);');
|
||||
}
|
||||
@@ -911,8 +942,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 静态白卡(白底/描边/阴影/圆角/内边距), 与上方资料同底连为一体
|
||||
|
||||
@@ -161,6 +161,34 @@ export default {
|
||||
headPaddingRight: v.headPaddingRight,
|
||||
headPaddingBottom: v.headPaddingBottom,
|
||||
headPaddingLeft: v.headPaddingLeft,
|
||||
// 2.20: 三块独立成块逐向间距(开关+逐向 margin/padding; 缺键=关=历史形态)
|
||||
rowsSpacingCustom: v.rowsSpacingCustom,
|
||||
rowsMarginTop: v.rowsMarginTop,
|
||||
rowsMarginRight: v.rowsMarginRight,
|
||||
rowsMarginBottom: v.rowsMarginBottom,
|
||||
rowsMarginLeft: v.rowsMarginLeft,
|
||||
rowsPaddingTop: v.rowsPaddingTop,
|
||||
rowsPaddingRight: v.rowsPaddingRight,
|
||||
rowsPaddingBottom: v.rowsPaddingBottom,
|
||||
rowsPaddingLeft: v.rowsPaddingLeft,
|
||||
actsSpacingCustom: v.actsSpacingCustom,
|
||||
actsMarginTop: v.actsMarginTop,
|
||||
actsMarginRight: v.actsMarginRight,
|
||||
actsMarginBottom: v.actsMarginBottom,
|
||||
actsMarginLeft: v.actsMarginLeft,
|
||||
actsPaddingTop: v.actsPaddingTop,
|
||||
actsPaddingRight: v.actsPaddingRight,
|
||||
actsPaddingBottom: v.actsPaddingBottom,
|
||||
actsPaddingLeft: v.actsPaddingLeft,
|
||||
qrSpacingCustom: v.qrSpacingCustom,
|
||||
qrMarginTop: v.qrMarginTop,
|
||||
qrMarginRight: v.qrMarginRight,
|
||||
qrMarginBottom: v.qrMarginBottom,
|
||||
qrMarginLeft: v.qrMarginLeft,
|
||||
qrPaddingTop: v.qrPaddingTop,
|
||||
qrPaddingRight: v.qrPaddingRight,
|
||||
qrPaddingBottom: v.qrPaddingBottom,
|
||||
qrPaddingLeft: v.qrPaddingLeft,
|
||||
};
|
||||
},
|
||||
boxStyle() {
|
||||
|
||||
@@ -127,6 +127,34 @@ export default {
|
||||
headPaddingRight: v.headPaddingRight,
|
||||
headPaddingBottom: v.headPaddingBottom,
|
||||
headPaddingLeft: v.headPaddingLeft,
|
||||
// 2.20: 三块独立成块逐向间距(开关+逐向 margin/padding; 缺键=关=历史形态)
|
||||
rowsSpacingCustom: v.rowsSpacingCustom,
|
||||
rowsMarginTop: v.rowsMarginTop,
|
||||
rowsMarginRight: v.rowsMarginRight,
|
||||
rowsMarginBottom: v.rowsMarginBottom,
|
||||
rowsMarginLeft: v.rowsMarginLeft,
|
||||
rowsPaddingTop: v.rowsPaddingTop,
|
||||
rowsPaddingRight: v.rowsPaddingRight,
|
||||
rowsPaddingBottom: v.rowsPaddingBottom,
|
||||
rowsPaddingLeft: v.rowsPaddingLeft,
|
||||
actsSpacingCustom: v.actsSpacingCustom,
|
||||
actsMarginTop: v.actsMarginTop,
|
||||
actsMarginRight: v.actsMarginRight,
|
||||
actsMarginBottom: v.actsMarginBottom,
|
||||
actsMarginLeft: v.actsMarginLeft,
|
||||
actsPaddingTop: v.actsPaddingTop,
|
||||
actsPaddingRight: v.actsPaddingRight,
|
||||
actsPaddingBottom: v.actsPaddingBottom,
|
||||
actsPaddingLeft: v.actsPaddingLeft,
|
||||
qrSpacingCustom: v.qrSpacingCustom,
|
||||
qrMarginTop: v.qrMarginTop,
|
||||
qrMarginRight: v.qrMarginRight,
|
||||
qrMarginBottom: v.qrMarginBottom,
|
||||
qrMarginLeft: v.qrMarginLeft,
|
||||
qrPaddingTop: v.qrPaddingTop,
|
||||
qrPaddingRight: v.qrPaddingRight,
|
||||
qrPaddingBottom: v.qrPaddingBottom,
|
||||
qrPaddingLeft: v.qrPaddingLeft,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user