复用客户简介卡片
This commit is contained in:
WindowBird
parent
2702236ff0
commit
e4944e7502
|
|
@ -55,41 +55,14 @@
|
|||
:key="customer.id"
|
||||
@click="handleCustomerClick(customer)"
|
||||
>
|
||||
<!-- 客户信息区域 -->
|
||||
<view class="customer-header">
|
||||
<view class="customer-name-wrapper">
|
||||
<text class="customer-name">{{ customer.name }}</text>
|
||||
<text class="edit-icon" @click.stop="handleEdit(customer)">✎</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态和标签区域 -->
|
||||
<view class="tags-section">
|
||||
<!-- 状态标签 -->
|
||||
<view
|
||||
class="status-tag"
|
||||
:class="getStatusTagClass(customer.status)"
|
||||
>
|
||||
{{ getStatusText(customer.status) }}
|
||||
</view>
|
||||
|
||||
<!-- 意向强度标签 -->
|
||||
<view
|
||||
class="intent-level-tag"
|
||||
v-if="customer.intentLevel"
|
||||
>
|
||||
{{ getIntentLevelText(customer.intentLevel) }}
|
||||
</view>
|
||||
|
||||
<!-- 客户意向标签 -->
|
||||
<view
|
||||
v-for="(intent, index) in customer.intents"
|
||||
:key="index"
|
||||
class="intent-tag"
|
||||
>
|
||||
{{ intent }}
|
||||
</view>
|
||||
</view>
|
||||
<CustomerSummaryBrief
|
||||
:name="customer.name"
|
||||
:intents="customer.intents"
|
||||
:intent-level="customer.intentLevel"
|
||||
:status="customer.status"
|
||||
:show-edit="true"
|
||||
@edit="handleEdit(customer)"
|
||||
/>
|
||||
|
||||
<!-- 客户详细信息区域 -->
|
||||
<view class="customer-details">
|
||||
|
|
@ -185,12 +158,10 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import FabPlus from '@/components/FabPlus.vue';
|
||||
import CustomerSummaryBrief from '@/components/customer/CustomerSummaryBrief.vue';
|
||||
import { usePagination } from '@/composables/usePagination';
|
||||
import { getCustomerList, deleteCustomer } from '@/common/api/customer';
|
||||
import {
|
||||
getCustomerStatusText,
|
||||
getCustomerStatusClass,
|
||||
getIntentLevelText,
|
||||
getStatusListByFilter
|
||||
} from '@/utils/customerMappings';
|
||||
|
||||
|
|
@ -217,20 +188,7 @@ const {
|
|||
defaultParams: {}
|
||||
});
|
||||
|
||||
// 使用统一映射函数
|
||||
const getStatusClass = getCustomerStatusClass;
|
||||
const getStatusText = getCustomerStatusText;
|
||||
|
||||
// 获取状态标签样式类
|
||||
const getStatusTagClass = (status) => {
|
||||
const statusStr = String(status);
|
||||
return {
|
||||
'status-tag-potential': statusStr === '1', // 潜在
|
||||
'status-tag-intent': statusStr === '2', // 意向
|
||||
'status-tag-deal': statusStr === '3', // 成交
|
||||
'status-tag-invalid': statusStr === '4' // 失效
|
||||
};
|
||||
};
|
||||
// 本页状态映射与样式由 CustomerSummaryBrief 统一处理
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (customer) => {
|
||||
|
|
|
|||
196
components/customer/CustomerSummaryBrief.vue
Normal file
196
components/customer/CustomerSummaryBrief.vue
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<view class="summary-brief">
|
||||
<!-- 名称区域（与列表页一致，支持可选编辑按钮） -->
|
||||
<view class="customer-header">
|
||||
<view class="customer-name-wrapper">
|
||||
|
||||
<text class="customer-name">{{ displayName }}</text>
|
||||
<text
|
||||
v-if="showEdit"
|
||||
class="edit-icon"
|
||||
@click.stop="$emit('edit')"
|
||||
>✎</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签区域（与列表页一致） -->
|
||||
<view class="tags-section">
|
||||
<!-- 状态标签 -->
|
||||
<view
|
||||
class="status-tag"
|
||||
:class="getStatusTagClass(status)"
|
||||
>
|
||||
{{ getCustomerStatusText(status) }}
|
||||
</view>
|
||||
|
||||
<!-- 意向强度标签 -->
|
||||
<view
|
||||
class="intent-level-tag"
|
||||
v-if="intentLevel"
|
||||
>
|
||||
{{ getIntentLevelText(intentLevel) }}
|
||||
</view>
|
||||
|
||||
<!-- 客户意向标签 -->
|
||||
<view
|
||||
v-for="(intent, index) in intentsArray"
|
||||
:key="index"
|
||||
class="intent-tag"
|
||||
>
|
||||
{{ intent }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
getCustomerStatusText,
|
||||
getIntentLevelText
|
||||
} from '@/utils/customerMappings';
|
||||
|
||||
const props = defineProps({
|
||||
name: { type: String, default: '' },
|
||||
intents: { type: [Array, String], default: () => [] },
|
||||
intentLevel: { type: [String, Number], default: '' },
|
||||
status: { type: [String, Number], default: '' },
|
||||
showEdit: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const displayName = computed(() => props.name || '--');
|
||||
|
||||
const intentsArray = computed(() => {
|
||||
if (!props.intents) return [];
|
||||
if (Array.isArray(props.intents)) {
|
||||
return props.intents;
|
||||
}
|
||||
if (typeof props.intents === 'string') {
|
||||
return props.intents
|
||||
.split(',')
|
||||
.map(s => s.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
// 与客户管理列表页一致的状态样式映射
|
||||
const getStatusTagClass = (status) => {
|
||||
const statusStr = String(status ?? '');
|
||||
return {
|
||||
'status-tag-potential': statusStr === '1', // 潜在
|
||||
'status-tag-intent': statusStr === '2', // 意向
|
||||
'status-tag-deal': statusStr === '3', // 成交
|
||||
'status-tag-invalid': statusStr === '4' // 失效
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.summary-brief {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.customer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.customer-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2885ff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
color: #909399;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签区域（复用列表页视觉） */
|
||||
.tags-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-tag-potential {
|
||||
color: #e6a23c;
|
||||
background-color: #fdf6ec;
|
||||
border: 1px solid #f5dab1;
|
||||
}
|
||||
|
||||
&.status-tag-intent {
|
||||
color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
border: 1px solid #b3d8ff;
|
||||
}
|
||||
|
||||
&.status-tag-deal {
|
||||
color: #67c23a;
|
||||
background-color: #f0f9ff;
|
||||
border: 1px solid #b3e19d;
|
||||
}
|
||||
|
||||
&.status-tag-invalid {
|
||||
color: #f56c6c;
|
||||
background-color: #fef0f0;
|
||||
border: 1px solid #fbc4c4;
|
||||
}
|
||||
}
|
||||
|
||||
/* 意向强度标签 */
|
||||
.intent-level-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #e6a23c;
|
||||
background-color: #fef9e7;
|
||||
border: 1px solid #f5dab1;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 客户意向标签 */
|
||||
.intent-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #67c23a;
|
||||
background-color: #f0f9ff;
|
||||
border: 1px solid #b3e19d;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -11,30 +11,12 @@
|
|||
|
||||
<!-- 客户摘要卡片 -->
|
||||
<view class="customer-summary-card">
|
||||
<view class="summary-row">
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">客户姓名</text>
|
||||
<text class="summary-value">{{ customerDetail.contactName || customerDetail.name || '--' }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">客户状态</text>
|
||||
<view class="status-badge" :class="getStatusClass(customerDetail.status)">
|
||||
<text>{{ getStatusText(customerDetail.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="summary-row">
|
||||
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">客户意向</text>
|
||||
<text class="summary-value">{{ formatIntents(customerDetail.intents) }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">意向强度</text>
|
||||
<text class="summary-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<CustomerSummaryBrief
|
||||
:name="customerDetail.contactName || customerDetail.name || '--'"
|
||||
:intents="customerDetail.intents"
|
||||
:intent-level="customerDetail.intentLevel"
|
||||
:status="customerDetail.status"
|
||||
/>
|
||||
<view class="summary-row">
|
||||
|
||||
<view class="summary-item">
|
||||
|
|
@ -148,6 +130,7 @@ import { getCustomerDetail, getCustomerFollowupList, getCustomerProjects, delete
|
|||
import FollowupTab from '@/components/customer-detail/FollowupTab.vue';
|
||||
import ProjectsTab from '@/components/customer-detail/ProjectsTab.vue';
|
||||
import InfoTab from '@/components/customer-detail/InfoTab.vue';
|
||||
import CustomerSummaryBrief from '@/components/customer/CustomerSummaryBrief.vue';
|
||||
import {
|
||||
getCustomerStatusText,
|
||||
getCustomerStatusClass,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user