客户详细-跟进动态样式修改

pages/customer/detail/index.vue

@@ -82,35 +82,38 @@
       <!-- 跟进动态标签页 -->
       <view class="tab-content" v-if="activeTab === 'followup'">
         <view class="followup-timeline">
-          <view 
+          <template v-for="(group, groupIndex) in groupedFollowupList" :key="groupIndex">
-            class="followup-item" 
+            <view 
-            v-for="(item, index) in followupList" 
+              class="followup-item" 
-            :key="index"
+              v-for="(item, index) in group.items" 
-            @click="handleFollowupClick(item)"
+              :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>
+                <view class="date-dot"></view>
-            <view class="followup-content">
+                <text class="date-text">{{ group.date }}</text>
-              <view class="followup-header">
+              </view>
-                <image 
+              <view class="followup-card">
-                  class="followup-avatar" 
+                <view class="followup-header">
-                  :src="item.userAvatar || '/static/default-avatar.png'"
+                  <image 
-                  mode="aspectFill"
+                    class="followup-avatar" 
-                />
+                    :src="item.userAvatar || '/static/default-avatar.png'"
-                <view class="followup-user-info">
+                    mode="aspectFill"
-                  <text class="followup-user-name">{{ item.userName }}</text>
+                  />
-                  <text class="followup-user-role">跟进人</text>
+                  <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>
-                <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>
             </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;
-  background-color: #fff;
+  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;
+  padding: 14px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  margin-left: 16px;
-}
+  position: relative;
-
-.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;
 }
 
 .followup-header {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .followup-avatar {
-  width: 32px;
+  width: 36px;
-  height: 32px;
+  height: 36px;
-  border-radius: 16px;
+  border-radius: 18px;
-  margin-right: 8px;
+  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;
+  line-height: 1.6;
-  margin-bottom: 8px;
+  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;
-}
+  line-height: 1.2;
-
-.followup-next-time {
-  font-size: 12px;
-  color: #1976d2;
 }
 
 // 项目列表样式

utils/request/index.js

@@ -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
     })