OfficeSystem/components/customer-detail/FollowupTab.vue

<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>