You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
3.3 KiB
158 lines
3.3 KiB
<template>
|
|
<view class="chat-window">
|
|
<scroll-view :scroll-y="true" class="message-list" :scroll-into-view="lastMessageId">
|
|
<view v-for="message in messages" :key="message.id" :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>{{ message.content }}</text>
|
|
</view>
|
|
<u-avatar v-if="message.from === 'me'" :src="myAvatar" size="80"></u-avatar>
|
|
</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: 'https://via.placeholder.com/80',
|
|
theirAvatar: 'https://via.placeholder.com/80',
|
|
newMessage: '',
|
|
messages: [],
|
|
lastMessageId: '',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const userId = options.userId;
|
|
// 动态设置导航栏标题
|
|
uni.setNavigationBarTitle({
|
|
title: `与 ${userId} 的对话`
|
|
});
|
|
this.fetchMessages(userId);
|
|
},
|
|
methods: {
|
|
fetchMessages(userId) {
|
|
// 模拟获取历史消息
|
|
this.messages = [{
|
|
id: 1,
|
|
from: 'them',
|
|
content: '你好！很高兴认识你。'
|
|
},
|
|
{
|
|
id: 2,
|
|
from: 'me',
|
|
content: '你好！我也是。'
|
|
},
|
|
{
|
|
id: 3,
|
|
from: 'them',
|
|
content: '我们下周一开会讨论一下那个项目吧，你觉得怎么样？'
|
|
},
|
|
{
|
|
id: 4,
|
|
from: 'me',
|
|
content: '好啊，没问题。'
|
|
},
|
|
];
|
|
this.scrollToBottom();
|
|
},
|
|
sendMessage() {
|
|
if (this.newMessage.trim() === '') return;
|
|
const newMsg = {
|
|
id: this.messages.length + 1,
|
|
from: 'me',
|
|
content: this.newMessage.trim()
|
|
};
|
|
this.messages.push(newMsg);
|
|
this.newMessage = '';
|
|
this.scrollToBottom();
|
|
},
|
|
scrollToBottom() {
|
|
this.$nextTick(() => {
|
|
if (this.messages.length > 0) {
|
|
this.lastMessageId = `msg-${this.messages[this.messages.length - 1].id}`;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.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> |