sz-kjsxy-wx-new/packages/chat/index.vue

<template>
	<view class="chat-list-container">
		<view v-if="chatList.length === 0" class="empty-state">
			<u-empty text="暂无聊天记录" mode="chat"></u-empty>
		</view>
		<view v-else v-for="chat in chatList" :key="chat.id" class="chat-item" @click="goToChat(chat.id)">
			<u-avatar :src="chat.user.avatar" size="90" loading-icon="account"></u-avatar>
			<view class="chat-content">
				<view class="content-header">
					<text class="user-name">{{ chat.user.name }}</text>
					<text class="last-time">{{ chat.lastMessage.time }}</text>
				</view>
				<view class="content-body">
					<text class="last-message">{{ chat.lastMessage.content }}</text>
					<u-badge :is-dot="true" type="error" v-if="chat.unreadCount > 0"></u-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatList: []
			}
		},
		onLoad() {
			this.fetchDialogues();
		},
		methods: {
			fetchDialogues() {
				this.$u.api.supplyDemandDialogues().then(res => {
					console.log('获取会话列表成功:', res);
					if (res.dialogue && res.dialogue.data) {
						this.chatList = res.dialogue.data.map(item => {
							// 判断对方用户信息
							const currentUserId = this.$store.state.vuex_user.id;
							const otherUser = item.user_id === currentUserId ? item.to_user : item.user;
							
							return {
								id: item.id,
								user: {
									id: otherUser.id,
									name: otherUser.nickname || otherUser.name || otherUser.username || `用户${otherUser.id}`,
									avatar: otherUser.headimgurl || ''
								},
								lastMessage: {
									content: item.last_content || '暂无消息',
									time: this.formatTime(item.last_datetime || item.updated_at)
								},
								unreadCount: 0, // 暂时设为0，如果有未读消息字段可以替换
								supplyDemandId: item.supply_demand_id,
								supplyDemandTitle: item.supply_demand?.title || ''
							};
						});
					}
				}).catch(err => {
					console.error('获取会话列表失败:', err);
				});
			},
			goToChat(id) {
				// 找到对应的会话信息
				const chat = this.chatList.find(item => item.id === id);
				if (chat) {
					uni.navigateTo({
						url: `/packages/chat/chatWindow?userId=${chat.user.id}&userName=${chat.user.name}&supplyDemandId=${chat.supplyDemandId}`
					});
				}
			},
			formatTime(timestamp) {
				if (!timestamp) return '';
				
				const date = new Date(timestamp);
				const now = new Date();
				const diff = now - date;
				
				// 今天的消息只显示时间
				if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
					return date.toLocaleTimeString('zh-CN', { 
						hour: '2-digit', 
						minute: '2-digit' 
					});
				}
				
				// 昨天的消息显示"昨天 + 时间"
				if (diff < 48 * 60 * 60 * 1000 && date.getDate() === now.getDate() - 1) {
					return `昨天 ${date.toLocaleTimeString('zh-CN', { 
						hour: '2-digit', 
						minute: '2-digit' 
					})}`;
				}
				
				// 一周内的消息显示星期
				if (diff < 7 * 24 * 60 * 60 * 1000) {
					const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
					return weekdays[date.getDay()];
				}
				
				// 其他显示完整日期
				return date.toLocaleDateString('zh-CN', { 
					month: '2-digit', 
					day: '2-digit'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-list-container {
		background-color: #fff;
	}

	.chat-item {
		display: flex;
		align-items: center;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.chat-content {
		flex: 1;
		margin-left: 20rpx;
		overflow: hidden;
	}

	.content-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: 500;
	}

	.last-time {
		font-size: 24rpx;
		color: #999;
	}

	.content-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.last-message {
		font-size: 28rpx;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.empty-state {
		padding: 100rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>