81 lines
2.4 KiB
Vue
81 lines
2.4 KiB
Vue
<template>
|
||
<view class="promoter-info-card">
|
||
<view
|
||
v-if="displayAdmin"
|
||
class="card-body"
|
||
:class="{ clickable: clickable && canOpenDetail }"
|
||
@click.stop="openDetail"
|
||
>
|
||
<image v-if="displayAdmin.avatar" :src="displayAdmin.avatar" class="avatar" mode="aspectFill" />
|
||
<view v-else class="avatar placeholder">{{ displayName.charAt(0) }}</view>
|
||
<view class="meta">
|
||
<text class="name">{{ displayName }}</text>
|
||
<text v-if="displayAdmin.phone" class="sub">{{ displayAdmin.phone }}</text>
|
||
<text v-else-if="displayAdmin.code" class="sub">业务码：{{ displayAdmin.code }}</text>
|
||
</view>
|
||
</view>
|
||
<text v-else class="empty">-</text>
|
||
<promoter-detail-popup v-model="showDetail" :admin="displayAdmin" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PromoterDetailPopup from '@/subPackages/sub_salesperson/components/PromoterDetailPopup.vue'
|
||
|
||
export default {
|
||
name: 'PromoterInfoCard',
|
||
components: { PromoterDetailPopup },
|
||
props: {
|
||
admin: { type: Object, default: null },
|
||
clickable: { type: Boolean, default: true },
|
||
},
|
||
data() {
|
||
return { showDetail: false }
|
||
},
|
||
computed: {
|
||
displayAdmin() {
|
||
if (!this.admin) return null
|
||
if (this.admin.id || this.admin.code || this.admin.nick_name) return this.admin
|
||
return null
|
||
},
|
||
displayName() {
|
||
return this.displayAdmin?.nick_name?.trim() || this.displayAdmin?.phone?.trim() || '-'
|
||
},
|
||
canOpenDetail() {
|
||
return !!(this.displayAdmin?.id || this.displayAdmin?.code)
|
||
},
|
||
},
|
||
methods: {
|
||
openDetail() {
|
||
if (!this.clickable || !this.canOpenDetail) return
|
||
this.showDetail = true
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.promoter-info-card { min-width: 0; }
|
||
.card-body {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
min-width: 0;
|
||
}
|
||
.card-body.clickable:active { opacity: 0.85; }
|
||
.avatar { width: 56rpx; height: 56rpx; border-radius: 50%; flex-shrink: 0; }
|
||
.avatar.placeholder {
|
||
background: #e8f7f4;
|
||
color: #6acdbb;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
.meta { flex: 1; min-width: 0; }
|
||
.name { display: block; font-size: 26rpx; color: #1d2129; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.sub { display: block; font-size: 22rpx; color: #86909c; margin-top: 4rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.empty { font-size: 26rpx; color: #86909c; }
|
||
</style>
|