ZF sun
48a17a59f7
- diy-card-common.js(新): 设计 token 层 —— 颜色/字阶/间距/圆角/阴影/动效/ 触达尺寸 + px2rpx/flagOn/initialOf/avatarBg/themeGradient/visibleRows 助手 - diy-card-mini.vue(新): 共享名片卡基件 —— 封面+遮罩/渐变饰条/Logo/主题色 头像(首字兜底)/资料行折叠(showRows 总开关+maxRows 上限+展开收起)/快捷操作 芯片(首个主动作实心, 72rpx 触达)/二维码/详情按钮/骨架屏 shimmer/badge 插槽 - diy-card-entry.vue: 三预设(gradient/solid/minimal)×两布局(left/center)× 图标装饰(内置字形/图片)×按钮四变体(solid/ghost/link/none) - diy-card-list.vue: 三布局(grid 双列/list/scroll 横滑)+骨架屏+逐项 fade-up 入场+标题行(计数/更多)+企业徽章+空态 - diy-card-show.vue / diy-card-self.vue: 改为基件包装; self 管登录态 (hasToken watch 刷新)+兜底(fallbackMode)+空态 CTA+「我的名片」角标 - 修复死配置: 面板「显示资料行」showRows 此前被 C 端丢弃, 现由基件消费 (历史配置无此字段时默认显示, 兼容 1.0) - 规范: 禁 CSS 变量, 动态样式走 $util.objToStyle, rpx 尺寸
121 lines
2.7 KiB
Vue
121 lines
2.7 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"
|
|
@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,
|
|
};
|
|
},
|
|
},
|
|
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>
|