refactor(销售时间线): 优化客户数据管理和展示逻辑

重构销售时间线组件,分离不同阶段的客户数据管理:
1. 不再将后三个阶段和成交阶段的客户合并到customersList
2. 为各阶段客户数据添加独立处理逻辑
3. 优化课程显示逻辑,优先使用class_num字段
4. 简化总数计算逻辑
This commit is contained in:
2025-08-13 20:56:27 +08:00
parent 5de287e777
commit 8bd8a9145f
2 changed files with 56 additions and 35 deletions

View File

@@ -59,7 +59,7 @@
<span class="profession">{{ item.profession || '公务员' }}</span>
<span class="education">{{ item.education || '高中' }}</span>
<span class="course-attendance">
{{ getAttendedLessons(item.class_situation) }}
{{ getAttendedLessons(item.class_situation,item.class_num) }}
</span>
<span class="course-type">{{ item.type }}</span>
</div>
@@ -156,8 +156,10 @@ const props = defineProps({
const emit = defineEmits(['stage-select', 'select-contact']);
const totalCustomers = computed(() => {
if (props.customersCount > 0) return props.customersCount;
// 全部阶段的数量就是前6个阶段的数量
if (props.customersList?.length > 0) return props.customersList.length;
// 如果没有实际数据使用props.data中的数据作为后备
if (props.data['全部']) return props.data['全部'];
const baseStages = [
@@ -176,21 +178,40 @@ const totalCustomers = computed(() => {
const getStageCount = (stageType) => {
if (!props.customersList?.length) {
return props.data[stageType] || 0;
// 成交阶段从payMoneyCustomersList获取数量
if (stageType === '成交') {
return props.payMoneyCustomersCount || (props.payMoneyCustomersList?.length || 0);
}
// 课1-4阶段从courseCustomers获取数量
if (stageType === '课1-4' && props.courseCustomers?.['课1-4']) {
return props.courseCustomers['课1-4'].length;
}
return props.customersList.filter(customer => customer.type === stageType).length;
// 后3个阶段从courseCustomers中筛选
if (['点击未支付', '付定金', '定金转化'].includes(stageType)) {
if (props.courseCustomers?.['课1-4']) {
return props.courseCustomers['课1-4'].filter(customer => customer.type === stageType).length;
}
return 0;
}
// 前6个阶段从customersList中筛选
if (props.customersList?.length) {
return props.customersList.filter(customer => customer.type === stageType).length;
}
// 如果没有数据使用props.data中的数据
return props.data[stageType] || 0;
};
const stages = computed(() => {
// 全部阶段的数量就是前6个阶段的数量
const totalCount = props.customersList?.length || 0;
const stageList = [
{ id: 0, name: '全部', displayName: '全部', count: props.customersCount || props.customersList.length, color: '#f3f4f6' },
{ id: 0, name: '全部', displayName: '全部', count: totalCount, color: '#f3f4f6' },
{ id: 1, name: '待加微', displayName: '待加微', count: getStageCount('待加微'), color: '#e3f2fd' },
{ id: 2, name: '待填表单', displayName: '待填表单', count: getStageCount('待填表单'), color: '#90caf9' },
{ id: 3, name: '待入群', displayName: '待入群', count: getStageCount('待入群'), color: '#bbdefb' },
@@ -217,6 +238,7 @@ const selectStage = (stageName) => {
let filteredCustomers = [];
if (stageName === '全部') {
// 全部阶段只显示前6个阶段的客户数据
filteredCustomers = props.customersList || [];
} else if (stageName === '课1-4' && props.courseCustomers?.['课1-4']) {
emit('stage-select', stageName, {
@@ -225,7 +247,26 @@ const selectStage = (stageName) => {
filteredCustomers: props.courseCustomers['课1-4']
});
return;
} else if (stageName === '成交') {
// 成交阶段使用payMoneyCustomersList数据
if (props.payMoneyCustomersList && props.payMoneyCustomersList.length > 0) {
filteredCustomers = props.payMoneyCustomersList.map(customer => ({
customer_name: customer.customer_name,
phone: customer.phone,
customer_occupation: customer.customer_occupation,
customer_child_education: customer.customer_child_education,
latest_message_time: customer.latest_message_time,
customer_avatar_url: customer.customer_avatar_url,
type: '成交'
}));
}
} else if (['点击未支付', '付定金', '定金转化'].includes(stageName)) {
// 后3个阶段从courseCustomers中筛选
if (props.courseCustomers?.['课1-4']) {
filteredCustomers = props.courseCustomers['课1-4'].filter(customer => customer.type === stageName);
}
} else {
// 前6个阶段从customersList中筛选
filteredCustomers = props.customersList.filter(customer => customer.type === stageName);
}
@@ -252,19 +293,23 @@ const getHealthIndicator = (score) => {
};
const getAttendedLessons = (classSituation) => {
const getAttendedLessons = (classSituation, classNum) => {
// 优先使用 class_num 字段
if (classNum && Array.isArray(classNum) && classNum.length > 0) {
return classNum.sort((a, b) => a - b).join(' ');
}
// 如果没有 class_num则使用 class_situation
if (!classSituation) return '暂无到课记录';
if (Array.isArray(classSituation)) {
return classSituation.join(' ');
}
if (typeof classSituation === 'object') {
const lessonNumbers = Object.keys(classSituation)
.map(key => parseInt(key))
.filter(num => !isNaN(num))
.sort((a, b) => a - b);
return lessonNumbers.length > 0 ? lessonNumbers.join(' ') : '暂无到课记录';
}