ZF sun
805bbb9598
- common.js: QR_STYLES 四档枚举 + normalizeQrStyle(未知回落 card) + resolveQrSize(自定义 px×2>档位自动 rpx) + qrTransform(位移经 translate, WXSS 不支持 calc) - mini.vue 基件: 头像可隐藏(默认显示, 兼容历史配置); qrBlockStyle 统一四档外观(plain 原图/card 白卡/theme 主题色/gradient 渐变, 多彩只装饰外围衬底, 码黑白保可扫); cornerClearStyle 按实际尺寸 反算让位(自定义大尺寸/关 tip 自动跟随); 扫码提示可关 - show/self: 6 新字段透传; ab-visual 测试 corner 断言改锚动态让位 - 新增 qr-style 契约测试 20 项(纯函数真值 + 基件 + 透传 + 两个 design.html 面板控件绑定与预览消费 + 反例), 9 项变异验证全抓住 - 前端四测试文件共 66 项全绿; E2E 143 项; 三回归 79/41/56 全绿
133 lines
3.0 KiB
Vue
133 lines
3.0 KiB
Vue
<template>
|
|
<view data-component-name="diy-card-show" class="diy-card-show">
|
|
<diy-card-mini
|
|
:card="card"
|
|
:config="miniConfig"
|
|
:loading="loading"
|
|
empty-tip="商家还未选择名片"
|
|
@act="doAct"
|
|
@row-act="doAct"
|
|
@detail="goDetail"
|
|
></diy-card-mini>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 数字名片 · 精选名片(装修组件)
|
|
// 视觉基件 diy-card-mini(封面/渐变/Logo/主题色/折叠/芯片/二维码), 本文件只管数据
|
|
export default {
|
|
name: 'diy-card-show',
|
|
props: {
|
|
value: { type: Object }
|
|
},
|
|
data() {
|
|
return {
|
|
card: null,
|
|
loading: false,
|
|
};
|
|
},
|
|
computed: {
|
|
miniConfig() {
|
|
const v = this.value || {};
|
|
return {
|
|
bgColor: v.bgColor,
|
|
nameColor: v.nameColor,
|
|
infoColor: v.infoColor,
|
|
labelColor: v.labelColor,
|
|
borderRadius: v.borderRadius,
|
|
padding: v.padding,
|
|
showQuick: v.showQuick,
|
|
showDetailBtn: v.showDetailBtn,
|
|
detailBtnText: v.detailBtnText,
|
|
// 2.0 新增视觉开关
|
|
useCover: v.useCover,
|
|
showGradient: v.showGradient,
|
|
showLogo: v.showLogo,
|
|
showShadow: v.showShadow,
|
|
showRows: v.showRows,
|
|
maxRows: v.maxRows,
|
|
showQr: v.showQr,
|
|
qrTip: v.qrTip,
|
|
// 3.0 A+B 视觉升级
|
|
showRowIcons: v.showRowIcons,
|
|
rowTap: v.rowTap,
|
|
qrPosition: v.qrPosition,
|
|
// 3.1 头像开关 + 二维码样式/微调
|
|
showAvatar: v.showAvatar,
|
|
qrStyle: v.qrStyle,
|
|
qrSize: v.qrSize,
|
|
qrOffsetX: v.qrOffsetX,
|
|
qrOffsetY: v.qrOffsetY,
|
|
qrTipShow: v.qrTipShow,
|
|
};
|
|
},
|
|
},
|
|
watch: {
|
|
'value.cardId'() {
|
|
this.fetchData();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.fetchData();
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
const cardId = String((this.value || {}).cardId || '').trim();
|
|
if (cardId === '') {
|
|
this.card = null;
|
|
return;
|
|
}
|
|
this.loading = true;
|
|
this.$api.sendRequest({
|
|
url: '/card/api/diy/card',
|
|
data: { card_id: cardId },
|
|
success: res => {
|
|
this.loading = false;
|
|
this.card = (res.code == 0 && res.data && res.data.card) ? res.data.card : null;
|
|
},
|
|
fail: () => {
|
|
this.loading = false;
|
|
this.card = null;
|
|
},
|
|
});
|
|
},
|
|
doAct(act) {
|
|
if (!act || !act.value) return;
|
|
if (act.type === 'tel') {
|
|
uni.makePhoneCall({ phoneNumber: act.value, fail: () => {} });
|
|
} else if (act.type === 'wx') {
|
|
uni.setClipboardData({
|
|
data: act.value,
|
|
success: () => uni.showToast({ title: '微信号已复制', icon: 'none' }),
|
|
});
|
|
} else if (act.type === 'mail') {
|
|
// #ifdef H5
|
|
window.location.href = 'mailto:' + act.value;
|
|
// #endif
|
|
// #ifndef H5
|
|
uni.setClipboardData({
|
|
data: act.value,
|
|
success: () => uni.showToast({ title: '邮箱已复制', icon: 'none' }),
|
|
});
|
|
// #endif
|
|
} else {
|
|
uni.setClipboardData({
|
|
data: act.value,
|
|
success: () => uni.showToast({ title: '已复制', icon: 'none' }),
|
|
});
|
|
}
|
|
},
|
|
goDetail(card) {
|
|
if (!card || !card.card_id) return;
|
|
this.$util.redirectTo('/pages_tool/card/detail', { card_id: card.card_id });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.diy-card-show {
|
|
width: 100%;
|
|
}
|
|
</style>
|