refactor(销售时间线): 优化客户数据管理和展示逻辑
重构销售时间线组件,分离不同阶段的客户数据管理: 1. 不再将后三个阶段和成交阶段的客户合并到customersList 2. 为各阶段客户数据添加独立处理逻辑 3. 优化课程显示逻辑,优先使用class_num字段 4. 简化总数计算逻辑
This commit is contained in:
@@ -59,7 +59,7 @@
|
|||||||
<span class="profession">{{ item.profession || '公务员' }}</span>
|
<span class="profession">{{ item.profession || '公务员' }}</span>
|
||||||
<span class="education">{{ item.education || '高中' }}</span>
|
<span class="education">{{ item.education || '高中' }}</span>
|
||||||
<span class="course-attendance">
|
<span class="course-attendance">
|
||||||
{{ getAttendedLessons(item.class_situation) }}
|
{{ getAttendedLessons(item.class_situation,item.class_num) }}
|
||||||
</span>
|
</span>
|
||||||
<span class="course-type">{{ item.type }}</span>
|
<span class="course-type">{{ item.type }}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -156,8 +156,10 @@ const props = defineProps({
|
|||||||
const emit = defineEmits(['stage-select', 'select-contact']);
|
const emit = defineEmits(['stage-select', 'select-contact']);
|
||||||
|
|
||||||
const totalCustomers = computed(() => {
|
const totalCustomers = computed(() => {
|
||||||
if (props.customersCount > 0) return props.customersCount;
|
// 全部阶段的数量就是前6个阶段的数量
|
||||||
if (props.customersList?.length > 0) return props.customersList.length;
|
if (props.customersList?.length > 0) return props.customersList.length;
|
||||||
|
|
||||||
|
// 如果没有实际数据,使用props.data中的数据作为后备
|
||||||
if (props.data['全部']) return props.data['全部'];
|
if (props.data['全部']) return props.data['全部'];
|
||||||
|
|
||||||
const baseStages = [
|
const baseStages = [
|
||||||
@@ -176,21 +178,40 @@ const totalCustomers = computed(() => {
|
|||||||
|
|
||||||
|
|
||||||
const getStageCount = (stageType) => {
|
const getStageCount = (stageType) => {
|
||||||
if (!props.customersList?.length) {
|
// 成交阶段从payMoneyCustomersList获取数量
|
||||||
return props.data[stageType] || 0;
|
if (stageType === '成交') {
|
||||||
|
return props.payMoneyCustomersCount || (props.payMoneyCustomersList?.length || 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 课1-4阶段从courseCustomers获取数量
|
||||||
if (stageType === '课1-4' && props.courseCustomers?.['课1-4']) {
|
if (stageType === '课1-4' && props.courseCustomers?.['课1-4']) {
|
||||||
return props.courseCustomers['课1-4'].length;
|
return props.courseCustomers['课1-4'].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;
|
return props.customersList.filter(customer => customer.type === stageType).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没有数据,使用props.data中的数据
|
||||||
|
return props.data[stageType] || 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const stages = computed(() => {
|
const stages = computed(() => {
|
||||||
|
// 全部阶段的数量就是前6个阶段的数量
|
||||||
|
const totalCount = props.customersList?.length || 0;
|
||||||
|
|
||||||
const stageList = [
|
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: 1, name: '待加微', displayName: '待加微', count: getStageCount('待加微'), color: '#e3f2fd' },
|
||||||
{ id: 2, name: '待填表单', displayName: '待填表单', count: getStageCount('待填表单'), color: '#90caf9' },
|
{ id: 2, name: '待填表单', displayName: '待填表单', count: getStageCount('待填表单'), color: '#90caf9' },
|
||||||
{ id: 3, name: '待入群', displayName: '待入群', count: getStageCount('待入群'), color: '#bbdefb' },
|
{ id: 3, name: '待入群', displayName: '待入群', count: getStageCount('待入群'), color: '#bbdefb' },
|
||||||
@@ -217,6 +238,7 @@ const selectStage = (stageName) => {
|
|||||||
let filteredCustomers = [];
|
let filteredCustomers = [];
|
||||||
|
|
||||||
if (stageName === '全部') {
|
if (stageName === '全部') {
|
||||||
|
// 全部阶段只显示前6个阶段的客户数据
|
||||||
filteredCustomers = props.customersList || [];
|
filteredCustomers = props.customersList || [];
|
||||||
} else if (stageName === '课1-4' && props.courseCustomers?.['课1-4']) {
|
} else if (stageName === '课1-4' && props.courseCustomers?.['课1-4']) {
|
||||||
emit('stage-select', stageName, {
|
emit('stage-select', stageName, {
|
||||||
@@ -225,7 +247,26 @@ const selectStage = (stageName) => {
|
|||||||
filteredCustomers: props.courseCustomers['课1-4']
|
filteredCustomers: props.courseCustomers['课1-4']
|
||||||
});
|
});
|
||||||
return;
|
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 {
|
} else {
|
||||||
|
// 前6个阶段从customersList中筛选
|
||||||
filteredCustomers = props.customersList.filter(customer => customer.type === stageName);
|
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 (!classSituation) return '暂无到课记录';
|
||||||
|
|
||||||
if (Array.isArray(classSituation)) {
|
if (Array.isArray(classSituation)) {
|
||||||
return classSituation.join(' ');
|
return classSituation.join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof classSituation === 'object') {
|
if (typeof classSituation === 'object') {
|
||||||
const lessonNumbers = Object.keys(classSituation)
|
const lessonNumbers = Object.keys(classSituation)
|
||||||
.map(key => parseInt(key))
|
.map(key => parseInt(key))
|
||||||
.filter(num => !isNaN(num))
|
.filter(num => !isNaN(num))
|
||||||
.sort((a, b) => a - b);
|
.sort((a, b) => a - b);
|
||||||
|
|
||||||
return lessonNumbers.length > 0 ? lessonNumbers.join(' ') : '暂无到课记录';
|
return lessonNumbers.length > 0 ? lessonNumbers.join(' ') : '暂无到课记录';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -324,7 +324,6 @@ async function getTimeline() {
|
|||||||
value: parseInt(count) || 0
|
value: parseInt(count) || 0
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理客户列表数据
|
// 处理客户列表数据
|
||||||
if (res.data.all_customers_list) {
|
if (res.data.all_customers_list) {
|
||||||
customersList.value = res.data.all_customers_list
|
customersList.value = res.data.all_customers_list
|
||||||
@@ -409,15 +408,7 @@ async function getTimeline() {
|
|||||||
pay_status: customer.pay_status
|
pay_status: customer.pay_status
|
||||||
})
|
})
|
||||||
|
|
||||||
// 将后三个阶段的客户添加到customersList中
|
// 后三个阶段的客户数据已存储在courseCustomers['课1-4']中,不需要合并到customersList
|
||||||
const additionalCustomers = [
|
|
||||||
...unpaidCustomers.map(customer => formatCustomerForList(customer, '点击未支付')),
|
|
||||||
...depositCustomers.map(customer => formatCustomerForList(customer, '付定金')),
|
|
||||||
...conversionCustomers.map(customer => formatCustomerForList(customer, '定金转化'))
|
|
||||||
]
|
|
||||||
|
|
||||||
// 合并到现有的customersList中
|
|
||||||
customersList.value = [...customersList.value, ...additionalCustomers]
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -435,21 +426,7 @@ async function getTimeline() {
|
|||||||
payMoneyCustomersCount.value = payRes.data.pay_money_customers_count
|
payMoneyCustomersCount.value = payRes.data.pay_money_customers_count
|
||||||
}
|
}
|
||||||
|
|
||||||
// 将成交阶段客户添加到总的客户列表中
|
// 成交阶段客户数据已存储在payMoneyCustomersList中,不需要合并到customersList
|
||||||
if (payRes.data.pay_money_customers_list) {
|
|
||||||
const payMoneyCustomers = payRes.data.pay_money_customers_list.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: '成交'
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 合并到现有的customersList中
|
|
||||||
customersList.value = [...customersList.value, ...payMoneyCustomers]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取时间线数据失败:', error)
|
console.error('获取时间线数据失败:', error)
|
||||||
@@ -519,7 +496,6 @@ const formattedCustomersList = computed(() => {
|
|||||||
lastMessageTime: customer.latest_message_time,
|
lastMessageTime: customer.latest_message_time,
|
||||||
avatarUrl: customer.customer_avatar_url,
|
avatarUrl: customer.customer_avatar_url,
|
||||||
type: customer.type,
|
type: customer.type,
|
||||||
classNum: customer.class_num,
|
|
||||||
class_num: customer.class_num, // 确保字段名一致
|
class_num: customer.class_num, // 确保字段名一致
|
||||||
// 添加一些默认值以兼容现有组件
|
// 添加一些默认值以兼容现有组件
|
||||||
salesStage: customer.type || '待联系',
|
salesStage: customer.type || '待联系',
|
||||||
|
|||||||
Reference in New Issue
Block a user