WindowBird/OfficeSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

客户详细标签页拆分

Browse Source
This commit is contained in:
WindowBird 2025-11-07 16:51:39 +08:00
parent 56c2e2f76e
commit 25bf702ed4
4 changed files with 807 additions and 699 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
components/customer-detail/FollowupTab.vue Normal file
View 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
View 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
View 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>

725
pages/customer/detail/index.vue
View File

@ -80,175 +80,24 @@
<!-- 内容区域 -->
<scroll-view class="content-scroll" scroll-y>
<!-- 跟进动态标签页 -->
<view class="tab-content" v-if="activeTab === 'followup'">
<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>
<FollowupTab
v-if="activeTab === 'followup'"
:followup-list="followupList"
@followup-click="handleFollowupClick"
/>
<!-- 项目列表标签页 -->
<view class="tab-content" v-if="activeTab === 'projects'">
<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>
<ProjectsTab
v-if="activeTab === 'projects'"
:project-list="projectList"
@project-more="handleProjectMore"
/>
<!-- 客户信息标签页 -->
<view class="tab-content" v-if="activeTab === 'info'">
<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>
<InfoTab
v-if="activeTab === 'info'"
:customer-detail="customerDetail"
/>
</scroll-view>
<!-- 底部操作栏 -->
@ -274,9 +123,12 @@
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
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('');
@ -286,46 +138,6 @@ const followupList = ref([]);
const projectList = ref([]);
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) => {
if (options && options.id) {
@ -417,15 +229,6 @@ const getStatusText = (status) => {
return statusMap[status] || '未知';
};
// 根据意向等级获取星级
const getRatingFromIntentLevel = (intentLevel) => {
const levelMap = {
'1': 5,
'2': 3
};
return levelMap[intentLevel] || 0;
};
// 格式化日期时间
const formatDateTime = (dateTime) => {
if (!dateTime) return '暂无';
@ -442,148 +245,13 @@ const formatDateTime = (dateTime) => {
}
};
// 格式化日期（仅显示月-日）
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 getProjectStatusClass = (status) => {
return {
'status-developing': status === 'developing' || status === '1' || status === 'IN_PROGRESS',
'status-expiring': status === 'expiring' || status === '2' || status === 'EXPIRING_SOON'
// 根据意向等级获取星级
const getRatingFromIntentLevel = (intentLevel) => {
const levelMap = {
'1': 5,
'2': 3
};
};
// 获取项目状态文本
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('、');
return levelMap[intentLevel] || 0;
};
// 获取客户类型文本
@ -595,16 +263,6 @@ const getCustomerTypeText = (type) => {
return typeMap[type] || '--';
};
// 获取意向强度文本
const getIntentStrengthText = (intentLevel) => {
const levelMap = {
'1': '高',
'2': '中',
'3': '低'
};
return levelMap[intentLevel] || '--';
};
// 返回
const handleBack = () => {
uni.navigateBack();
@ -825,337 +483,6 @@ onMounted(() => {
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 {
display: flex;