ZF sun
d0fe005c4a
- 新增 diy-card-entry/list/show/self.vue(easycom 自动加载): 头像/资料行/快捷操作原生渲染, tel 走 makePhoneCall, wx/mail/web 走复制, 点击卡片跳 pages_tool/card/detail - diy-card-self 登录态自适应: hasToken watch 自动刷新, 未登录兜底(企业卡/指定卡/登录引导)由后端 /card/api/diy/mycard 决定 - diy-group.vue: DiyCard* 四个 componentName 分发分支
119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
|
<view data-component-name="diy-card-entry" class="diy-card-entry" :style="wrapStyle" @tap="goLink">
|
|
<view class="entry-left">
|
|
<text class="entry-title" :style="textStyle">{{ value.title || '扫名片 · 谈合作' }}</text>
|
|
<text v-if="value.subtitle" class="entry-sub" :style="subStyle">{{ value.subtitle }}</text>
|
|
</view>
|
|
<view v-if="value.btnText" class="entry-btn" :style="btnStyle">
|
|
<text class="entry-btn-text">{{ value.btnText }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 数字名片 · 名片入口横幅(装修组件, 原生渲染不依赖 webview)
|
|
import DiyMinx from './minx.js';
|
|
import golbalConfig from '@/common/js/golbalConfig.js';
|
|
|
|
export default {
|
|
name: 'diy-card-entry',
|
|
props: {
|
|
value: { type: Object }
|
|
},
|
|
mixins: [DiyMinx, golbalConfig],
|
|
computed: {
|
|
wrapStyle() {
|
|
const v = this.value || {};
|
|
return this.$util.objToStyle({
|
|
background: 'linear-gradient(135deg, ' + (v.bgColorStart || '#2F6BFF') + ' 0%, ' + (v.bgColorEnd || '#1E40AF') + ' 100%)',
|
|
borderRadius: this.px2rpx(v.borderRadius || 12) + 'rpx',
|
|
padding: this.px2rpx(v.padding || 16) + 'rpx ' + this.px2rpx(v.padding || 16) + 'rpx'
|
|
});
|
|
},
|
|
textStyle() {
|
|
return this.$util.objToStyle({ color: (this.value || {}).textColor || '#FFFFFF' });
|
|
},
|
|
subStyle() {
|
|
return this.$util.objToStyle({ color: (this.value || {}).textColor || '#FFFFFF', opacity: 0.85 });
|
|
},
|
|
btnStyle() {
|
|
return this.$util.objToStyle({ background: (this.value || {}).accentColor || '#FFEB3B' });
|
|
}
|
|
},
|
|
methods: {
|
|
px2rpx(v) {
|
|
const n = Number(v);
|
|
return isNaN(n) ? 0 : Math.round(n * 2);
|
|
},
|
|
goLink() {
|
|
const v = this.value || {};
|
|
let url = '';
|
|
if (v.linkMode === 'contacts') {
|
|
url = '/pages_tool/card/contacts';
|
|
} else if (v.linkMode === 'custom') {
|
|
url = String(v.customUrl || '').trim();
|
|
if (url !== '' && url.indexOf('/') !== 0) {
|
|
uni.showToast({ title: '自定义路径需以 / 开头', icon: 'none' });
|
|
return;
|
|
}
|
|
} else {
|
|
url = '/pages_tool/card/list';
|
|
}
|
|
if (url === '') {
|
|
uni.showToast({ title: '未配置跳转路径', icon: 'none' });
|
|
return;
|
|
}
|
|
this.$util.redirectTo(url);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.diy-card-entry {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
|
|
.entry-left {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.entry-title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.entry-sub {
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
margin-top: 8rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
|
|
.entry-btn {
|
|
flex-shrink: 0;
|
|
margin-left: 20rpx;
|
|
padding: 12rpx 28rpx;
|
|
border-radius: 999rpx;
|
|
|
|
.entry-btn-text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|