客户详细标签页拆分
This commit is contained in:
WindowBird
parent
56c2e2f76e
commit
25bf702ed4
259
components/customer-detail/FollowupTab.vue
Normal file
259
components/customer-detail/FollowupTab.vue
Normal file
|
|
@ -0,0 +1,259 @@
|
||||||
|
<template>
|
||||||
|
<view class="tab-content">
|
||||||
|
<view class="followup-timeline">
|
||||||
|
<template v-for="(group, groupIndex) in groupedFollowupList" :key="groupIndex">
|
||||||
|
<view
|
||||||
|
class="followup-item"
|
||||||
|
v-for="(item, index) in group.items"
|
||||||
|
:key="index"
|
||||||
|
@click="handleFollowupClick(item)"
|
||||||
|
>
|
||||||
|
<view class="date-header" v-if="index === 0">
|
||||||
|
<view class="date-dot"></view>
|
||||||
|
<text class="date-text">{{ group.date }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="followup-card">
|
||||||
|
<view class="followup-header">
|
||||||
|
<image
|
||||||
|
class="followup-avatar"
|
||||||
|
:src="item.userAvatar || '/static/default-avatar.png'"
|
||||||
|
mode="aspectFill"
|
||||||
|
/>
|
||||||
|
<view class="followup-user-info">
|
||||||
|
<text class="followup-user-name">{{ item.userName }}</text>
|
||||||
|
<text class="followup-user-role">销售经理</text>
|
||||||
|
</view>
|
||||||
|
<text class="followup-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
<text class="followup-text">{{ item.content }}</text>
|
||||||
|
<view class="followup-time-wrapper">
|
||||||
|
<text class="time-icon">🕐</text>
|
||||||
|
<text class="followup-time">{{ formatTimeOnly(item.followTime) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<view class="empty-state" v-if="followupList.length === 0">
|
||||||
|
<text>暂无跟进记录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
followupList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['followup-click']);
|
||||||
|
|
||||||
|
// 按日期分组的跟进记录
|
||||||
|
const groupedFollowupList = computed(() => {
|
||||||
|
if (!props.followupList || props.followupList.length === 0) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const groups = {};
|
||||||
|
props.followupList.forEach(item => {
|
||||||
|
if (!item.followTime) return;
|
||||||
|
const dateKey = formatDate(item.followTime);
|
||||||
|
if (!groups[dateKey]) {
|
||||||
|
groups[dateKey] = [];
|
||||||
|
}
|
||||||
|
groups[dateKey].push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 转换为数组并按日期倒序排列
|
||||||
|
return Object.keys(groups)
|
||||||
|
.sort((a, b) => {
|
||||||
|
// 从原始数据中获取完整日期进行比较
|
||||||
|
const getFullDate = (dateKey) => {
|
||||||
|
const items = groups[dateKey];
|
||||||
|
if (items && items.length > 0 && items[0].followTime) {
|
||||||
|
return new Date(items[0].followTime);
|
||||||
|
}
|
||||||
|
return new Date();
|
||||||
|
};
|
||||||
|
return getFullDate(b) - getFullDate(a);
|
||||||
|
})
|
||||||
|
.map(date => ({
|
||||||
|
date,
|
||||||
|
items: groups[date].sort((a, b) => {
|
||||||
|
// 同一天内的记录按时间倒序排列
|
||||||
|
const timeA = new Date(a.followTime || 0).getTime();
|
||||||
|
const timeB = new Date(b.followTime || 0).getTime();
|
||||||
|
return timeB - timeA;
|
||||||
|
})
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 格式化日期（仅显示月-日）
|
||||||
|
const formatDate = (dateTime) => {
|
||||||
|
if (!dateTime) return '';
|
||||||
|
try {
|
||||||
|
const date = new Date(dateTime);
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
return `${month}-${day}`;
|
||||||
|
} catch (e) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化时间（仅显示时:分）
|
||||||
|
const formatTimeOnly = (dateTime) => {
|
||||||
|
if (!dateTime) return '';
|
||||||
|
try {
|
||||||
|
const date = new Date(dateTime);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||||
|
} catch (e) {
|
||||||
|
return dateTime;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 跟进项点击
|
||||||
|
const handleFollowupClick = (item) => {
|
||||||
|
emit('followup-click', item);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tab-content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跟进动态样式
|
||||||
|
.followup-timeline {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #1976d2;
|
||||||
|
margin-right: 8px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-card {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 14px;
|
||||||
|
margin-left: 16px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 18px;
|
||||||
|
margin-right: 10px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-user-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-user-name {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-user-role {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-arrow {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ccc;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-time-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.followup-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
188
components/customer-detail/InfoTab.vue
Normal file
188
components/customer-detail/InfoTab.vue
Normal file
|
|
@ -0,0 +1,188 @@
|
||||||
|
<template>
|
||||||
|
<view class="tab-content">
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="title-line"></view>
|
||||||
|
<text>基础信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">客户名称</text>
|
||||||
|
<text class="info-value">{{ customerDetail.name || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">联系电话</text>
|
||||||
|
<text class="info-value">{{ customerDetail.mobile || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">微信号</text>
|
||||||
|
<text class="info-value">{{ customerDetail.wechat || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">客户来源</text>
|
||||||
|
<text class="info-value">{{ customerDetail.source || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">客户意向</text>
|
||||||
|
<text class="info-value">{{ formatIntents(customerDetail.intents) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">意向强度</text>
|
||||||
|
<text class="info-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">客户地区</text>
|
||||||
|
<text class="info-value">{{ customerDetail.regionName || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">工作微信</text>
|
||||||
|
<text class="info-value">{{ customerDetail.wechatId || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="title-line"></view>
|
||||||
|
<text>其他信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">客户星级</text>
|
||||||
|
<view class="info-value-stars">
|
||||||
|
<text
|
||||||
|
class="star"
|
||||||
|
v-for="i in 5"
|
||||||
|
:key="i"
|
||||||
|
:class="{ 'filled': i <= getRatingFromIntentLevel(customerDetail.intentLevel) }"
|
||||||
|
>★</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">备注</text>
|
||||||
|
<text class="info-value">{{ customerDetail.remark || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">顾虑点</text>
|
||||||
|
<text class="info-value">{{ customerDetail.concern || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">痛点</text>
|
||||||
|
<text class="info-value">{{ customerDetail.pain || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">关注点</text>
|
||||||
|
<text class="info-value">{{ customerDetail.attention || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">需求点</text>
|
||||||
|
<text class="info-value">{{ customerDetail.demand || '--' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
customerDetail: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据意向等级获取星级
|
||||||
|
const getRatingFromIntentLevel = (intentLevel) => {
|
||||||
|
const levelMap = {
|
||||||
|
'1': 5,
|
||||||
|
'2': 3
|
||||||
|
};
|
||||||
|
return levelMap[intentLevel] || 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化客户意向（数组转字符串）
|
||||||
|
const formatIntents = (intents) => {
|
||||||
|
if (!intents || !Array.isArray(intents) || intents.length === 0) return '--';
|
||||||
|
return intents.join('、');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取意向强度文本
|
||||||
|
const getIntentStrengthText = (intentLevel) => {
|
||||||
|
const levelMap = {
|
||||||
|
'1': '高',
|
||||||
|
'2': '中',
|
||||||
|
'3': '低'
|
||||||
|
};
|
||||||
|
return levelMap[intentLevel] || '--';
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tab-content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 客户信息样式
|
||||||
|
.info-section {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-line {
|
||||||
|
width: 3px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #1976d2;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
width: 100px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value-stars {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ddd;
|
||||||
|
|
||||||
|
&.filled {
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
334
components/customer-detail/ProjectsTab.vue
Normal file
334
components/customer-detail/ProjectsTab.vue
Normal file
|
|
@ -0,0 +1,334 @@
|
||||||
|
<template>
|
||||||
|
<view class="tab-content">
|
||||||
|
<view class="project-list">
|
||||||
|
<view
|
||||||
|
class="project-card"
|
||||||
|
v-for="(project, index) in projectList"
|
||||||
|
:key="project.id || index"
|
||||||
|
>
|
||||||
|
<view class="project-header">
|
||||||
|
<view class="project-status-tag" :class="getProjectStatusClass(project.status)">
|
||||||
|
<text>{{ getProjectStatusText(project.status) }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="project-more" @click.stop="handleProjectMore(project)">⋯</text>
|
||||||
|
</view>
|
||||||
|
<text class="project-name">{{ project.name }}</text>
|
||||||
|
<view class="project-progress">
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view
|
||||||
|
class="progress-fill"
|
||||||
|
:style="{ width: getProjectProgress(project) + '%' }"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
<text class="progress-text">{{ getProjectProgress(project) }}%</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-task-count">
|
||||||
|
<text class="task-count-text">{{ getTaskCountText(project) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-members">
|
||||||
|
<view class="member-avatars">
|
||||||
|
<image
|
||||||
|
v-for="(member, idx) in getDisplayMembers(project.memberList)"
|
||||||
|
:key="member.id || idx"
|
||||||
|
class="member-avatar"
|
||||||
|
:src="member.userAvatar || '/static/default-avatar.png'"
|
||||||
|
mode="aspectFill"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<text class="members-text">{{ formatProjectMembers(project.memberList) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-deadline" :class="{ 'overdue': isProjectOverdue(project) }">
|
||||||
|
<text class="deadline-icon">🕐</text>
|
||||||
|
<text class="deadline-text">{{ formatProjectDeadline(project) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="empty-state" v-if="projectList.length === 0">
|
||||||
|
<text>暂无项目</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
projectList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['project-more']);
|
||||||
|
|
||||||
|
// 获取项目状态样式类
|
||||||
|
const getProjectStatusClass = (status) => {
|
||||||
|
return {
|
||||||
|
'status-developing': status === 'developing' || status === '1' || status === 'IN_PROGRESS',
|
||||||
|
'status-expiring': status === 'expiring' || status === '2' || status === 'EXPIRING_SOON'
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取项目状态文本
|
||||||
|
const getProjectStatusText = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
'developing': '开发中',
|
||||||
|
'expiring': '即将到期',
|
||||||
|
'1': '开发中',
|
||||||
|
'2': '即将到期',
|
||||||
|
'IN_PROGRESS': '开发中',
|
||||||
|
'EXPIRING_SOON': '即将到期'
|
||||||
|
};
|
||||||
|
return statusMap[status] || '未知';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算项目进度
|
||||||
|
const getProjectProgress = (project) => {
|
||||||
|
if (!project) return 0;
|
||||||
|
// 如果有任务数据，根据任务完成情况计算
|
||||||
|
if (project.taskCount && project.taskCount > 0) {
|
||||||
|
const completed = project.taskPassCount || 0;
|
||||||
|
const progress = Math.round((completed / project.taskCount) * 100);
|
||||||
|
return Math.min(100, Math.max(0, progress)); // 确保在0-100之间
|
||||||
|
}
|
||||||
|
// 如果有进度字段，使用进度字段
|
||||||
|
if (project.progress !== undefined && project.progress !== null) {
|
||||||
|
return Math.min(100, Math.max(0, project.progress));
|
||||||
|
}
|
||||||
|
// 默认返回0
|
||||||
|
return 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取任务计数文本
|
||||||
|
const getTaskCountText = (project) => {
|
||||||
|
if (!project) return '0 / 0';
|
||||||
|
const completed = project.taskPassCount || 0;
|
||||||
|
const total = project.taskCount || 0;
|
||||||
|
return `${completed} / ${total}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取要显示的成员头像（最多4个）
|
||||||
|
const getDisplayMembers = (memberList) => {
|
||||||
|
if (!memberList || !Array.isArray(memberList)) return [];
|
||||||
|
return memberList.slice(0, 4);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化项目成员列表
|
||||||
|
const formatProjectMembers = (memberList) => {
|
||||||
|
if (!memberList || !Array.isArray(memberList) || memberList.length === 0) {
|
||||||
|
return '暂无成员';
|
||||||
|
}
|
||||||
|
|
||||||
|
const names = memberList.map(member => member.userName || member.name).filter(Boolean);
|
||||||
|
|
||||||
|
if (names.length <= 4) {
|
||||||
|
return names.join('、');
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstFour = names.slice(0, 4).join('、');
|
||||||
|
return `${firstFour}等${names.length}人`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 判断项目是否逾期
|
||||||
|
const isProjectOverdue = (project) => {
|
||||||
|
if (!project) return false;
|
||||||
|
// 优先使用 devOverdue 字段
|
||||||
|
if (project.devOverdue !== undefined && project.devOverdue !== null) {
|
||||||
|
return project.devOverdue;
|
||||||
|
}
|
||||||
|
// 否则根据日期判断
|
||||||
|
const deadline = project.expireTime || project.expectedCompleteDate;
|
||||||
|
if (!deadline) return false;
|
||||||
|
const deadlineDate = new Date(deadline);
|
||||||
|
const now = new Date();
|
||||||
|
return deadlineDate < now;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化项目截止日期
|
||||||
|
const formatProjectDeadline = (project) => {
|
||||||
|
if (!project) return '--';
|
||||||
|
|
||||||
|
// 优先使用 expireTime，其次使用 expectedCompleteDate
|
||||||
|
const deadline = project.expireTime || project.expectedCompleteDate;
|
||||||
|
if (!deadline) return '--';
|
||||||
|
|
||||||
|
const deadlineDate = new Date(deadline);
|
||||||
|
const now = new Date();
|
||||||
|
const diffTime = deadlineDate - now;
|
||||||
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
// 格式化日期显示
|
||||||
|
const year = deadlineDate.getFullYear();
|
||||||
|
const month = String(deadlineDate.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(deadlineDate.getDate()).padStart(2, '0');
|
||||||
|
const dateStr = `${year}-${month}-${day}`;
|
||||||
|
|
||||||
|
if (diffDays < 0) {
|
||||||
|
return `逾期${Math.abs(diffDays)}天 ${dateStr}`;
|
||||||
|
} else {
|
||||||
|
return `剩余${diffDays}天 ${dateStr}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 项目更多操作
|
||||||
|
const handleProjectMore = (project) => {
|
||||||
|
emit('project-more', project);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tab-content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 项目列表样式
|
||||||
|
.project-list {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-status-tag {
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.status-developing {
|
||||||
|
background-color: #1976d2;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-expiring {
|
||||||
|
background-color: #ff9800;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-more {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: block;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-progress {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
flex: 1;
|
||||||
|
height: 6px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #1976d2;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1976d2;
|
||||||
|
font-weight: 600;
|
||||||
|
min-width: 40px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-task-count {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-count-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-members {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-avatars {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
margin-left: -8px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-deadline {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deadline-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deadline-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1976d2;
|
||||||
|
|
||||||
|
.overdue & {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-deadline.overdue .deadline-text {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -80,175 +80,24 @@
|
||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<scroll-view class="content-scroll" scroll-y>
|
<scroll-view class="content-scroll" scroll-y>
|
||||||
<!-- 跟进动态标签页 -->
|
<!-- 跟进动态标签页 -->
|
||||||
<view class="tab-content" v-if="activeTab === 'followup'">
|
<FollowupTab
|
||||||
<view class="followup-timeline">
|
v-if="activeTab === 'followup'"
|
||||||
<template v-for="(group, groupIndex) in groupedFollowupList" :key="groupIndex">
|
:followup-list="followupList"
|
||||||
<view
|
@followup-click="handleFollowupClick"
|
||||||
class="followup-item"
|
/>
|
||||||
v-for="(item, index) in group.items"
|
|
||||||
:key="index"
|
|
||||||
@click="handleFollowupClick(item)"
|
|
||||||
>
|
|
||||||
<view class="date-header" v-if="index === 0">
|
|
||||||
<view class="date-dot"></view>
|
|
||||||
<text class="date-text">{{ group.date }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="followup-card">
|
|
||||||
<view class="followup-header">
|
|
||||||
<image
|
|
||||||
class="followup-avatar"
|
|
||||||
:src="item.userAvatar || '/static/default-avatar.png'"
|
|
||||||
mode="aspectFill"
|
|
||||||
/>
|
|
||||||
<view class="followup-user-info">
|
|
||||||
<text class="followup-user-name">{{ item.userName }}</text>
|
|
||||||
<text class="followup-user-role">销售经理</text>
|
|
||||||
</view>
|
|
||||||
<text class="followup-arrow">›</text>
|
|
||||||
</view>
|
|
||||||
<text class="followup-text">{{ item.content }}</text>
|
|
||||||
<view class="followup-time-wrapper">
|
|
||||||
<text class="time-icon">🕐</text>
|
|
||||||
<text class="followup-time">{{ formatTimeOnly(item.followTime) }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<view class="empty-state" v-if="followupList.length === 0">
|
|
||||||
<text>暂无跟进记录</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 项目列表标签页 -->
|
<!-- 项目列表标签页 -->
|
||||||
<view class="tab-content" v-if="activeTab === 'projects'">
|
<ProjectsTab
|
||||||
<view class="project-list">
|
v-if="activeTab === 'projects'"
|
||||||
<view
|
:project-list="projectList"
|
||||||
class="project-card"
|
@project-more="handleProjectMore"
|
||||||
v-for="(project, index) in projectList"
|
/>
|
||||||
:key="project.id || index"
|
|
||||||
>
|
|
||||||
<view class="project-header">
|
|
||||||
<view class="project-status-tag" :class="getProjectStatusClass(project.status)">
|
|
||||||
<text>{{ getProjectStatusText(project.status) }}</text>
|
|
||||||
</view>
|
|
||||||
<text class="project-more" @click.stop="handleProjectMore(project)">⋯</text>
|
|
||||||
</view>
|
|
||||||
<text class="project-name">{{ project.name }}</text>
|
|
||||||
<view class="project-progress">
|
|
||||||
<view class="progress-bar">
|
|
||||||
<view
|
|
||||||
class="progress-fill"
|
|
||||||
:style="{ width: getProjectProgress(project) + '%' }"
|
|
||||||
></view>
|
|
||||||
</view>
|
|
||||||
<text class="progress-text">{{ getProjectProgress(project) }}%</text>
|
|
||||||
</view>
|
|
||||||
<view class="project-task-count">
|
|
||||||
<text class="task-count-text">{{ getTaskCountText(project) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="project-members">
|
|
||||||
<view class="member-avatars">
|
|
||||||
<image
|
|
||||||
v-for="(member, idx) in getDisplayMembers(project.memberList)"
|
|
||||||
:key="member.id || idx"
|
|
||||||
class="member-avatar"
|
|
||||||
:src="member.userAvatar || '/static/default-avatar.png'"
|
|
||||||
mode="aspectFill"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<text class="members-text">{{ formatProjectMembers(project.memberList) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="project-deadline" :class="{ 'overdue': isProjectOverdue(project) }">
|
|
||||||
<text class="deadline-icon">🕐</text>
|
|
||||||
<text class="deadline-text">{{ formatProjectDeadline(project) }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="empty-state" v-if="projectList.length === 0">
|
|
||||||
<text>暂无项目</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 客户信息标签页 -->
|
<!-- 客户信息标签页 -->
|
||||||
<view class="tab-content" v-if="activeTab === 'info'">
|
<InfoTab
|
||||||
<view class="info-section">
|
v-if="activeTab === 'info'"
|
||||||
<view class="section-title">
|
:customer-detail="customerDetail"
|
||||||
<view class="title-line"></view>
|
/>
|
||||||
<text>基础信息</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">客户名称</text>
|
|
||||||
<text class="info-value">{{ customerDetail.name || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">联系电话</text>
|
|
||||||
<text class="info-value">{{ customerDetail.mobile || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">微信号</text>
|
|
||||||
<text class="info-value">{{ customerDetail.wechat || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">客户来源</text>
|
|
||||||
<text class="info-value">{{ customerDetail.source || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">客户意向</text>
|
|
||||||
<text class="info-value">{{ formatIntents(customerDetail.intents) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">意向强度</text>
|
|
||||||
<text class="info-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">客户地区</text>
|
|
||||||
<text class="info-value">{{ customerDetail.regionName || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">工作微信</text>
|
|
||||||
<text class="info-value">{{ customerDetail.wechatId || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="info-section">
|
|
||||||
<view class="section-title">
|
|
||||||
<view class="title-line"></view>
|
|
||||||
<text>其他信息</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">客户星级</text>
|
|
||||||
<view class="info-value-stars">
|
|
||||||
<text
|
|
||||||
class="star"
|
|
||||||
v-for="i in 5"
|
|
||||||
:key="i"
|
|
||||||
:class="{ 'filled': i <= getRatingFromIntentLevel(customerDetail.intentLevel) }"
|
|
||||||
>★</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">备注</text>
|
|
||||||
<text class="info-value">{{ customerDetail.remark || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">顾虑点</text>
|
|
||||||
<text class="info-value">{{ customerDetail.concern || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">痛点</text>
|
|
||||||
<text class="info-value">{{ customerDetail.pain || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">关注点</text>
|
|
||||||
<text class="info-value">{{ customerDetail.attention || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">需求点</text>
|
|
||||||
<text class="info-value">{{ customerDetail.demand || '--' }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 底部操作栏 -->
|
<!-- 底部操作栏 -->
|
||||||
|
|
@ -274,9 +123,12 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, computed } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
import { onLoad } from '@dcloudio/uni-app';
|
||||||
import { getCustomerDetail, getCustomerFollowupList, getCustomerProjects } from '@/common/api';
|
import { getCustomerDetail, getCustomerFollowupList, getCustomerProjects } from '@/common/api';
|
||||||
|
import FollowupTab from '@/components/customer-detail/FollowupTab.vue';
|
||||||
|
import ProjectsTab from '@/components/customer-detail/ProjectsTab.vue';
|
||||||
|
import InfoTab from '@/components/customer-detail/InfoTab.vue';
|
||||||
|
|
||||||
// 页面参数
|
// 页面参数
|
||||||
const customerId = ref('');
|
const customerId = ref('');
|
||||||
|
|
@ -286,46 +138,6 @@ const followupList = ref([]);
|
||||||
const projectList = ref([]);
|
const projectList = ref([]);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
|
||||||
// 按日期分组的跟进记录
|
|
||||||
const groupedFollowupList = computed(() => {
|
|
||||||
if (!followupList.value || followupList.value.length === 0) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const groups = {};
|
|
||||||
followupList.value.forEach(item => {
|
|
||||||
if (!item.followTime) return;
|
|
||||||
const dateKey = formatDate(item.followTime);
|
|
||||||
if (!groups[dateKey]) {
|
|
||||||
groups[dateKey] = [];
|
|
||||||
}
|
|
||||||
groups[dateKey].push(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 转换为数组并按日期倒序排列
|
|
||||||
return Object.keys(groups)
|
|
||||||
.sort((a, b) => {
|
|
||||||
// 从原始数据中获取完整日期进行比较
|
|
||||||
const getFullDate = (dateKey) => {
|
|
||||||
const items = groups[dateKey];
|
|
||||||
if (items && items.length > 0 && items[0].followTime) {
|
|
||||||
return new Date(items[0].followTime);
|
|
||||||
}
|
|
||||||
return new Date();
|
|
||||||
};
|
|
||||||
return getFullDate(b) - getFullDate(a);
|
|
||||||
})
|
|
||||||
.map(date => ({
|
|
||||||
date,
|
|
||||||
items: groups[date].sort((a, b) => {
|
|
||||||
// 同一天内的记录按时间倒序排列
|
|
||||||
const timeA = new Date(a.followTime || 0).getTime();
|
|
||||||
const timeB = new Date(b.followTime || 0).getTime();
|
|
||||||
return timeB - timeA;
|
|
||||||
})
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取页面参数
|
// 获取页面参数
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
if (options && options.id) {
|
if (options && options.id) {
|
||||||
|
|
@ -417,15 +229,6 @@ const getStatusText = (status) => {
|
||||||
return statusMap[status] || '未知';
|
return statusMap[status] || '未知';
|
||||||
};
|
};
|
||||||
|
|
||||||
// 根据意向等级获取星级
|
|
||||||
const getRatingFromIntentLevel = (intentLevel) => {
|
|
||||||
const levelMap = {
|
|
||||||
'1': 5,
|
|
||||||
'2': 3
|
|
||||||
};
|
|
||||||
return levelMap[intentLevel] || 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 格式化日期时间
|
// 格式化日期时间
|
||||||
const formatDateTime = (dateTime) => {
|
const formatDateTime = (dateTime) => {
|
||||||
if (!dateTime) return '暂无';
|
if (!dateTime) return '暂无';
|
||||||
|
|
@ -442,148 +245,13 @@ const formatDateTime = (dateTime) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 格式化日期（仅显示月-日）
|
// 根据意向等级获取星级
|
||||||
const formatDate = (dateTime) => {
|
const getRatingFromIntentLevel = (intentLevel) => {
|
||||||
if (!dateTime) return '';
|
const levelMap = {
|
||||||
try {
|
'1': 5,
|
||||||
const date = new Date(dateTime);
|
'2': 3
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
||||||
const day = String(date.getDate()).padStart(2, '0');
|
|
||||||
return `${month}-${day}`;
|
|
||||||
} catch (e) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 格式化时间（仅显示时:分）
|
|
||||||
const formatTimeOnly = (dateTime) => {
|
|
||||||
if (!dateTime) return '';
|
|
||||||
try {
|
|
||||||
const date = new Date(dateTime);
|
|
||||||
const year = date.getFullYear();
|
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
||||||
const day = String(date.getDate()).padStart(2, '0');
|
|
||||||
const hours = String(date.getHours()).padStart(2, '0');
|
|
||||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
||||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
|
||||||
} catch (e) {
|
|
||||||
return dateTime;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取项目状态样式类
|
|
||||||
const getProjectStatusClass = (status) => {
|
|
||||||
return {
|
|
||||||
'status-developing': status === 'developing' || status === '1' || status === 'IN_PROGRESS',
|
|
||||||
'status-expiring': status === 'expiring' || status === '2' || status === 'EXPIRING_SOON'
|
|
||||||
};
|
};
|
||||||
};
|
return levelMap[intentLevel] || 0;
|
||||||
|
|
||||||
// 获取项目状态文本
|
|
||||||
const getProjectStatusText = (status) => {
|
|
||||||
const statusMap = {
|
|
||||||
'developing': '开发中',
|
|
||||||
'expiring': '即将到期',
|
|
||||||
'1': '开发中',
|
|
||||||
'2': '即将到期',
|
|
||||||
'IN_PROGRESS': '开发中',
|
|
||||||
'EXPIRING_SOON': '即将到期'
|
|
||||||
};
|
|
||||||
return statusMap[status] || '未知';
|
|
||||||
};
|
|
||||||
|
|
||||||
// 计算项目进度
|
|
||||||
const getProjectProgress = (project) => {
|
|
||||||
if (!project) return 0;
|
|
||||||
// 如果有任务数据，根据任务完成情况计算
|
|
||||||
if (project.taskCount && project.taskCount > 0) {
|
|
||||||
const completed = project.taskPassCount || 0;
|
|
||||||
const progress = Math.round((completed / project.taskCount) * 100);
|
|
||||||
return Math.min(100, Math.max(0, progress)); // 确保在0-100之间
|
|
||||||
}
|
|
||||||
// 如果有进度字段，使用进度字段
|
|
||||||
if (project.progress !== undefined && project.progress !== null) {
|
|
||||||
return Math.min(100, Math.max(0, project.progress));
|
|
||||||
}
|
|
||||||
// 默认返回0
|
|
||||||
return 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取任务计数文本
|
|
||||||
const getTaskCountText = (project) => {
|
|
||||||
if (!project) return '0 / 0';
|
|
||||||
const completed = project.taskPassCount || 0;
|
|
||||||
const total = project.taskCount || 0;
|
|
||||||
return `${completed} / ${total}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取要显示的成员头像（最多4个）
|
|
||||||
const getDisplayMembers = (memberList) => {
|
|
||||||
if (!memberList || !Array.isArray(memberList)) return [];
|
|
||||||
return memberList.slice(0, 4);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 格式化项目成员列表
|
|
||||||
const formatProjectMembers = (memberList) => {
|
|
||||||
if (!memberList || !Array.isArray(memberList) || memberList.length === 0) {
|
|
||||||
return '暂无成员';
|
|
||||||
}
|
|
||||||
|
|
||||||
const names = memberList.map(member => member.userName || member.name).filter(Boolean);
|
|
||||||
|
|
||||||
if (names.length <= 4) {
|
|
||||||
return names.join('、');
|
|
||||||
}
|
|
||||||
|
|
||||||
const firstFour = names.slice(0, 4).join('、');
|
|
||||||
return `${firstFour}等${names.length}人`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 判断项目是否逾期
|
|
||||||
const isProjectOverdue = (project) => {
|
|
||||||
if (!project) return false;
|
|
||||||
// 优先使用 devOverdue 字段
|
|
||||||
if (project.devOverdue !== undefined && project.devOverdue !== null) {
|
|
||||||
return project.devOverdue;
|
|
||||||
}
|
|
||||||
// 否则根据日期判断
|
|
||||||
const deadline = project.expireTime || project.expectedCompleteDate;
|
|
||||||
if (!deadline) return false;
|
|
||||||
const deadlineDate = new Date(deadline);
|
|
||||||
const now = new Date();
|
|
||||||
return deadlineDate < now;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 格式化项目截止日期
|
|
||||||
const formatProjectDeadline = (project) => {
|
|
||||||
if (!project) return '--';
|
|
||||||
|
|
||||||
// 优先使用 expireTime，其次使用 expectedCompleteDate
|
|
||||||
const deadline = project.expireTime || project.expectedCompleteDate;
|
|
||||||
if (!deadline) return '--';
|
|
||||||
|
|
||||||
const deadlineDate = new Date(deadline);
|
|
||||||
const now = new Date();
|
|
||||||
const diffTime = deadlineDate - now;
|
|
||||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
||||||
|
|
||||||
// 格式化日期显示
|
|
||||||
const year = deadlineDate.getFullYear();
|
|
||||||
const month = String(deadlineDate.getMonth() + 1).padStart(2, '0');
|
|
||||||
const day = String(deadlineDate.getDate()).padStart(2, '0');
|
|
||||||
const dateStr = `${year}-${month}-${day}`;
|
|
||||||
|
|
||||||
if (diffDays < 0) {
|
|
||||||
return `逾期${Math.abs(diffDays)}天 ${dateStr}`;
|
|
||||||
} else {
|
|
||||||
return `剩余${diffDays}天 ${dateStr}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 格式化客户意向（数组转字符串）
|
|
||||||
const formatIntents = (intents) => {
|
|
||||||
if (!intents || !Array.isArray(intents) || intents.length === 0) return '--';
|
|
||||||
return intents.join('、');
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取客户类型文本
|
// 获取客户类型文本
|
||||||
|
|
@ -595,16 +263,6 @@ const getCustomerTypeText = (type) => {
|
||||||
return typeMap[type] || '--';
|
return typeMap[type] || '--';
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取意向强度文本
|
|
||||||
const getIntentStrengthText = (intentLevel) => {
|
|
||||||
const levelMap = {
|
|
||||||
'1': '高',
|
|
||||||
'2': '中',
|
|
||||||
'3': '低'
|
|
||||||
};
|
|
||||||
return levelMap[intentLevel] || '--';
|
|
||||||
};
|
|
||||||
|
|
||||||
// 返回
|
// 返回
|
||||||
const handleBack = () => {
|
const handleBack = () => {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
|
|
@ -825,337 +483,6 @@ onMounted(() => {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 跟进动态样式
|
|
||||||
.followup-timeline {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-item {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #1976d2;
|
|
||||||
margin-right: 8px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-card {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 14px;
|
|
||||||
margin-left: 16px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-avatar {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 18px;
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-user-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-user-name {
|
|
||||||
font-size: 15px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-user-role {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-arrow {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #ccc;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-time-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-icon {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.followup-time {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 项目列表样式
|
|
||||||
.project-list {
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-card {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-status-tag {
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
&.status-developing {
|
|
||||||
background-color: #1976d2;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.status-expiring {
|
|
||||||
background-color: #ff9800;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-more {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #999;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-name {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
display: block;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-progress {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
flex: 1;
|
|
||||||
height: 6px;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background-color: #1976d2;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #1976d2;
|
|
||||||
font-weight: 600;
|
|
||||||
min-width: 40px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-task-count {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-count-text {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-members {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-avatars {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-avatar {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
margin-left: -8px;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.members-text {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #666;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-deadline {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deadline-icon {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deadline-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #1976d2;
|
|
||||||
|
|
||||||
.overdue & {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-deadline.overdue .deadline-text {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 客户信息样式
|
|
||||||
.info-section {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-line {
|
|
||||||
width: 3px;
|
|
||||||
height: 16px;
|
|
||||||
background-color: #1976d2;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title text {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item {
|
|
||||||
display: flex;
|
|
||||||
padding: 12px 0;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-label {
|
|
||||||
width: 100px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value-stars {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 0;
|
|
||||||
color: #999;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 底部操作栏
|
// 底部操作栏
|
||||||
.bottom-actions {
|
.bottom-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user