121 lines
3.3 KiB
Vue
121 lines
3.3 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 :src="getAvatarUrl(record)" class="record-avatar" 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 { menuButtonInfo, picUrl, request } from '../../../utils'
|
|
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
|
|
}
|
|
},
|
|
getAvatarUrl(record){
|
|
if(record.client_id_one == uni.getStorageSync('openId')){
|
|
return record.two.avatar ? picUrl + record.two.avatar : 'http://localhost:8080/defaultTx.png'
|
|
}else{
|
|
return record.one.avatar ? picUrl + record.one.avatar : 'http://localhost:8080/defaultTx.png'
|
|
}
|
|
},
|
|
// 格式化时间
|
|
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){
|
|
|
|
this.$set(record, 'type', 2)
|
|
// 跳转到聊天页面
|
|
uni.navigateTo({
|
|
url: '/packages/customerService/index/index?item=' + JSON.stringify(record)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |