客户详细-跟进动态样式修改
This commit is contained in:
WindowBird
parent
43c69bdbad
commit
3eb9419096
|
|
@ -82,16 +82,18 @@
|
|||
<!-- 跟进动态标签页 -->
|
||||
<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 followupList"
|
||||
v-for="(item, index) in group.items"
|
||||
:key="index"
|
||||
@click="handleFollowupClick(item)"
|
||||
>
|
||||
<view class="timeline-dot">
|
||||
<text class="dot-date">{{ formatDate(item.followTime) }}</text>
|
||||
<view class="date-header" v-if="index === 0">
|
||||
<view class="date-dot"></view>
|
||||
<text class="date-text">{{ group.date }}</text>
|
||||
</view>
|
||||
<view class="followup-content">
|
||||
<view class="followup-card">
|
||||
<view class="followup-header">
|
||||
<image
|
||||
class="followup-avatar"
|
||||
|
|
@ -100,17 +102,18 @@
|
|||
/>
|
||||
<view class="followup-user-info">
|
||||
<text class="followup-user-name">{{ item.userName }}</text>
|
||||
<text class="followup-user-role">跟进人</text>
|
||||
<text class="followup-user-role">销售经理</text>
|
||||
</view>
|
||||
<text class="followup-arrow">›</text>
|
||||
</view>
|
||||
<text class="followup-text">{{ item.content }}</text>
|
||||
<view class="followup-meta">
|
||||
<text class="followup-time">跟进时间：{{ formatDateTime(item.followTime) }}</text>
|
||||
<text class="followup-next-time" v-if="item.nextFollowTime">下次跟进：{{ formatDateTime(item.nextFollowTime) }}</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>
|
||||
|
|
@ -259,7 +262,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { getCustomerDetail, getCustomerFollowupList, getCustomerProjects } from '@/common/api';
|
||||
|
||||
|
|
@ -271,6 +274,46 @@ 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) {
|
||||
|
|
@ -397,6 +440,22 @@ const formatDate = (dateTime) => {
|
|||
}
|
||||
};
|
||||
|
||||
// 格式化时间（仅显示时:分）
|
||||
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 {
|
||||
|
|
@ -693,93 +752,118 @@ onMounted(() => {
|
|||
// 跟进动态样式
|
||||
.followup-timeline {
|
||||
position: relative;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.followup-item {
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.date-header {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
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: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.dot-date {
|
||||
font-size: 12px;
|
||||
color: #1976d2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.followup-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 14px;
|
||||
margin-left: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.followup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.followup-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
margin-right: 8px;
|
||||
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: 14px;
|
||||
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: 18px;
|
||||
font-size: 20px;
|
||||
color: #ccc;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.followup-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.followup-meta {
|
||||
.followup-time-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.followup-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.followup-next-time {
|
||||
font-size: 12px;
|
||||
color: #1976d2;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// 项目列表样式
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export const Request = () => {
|
|||
// 初始化请求配置
|
||||
uni.$uv.http.setConfig((config) => {
|
||||
/* config 为默认全局配置*/
|
||||
config.baseURL = 'http://192.168.2.128:4001'; /* 根域名 */
|
||||
config.baseURL = 'http://192.168.1.12:4001'; /* 根域名 */
|
||||
return config
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user