102 lines
3.1 KiB
Vue
102 lines
3.1 KiB
Vue
<template>
|
|
<drawer-page-container v-model="visible" title="业务员详情">
|
|
<view v-if="loading" class="loading">加载中...</view>
|
|
<view v-else-if="detail" class="detail-wrap">
|
|
<view class="header">
|
|
<image v-if="detail.avatar" :src="detail.avatar" class="avatar" mode="aspectFill" />
|
|
<view v-else class="avatar placeholder">{{ (detail.nick_name || '?').charAt(0) }}</view>
|
|
<text class="name">{{ detail.nick_name || '-' }}</text>
|
|
<text class="role">{{ detail.role_name || '业务员' }}</text>
|
|
</view>
|
|
<view class="row"><text class="k">推广码</text><text class="v">{{ detail.code || '-' }}</text></view>
|
|
<view class="row"><text class="k">手机号</text><text class="v">{{ detail.phone || '-' }}</text></view>
|
|
<view class="row"><text class="k">录入诊所</text><text class="v">{{ detail.clinic_input_count || 0 }} 家</text></view>
|
|
<view class="row"><text class="k">录入药店</text><text class="v">{{ detail.pharmacy_input_count || 0 }} 家</text></view>
|
|
</view>
|
|
<view v-else class="loading">暂无数据</view>
|
|
</drawer-page-container>
|
|
</template>
|
|
|
|
<script>
|
|
import DrawerPageContainer from '@/subPackages/sub_salesperson/components/DrawerPageContainer.vue'
|
|
import { getInputBusinessContext } from '@/subPackages/sub_salesperson/common/context.js'
|
|
|
|
export default {
|
|
name: 'PromoterDetailPopup',
|
|
components: { DrawerPageContainer },
|
|
props: {
|
|
value: { type: Boolean, default: false },
|
|
admin: { type: Object, default: null },
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
detail: null,
|
|
}
|
|
},
|
|
computed: {
|
|
visible: {
|
|
get() { return this.value },
|
|
set(v) { this.$emit('input', v) },
|
|
},
|
|
bizApi() {
|
|
return getInputBusinessContext().api
|
|
},
|
|
},
|
|
watch: {
|
|
value(open) {
|
|
if (open) this.loadDetail()
|
|
else this.detail = null
|
|
},
|
|
},
|
|
methods: {
|
|
loadDetail() {
|
|
const id = this.admin?.id
|
|
const code = this.admin?.code
|
|
if (!id && !code) return
|
|
this.loading = true
|
|
this.bizApi.getPromoterDetail({ id, code })
|
|
.then((w) => {
|
|
if (w.ok) this.detail = w.data || null
|
|
})
|
|
.finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.loading { text-align: center; color: #86909c; padding: 80rpx 0; font-size: 28rpx; }
|
|
.detail-wrap { padding: 0 32rpx 32rpx; }
|
|
.header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
padding: 32rpx 0 40rpx;
|
|
}
|
|
.avatar { width: 128rpx; height: 128rpx; border-radius: 50%; }
|
|
.avatar.placeholder {
|
|
background: #e8f7f4;
|
|
color: #6acdbb;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48rpx;
|
|
font-weight: 600;
|
|
}
|
|
.name { font-size: 34rpx; font-weight: 600; color: #1d2129; }
|
|
.role { font-size: 26rpx; color: #86909c; }
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
font-size: 28rpx;
|
|
}
|
|
.k { color: #86909c; }
|
|
.v { color: #1d2129; max-width: 420rpx; text-align: right; word-break: break-all; }
|
|
</style>
|