131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
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.id">
|
|
<view 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.contact_name }}</text>
|
|
<text class="record-time">{{ record.update_time }}</text>
|
|
</view>
|
|
</view>
|
|
</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,
|
|
itemObj: {},
|
|
};
|
|
},
|
|
onLoad() {
|
|
},
|
|
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) => {
|
|
this.recordsList = res.msg_list.filter(item => item.client_id_one !== item.client_id_two)
|
|
})
|
|
} catch (error) {
|
|
console.error('加载聊天记录失败', error);
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
// 格式化时间
|
|
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) {
|
|
console.log("🚀 ~ goToChatPage ~ record:", record)
|
|
if (record.client_id_two == uni.getStorageSync('openId')) {
|
|
this.itemObj = {
|
|
...record.one,
|
|
bind_id: record.id
|
|
}
|
|
} else {
|
|
this.itemObj = {
|
|
...record.one,
|
|
bind_id: record.id
|
|
}
|
|
}
|
|
console.log("🚀 ~ goToChatPage ~ itemObj:", this.itemObj)
|
|
|
|
// 跳转到聊天页面
|
|
uni.navigateTo({
|
|
url: '/packages/customerService/index/index?item=' + JSON.stringify(this.itemObj)
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |