|
|
<template>
|
|
|
<view class="chat-window">
|
|
|
<scroll-view
|
|
|
:scroll-y="true"
|
|
|
class="message-list"
|
|
|
:scroll-into-view="lastMessageId"
|
|
|
@scrolltoupper="onScrollToUpper"
|
|
|
:scroll-with-animation="false"
|
|
|
:upper-threshold="50">
|
|
|
<!-- 加载更多提示 -->
|
|
|
<view v-if="loading" class="loading-more">
|
|
|
<u-loading mode="circle" size="20"></u-loading>
|
|
|
<text class="loading-text">加载中...</text>
|
|
|
</view>
|
|
|
|
|
|
<view v-for="(message, index) in messages" :key="message.id">
|
|
|
<!-- 时间分割线 -->
|
|
|
<view v-if="shouldShowTimeDivider(message, index)" class="time-divider">
|
|
|
<text class="time-text">{{ formatTime(message.timestamp) }}</text>
|
|
|
</view>
|
|
|
<!-- 消息内容 -->
|
|
|
<view :id="'msg-' + message.id"
|
|
|
:class="['message-item', message.from === 'me' ? 'my-message' : 'their-message']">
|
|
|
<u-avatar v-if="message.from !== 'me'" :src="theirAvatar" size="80"></u-avatar>
|
|
|
<view class="message-content">
|
|
|
<text class="message-text">{{ message.content }}</text>
|
|
|
</view>
|
|
|
<u-avatar v-if="message.from === 'me'" :src="myAvatar" size="80"></u-avatar>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<view class="input-area">
|
|
|
<u-input v-model="newMessage" placeholder="输入消息..." class="input-field" :border="false" />
|
|
|
<u-button type="primary" size="medium" @click="sendMessage" class="send-button">发送</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
myAvatar: '',
|
|
|
theirAvatar: '',
|
|
|
newMessage: '',
|
|
|
messages: [],
|
|
|
lastMessageId: '',
|
|
|
supplyDemandId: '',
|
|
|
theirUserId: '',
|
|
|
loading: false,
|
|
|
currentPage: 1,
|
|
|
hasMore: true,
|
|
|
pageSize: 20
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
const userId = options.userId;
|
|
|
const userName = options.userName;
|
|
|
const supplyDemandId = options.supplyDemandId;
|
|
|
const supplyDemandTitle = options.supplyDemandTitle;
|
|
|
|
|
|
// 保存供应需求ID
|
|
|
this.supplyDemandId = supplyDemandId;
|
|
|
this.theirUserId = userId;
|
|
|
|
|
|
// 调试：输出当前用户信息
|
|
|
console.log('当前用户信息:', this.$store.state.vuex_user);
|
|
|
|
|
|
// 动态设置导航栏标题
|
|
|
const title = supplyDemandTitle ? `${supplyDemandTitle} - ${userName || userId}` : `与 ${userName || userId} 的对话`;
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: title
|
|
|
});
|
|
|
this.fetchMessages(supplyDemandId);
|
|
|
},
|
|
|
methods: {
|
|
|
fetchMessages(supplyDemandId, page = 1, append = false) {
|
|
|
if (this.loading || (!append && !this.hasMore)) return;
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
|
// 使用正确的API调用方式
|
|
|
this.$u.api.supplyDemandMessageList({
|
|
|
to_user_id: this.theirUserId,
|
|
|
supply_demand_id: supplyDemandId,
|
|
|
page: page,
|
|
|
per_page: this.pageSize
|
|
|
}).then(res => {
|
|
|
console.log('获取消息列表成功:', res);
|
|
|
// 处理返回的消息数据，数据在 res.message.data 中
|
|
|
if (res.message && res.message.data) {
|
|
|
const newMessages = res.message.data.map((item, index) => ({
|
|
|
id: item.id,
|
|
|
from: item.user_id === this.$store.state.vuex_user.id ? 'me' : 'them',
|
|
|
content: item.content,
|
|
|
timestamp: item.created_at,
|
|
|
user: item.user,
|
|
|
to_user: item.to_user
|
|
|
}));
|
|
|
|
|
|
if (append) {
|
|
|
// 上拉加载更多，老消息插入到前面
|
|
|
this.messages.unshift(...newMessages);
|
|
|
} else {
|
|
|
// 首次加载或刷新，按时间正序排列（老消息在前，新消息在后）
|
|
|
this.messages = newMessages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
|
|
|
}
|
|
|
|
|
|
// 检查是否还有更多数据
|
|
|
this.hasMore = res.message.current_page < res.message.last_page;
|
|
|
this.currentPage = res.message.current_page;
|
|
|
|
|
|
// 设置头像
|
|
|
if (this.messages.length > 0) {
|
|
|
const firstMessage = this.messages[0];
|
|
|
if (firstMessage.from === 'me') {
|
|
|
this.myAvatar = firstMessage.user?.headimgurl || '';
|
|
|
this.theirAvatar = firstMessage.to_user?.headimgurl || '';
|
|
|
} else {
|
|
|
this.myAvatar = firstMessage.to_user?.headimgurl || '';
|
|
|
this.theirAvatar = firstMessage.user?.headimgurl || '';
|
|
|
}
|
|
|
|
|
|
// 更新导航栏标题，使用实际的用户名
|
|
|
const theirUser = firstMessage.from === 'me' ? firstMessage.to_user : firstMessage.user;
|
|
|
if (theirUser) {
|
|
|
const displayName = theirUser.nickname || theirUser.name || `用户${theirUser.id}`;
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: `与 ${displayName} 的对话`
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (!append) {
|
|
|
this.scrollToBottom();
|
|
|
}
|
|
|
}
|
|
|
}).catch(err => {
|
|
|
console.error('获取消息列表失败:', err);
|
|
|
}).finally(() => {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
sendMessage() {
|
|
|
if (this.newMessage.trim() === '') return;
|
|
|
|
|
|
const messageContent = this.newMessage.trim();
|
|
|
this.newMessage = '';
|
|
|
|
|
|
// 生成临时ID（使用时间戳确保唯一性）
|
|
|
const tempId = Date.now();
|
|
|
|
|
|
// 先添加到本地消息列表
|
|
|
const newMsg = {
|
|
|
id: tempId,
|
|
|
from: 'me',
|
|
|
content: messageContent,
|
|
|
timestamp: new Date().toISOString(),
|
|
|
user: this.$store.state.vuex_user,
|
|
|
to_user: null
|
|
|
};
|
|
|
// 新消息添加到列表末尾（最新消息）
|
|
|
this.messages.push(newMsg);
|
|
|
this.scrollToBottom();
|
|
|
|
|
|
// 调用发送消息API
|
|
|
this.$u.api.supplyDemandSendMessage({
|
|
|
supply_demand_id: this.supplyDemandId,
|
|
|
content: messageContent,
|
|
|
to_user_id: this.theirUserId
|
|
|
}).then(res => {
|
|
|
console.log('发送消息成功:', res);
|
|
|
// 发送成功后，更新临时消息的ID为服务器返回的真实ID
|
|
|
if (res && res.id) {
|
|
|
const lastMessage = this.messages[this.messages.length - 1];
|
|
|
if (lastMessage.id === tempId) {
|
|
|
lastMessage.id = res.id;
|
|
|
}
|
|
|
}
|
|
|
}).catch(err => {
|
|
|
console.error('发送消息失败:', err);
|
|
|
// 发送失败时，可以从消息列表中移除临时消息
|
|
|
this.messages = this.messages.filter(msg => msg.id !== tempId);
|
|
|
// 可选：提示用户发送失败
|
|
|
uni.showToast({
|
|
|
title: '发送失败，请重试',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
scrollToBottom() {
|
|
|
this.$nextTick(() => {
|
|
|
if (this.messages.length > 0) {
|
|
|
// 滚动到最新消息（列表末尾）
|
|
|
this.lastMessageId = `msg-${this.messages[this.messages.length - 1].id}`;
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
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'
|
|
|
})}`;
|
|
|
}
|
|
|
|
|
|
// 其他显示完整日期和时间
|
|
|
return date.toLocaleString('zh-CN', {
|
|
|
month: '2-digit',
|
|
|
day: '2-digit',
|
|
|
hour: '2-digit',
|
|
|
minute: '2-digit'
|
|
|
});
|
|
|
},
|
|
|
shouldShowTimeDivider(message, index) {
|
|
|
// 第一条消息总是显示时间
|
|
|
if (index === 0) return true;
|
|
|
|
|
|
const currentTime = new Date(message.timestamp);
|
|
|
const prevTime = new Date(this.messages[index - 1].timestamp);
|
|
|
|
|
|
// 如果时间间隔超过5分钟，显示时间分割线
|
|
|
const timeDiff = Math.abs(currentTime - prevTime);
|
|
|
return timeDiff > 5 * 60 * 1000; // 5分钟
|
|
|
},
|
|
|
onScrollToUpper() {
|
|
|
// 上拉加载更多历史消息
|
|
|
if (this.hasMore && !this.loading) {
|
|
|
this.fetchMessages(this.supplyDemandId, this.currentPage + 1, true);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.chat-window {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 100vh;
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.message-list {
|
|
|
flex: 1;
|
|
|
padding: 20rpx;
|
|
|
overflow-y: auto;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.message-item {
|
|
|
display: flex;
|
|
|
margin-bottom: 30rpx;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
.my-message {
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
.message-content {
|
|
|
background-color: #409eff;
|
|
|
color: #fff;
|
|
|
border-radius: 20rpx 20rpx 4rpx 20rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.their-message {
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
.message-content {
|
|
|
background-color: #fff;
|
|
|
color: #333;
|
|
|
border-radius: 20rpx 20rpx 20rpx 4rpx;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
padding: 20rpx 25rpx;
|
|
|
max-width: 70%;
|
|
|
font-size: 30rpx;
|
|
|
line-height: 1.6;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.message-text {
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.message-time {
|
|
|
font-size: 22rpx;
|
|
|
color: #999;
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
|
|
|
.time-divider {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
margin: 30rpx 0 20rpx 0;
|
|
|
}
|
|
|
|
|
|
.time-text {
|
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
|
color: #999;
|
|
|
font-size: 24rpx;
|
|
|
padding: 8rpx 16rpx;
|
|
|
border-radius: 20rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.loading-more {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding: 20rpx 0;
|
|
|
}
|
|
|
|
|
|
.loading-text {
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.input-area {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 20rpx;
|
|
|
background-color: #fff;
|
|
|
border-top: 1rpx solid #e0e0e0;
|
|
|
}
|
|
|
|
|
|
.input-field {
|
|
|
flex: 1;
|
|
|
margin-right: 20rpx;
|
|
|
background-color: #f5f5f5;
|
|
|
border-radius: 12rpx;
|
|
|
padding: 0 20rpx;
|
|
|
}
|
|
|
|
|
|
.send-button {
|
|
|
height: 70rpx;
|
|
|
line-height: 70rpx;
|
|
|
}
|
|
|
</style> |
