260 lines
9.2 KiB
Plaintext
260 lines
9.2 KiB
Plaintext
<template>
|
||
<view class="chat">
|
||
<!-- chat -->
|
||
<list class="body" :show-scrollbar="false">
|
||
<cell class="cell" v-for="(item, index) in messages" :key="index">
|
||
<view class="time">
|
||
<text class="text">{{ customCN(item.sentTime) }}</text>
|
||
</view>
|
||
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||
<image class="avatar" :src="userInfo.portraitUrl" mode="aspectFill"
|
||
@click="showUser(targetId, item.messageDirection)"></image>
|
||
<view class="msg">
|
||
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
|
||
:msg="item.content" />
|
||
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
|
||
:msg="item.content" />
|
||
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
|
||
:msg="item.content" />
|
||
<view class="state" v-if="item.messageDirection == 1">
|
||
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</cell>
|
||
<cell class="cell-footer" ref="chatBottom"></cell>
|
||
</list>
|
||
<!-- footer -->
|
||
<view class="footer">
|
||
<view class="msg-type" @click="changeMessageType">
|
||
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
|
||
</image>
|
||
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
|
||
</image>
|
||
</view>
|
||
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
|
||
@success="getMessageList" />
|
||
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
|
||
@success="getMessageList" />
|
||
<view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
|
||
<image class="icon" src="@/static/icon/popups-icon.png"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 弹出层 -->
|
||
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
|
||
@success="() => {showPopups = false, getMessageList()}"></sent-popups>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
timeCustomCN
|
||
} from '@/utils/filters.js'
|
||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||
import im from '@/utils/im/index.js'
|
||
import showVoice from '../components/showVoice'
|
||
import showImage from '../components/showImage'
|
||
import showText from '../components/showText'
|
||
import sentText from '../components/sentText'
|
||
import sentVoice from '../components/sentVoice'
|
||
import sentPopups from '../components/sentPopups'
|
||
|
||
const ChatList = uni.requireNativePlugin('dom')
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
targetId: '',
|
||
messages: [],
|
||
conversationType: 1,
|
||
userInfo: {
|
||
name: '',
|
||
userId: '',
|
||
portraitUrl: ''
|
||
},
|
||
chatType: 1, // 0 语音，1 文本
|
||
showPopups: false,
|
||
inputFocus: false // 输入框是否获得了焦点
|
||
}
|
||
},
|
||
components: {
|
||
showVoice,
|
||
showImage,
|
||
showText,
|
||
sentText,
|
||
sentVoice,
|
||
sentPopups
|
||
},
|
||
onLoad(e) {
|
||
this.targetId = e.targetId
|
||
this.conversationType = e.conversationType // 会话类型
|
||
this.userInfo = this.$store.getters.userInfo(this.targetId)
|
||
|
||
console.log(this.userInfo);
|
||
// 获取消息列表
|
||
this.initMessageList()
|
||
|
||
uni.setNavigationBarTitle({
|
||
title: this.userInfo.name
|
||
})
|
||
// 监听消息已读状态
|
||
uni.$on('onReadReceiptReceived', (data) => {
|
||
if (data.targetId == this.targetId) {
|
||
this.getMessageList()
|
||
}
|
||
})
|
||
// 监听收到新消息，判断是否是当前会话，更新会话内容
|
||
uni.$on('onReceiveMessage', (msg) => {
|
||
if (msg.targetId == this.targetId) {
|
||
this.initMessageList()
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
initMessageList() {
|
||
this.getMessageList()
|
||
// 清理当前会话，未读消息数量
|
||
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
|
||
// 发送消息已读状态给对方
|
||
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
|
||
// 更新badge提醒数量
|
||
im.setNotifyBadge()
|
||
},
|
||
customCN(val) {
|
||
return timeCustomCN(val)
|
||
},
|
||
// 切换聊天类型，语音/文本
|
||
changeMessageType() {
|
||
this.chatType = this.chatType === 1 ? 0 : 1
|
||
},
|
||
// 获取消息列表
|
||
getMessageList() {
|
||
im.getMessageList(
|
||
this.conversationType,
|
||
this.targetId,
|
||
new Date().getTime(),
|
||
10,
|
||
true,
|
||
(messages) => {
|
||
console.log('获取到的消息', messages);
|
||
this.messages = messages.reverse()
|
||
this.scrollBottom()
|
||
})
|
||
},
|
||
// 展示好友信息, type 1 是自己， 2 是对方
|
||
showUser(targetId, type) {
|
||
uni.navigateTo({
|
||
url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
|
||
'/pages/im/friends/info?targetId=' + targetId
|
||
})
|
||
},
|
||
// 滚动到底部
|
||
scrollBottom(type) {
|
||
if (type === 'msgPopups') {
|
||
this.showPopups = !this.showPopups
|
||
}
|
||
setTimeout(() => {
|
||
let el = this.$refs.chatBottom
|
||
ChatList.scrollToElement(el, {
|
||
offset: 0,
|
||
animated: false
|
||
})
|
||
}, 50)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 窗口 */
|
||
.chat {
|
||
background: $window-color;
|
||
flex: 1;
|
||
|
||
.body {
|
||
flex: 1;
|
||
|
||
.cell {
|
||
padding: 10rpx 30rpx;
|
||
|
||
.time {
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
|
||
.text {
|
||
background: #fff;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 40rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.cell-item {
|
||
width: 690rpx;
|
||
justify-content: flex-start;
|
||
|
||
|
||
&.left {
|
||
flex-direction: row;
|
||
}
|
||
|
||
&.right {
|
||
flex-direction: row-reverse;
|
||
|
||
.state {
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
.avatar {
|
||
width: 78rpx;
|
||
height: 78rpx;
|
||
background-color: white;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.msg {
|
||
margin: 0 20rpx;
|
||
|
||
.state {
|
||
padding-top: 10rpx;
|
||
|
||
.state-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cell-footer {
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
background: white;
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
|
||
.msg-type {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
|
||
.icon {
|
||
margin: 5rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|