uniapp-ZHSQ/packages/customerService/chattingRecords/index.vue

<template>
  <view class="chatting-records-container">

    <!-- 聊天记录列表 -->
    <view class="records-list">
      <view v-if="isLoading" class="loading">加载中...</view>
      <view v-else-if="recordsList.length === 0" class="empty-records">暂无聊天记录</view>
      <view v-else>
        <view v-for="record in recordsList" :key="record.mchId" class="record-item" @tap="goToChatPage(record)">
          <image class="record-avatar" :src="record.avatar || '/static/logo.png'" mode="aspectFill"></image>
          <view class="record-info">
            <view class="record-title-row">
              <text class="record-title">{{ record.title }}</text>
              <text class="record-time">{{ formatTime(record.lastMsgTime) }}</text>
            </view>
            <text class="record-last-msg">{{ record.lastMsg || '暂无消息' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/customerService";

export default {
  data() {
    return {
      // 聊天记录列表
      recordsList: [],
      // 是否加载中
      isLoading: false,
      page_num: 1,
      page_size: 10,
    };
  },
  onLoad() {
    // 加载聊天记录列表
    this.loadChattingRecords();
  },
  onShow() {
    // 页面显示时重新加载聊天记录
    this.loadChattingRecords();
  },
  methods: {
    // 加载聊天记录列表
    async loadChattingRecords() {
      try {
        this.isLoading = true;

        // 获取聊天记录列表
        request(apiArr.csGetMsgList, "POST", {
          open_id: uni.getStorageSync("openId"),
          page_num: this.page_num,
          page_size: this.page_size,
        }).then((res) => {
          console.log("🚀 ~ loadChattingRecords ~ res:", res)
        })

        // const response = await this.$http.get(apiArr.csGetMsgList);

        // if (response.success && response.data && response.data.list) {
        //   this.recordsList = response.data.list.map(item => ({
        //     mchId: item.mchId,
        //     title: item.title || `客服${item.mchId}`,
        //     avatar: item.avatar,
        //     lastMsg: item.lastMsg,
        //     lastMsgTime: item.lastMsgTime || Date.now(),
        //     unreadCount: item.unreadCount || 0
        //   }));
        // } else {
        //   // 使用模拟数据
        //   this.recordsList = this.getMockRecords();
        // }
      } catch (error) {
        console.error('加载聊天记录失败', error);
        // 使用模拟数据
        this.recordsList = this.getMockRecords();
      } finally {
        this.isLoading = false;
      }
    },

    // 获取模拟数据
    getMockRecords() {
      return [
        {
          mchId: '1001',
          title: '客服小明',
          avatar: '/static/logo.png',
          lastMsg: '您好，请问有什么可以帮助您的吗？',
          lastMsgTime: Date.now() - 30 * 60 * 1000,
          unreadCount: 0
        },
        {
          mchId: '1002',
          title: '客服小丽',
          avatar: '/static/logo.png',
          lastMsg: '您的问题我已经记录，稍后会有专人与您联系。',
          lastMsgTime: Date.now() - 2 * 60 * 60 * 1000,
          unreadCount: 1
        },
        {
          mchId: '1003',
          title: '客服小张',
          avatar: '/static/logo.png',
          lastMsg: '感谢您的咨询，还有其他问题吗？',
          lastMsgTime: Date.now() - 5 * 60 * 60 * 1000,
          unreadCount: 0
        }
      ];
    },

    // 格式化时间
    formatTime(time) {
      const date = new Date(time);
      const now = new Date();
      const diff = now - date;

      // 小于1分钟显示"刚刚"
      if (diff < 60 * 1000) {
        return '刚刚';
      }

      // 小于1小时显示"XX分钟前"
      if (diff < 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 1000)) + '分钟前';
      }

      // 小于24小时显示"XX小时前"
      if (diff < 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 60 * 1000)) + '小时前';
      }

      // 小于7天显示"XX天前"
      if (diff < 7 * 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (24 * 60 * 60 * 1000)) + '天前';
      }

      // 其他情况显示具体日期
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return month + '-' + day;
    },

    // 跳转到聊天页面
    goToChatPage(record) {
      // 存储当前聊天对象的信息，供聊天页面使用
      uni.setStorageSync('currentChatTarget', record);

      // 跳转到聊天页面
      uni.navigateTo({
        url: '/packages/customerService/index/index?mchId=' + record.mchId
      });
    }
  }
};
</script>

<style>
@import url("./index.css");
</style>