416 lines
11 KiB
Vue
416 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="container" v-if="isLogin">
|
|||
|
|
<!-- <view class="chatBg" v-if="!isShow && conversation && conversation.userProfile" @click="nameTo">
|
|||
|
|
<image v-if="conversation.userProfile" :src="conversation.userProfile.avatar || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'"></image>
|
|||
|
|
<view class="chatUser">
|
|||
|
|
<text>{{ conversation.userProfile.nick }}</text>
|
|||
|
|
<text>23岁</text>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- 小程序视频通话 -->
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<tuicalling ref="TUICalling" id="TUICalling-component" :config="config"></tuicalling>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID -->
|
|||
|
|
<!-- <view class="tui-chatroom-navigatorbar" v-if="conversation.type === 'GROUP'"></view> -->
|
|||
|
|
<view class="group-profile">
|
|||
|
|
<TUI-group-profile id="groip-profile" v-if="isShow" :conversation="conversation"></TUI-group-profile>
|
|||
|
|
</view>
|
|||
|
|
<view class="message-list" @tap="triggerClose">
|
|||
|
|
<TUI-message-list ref="messageList" id="message-list" :conversation="conversation"></TUI-message-list>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-box" v-if="videoPlay" @tap.stop="stopVideoHander">
|
|||
|
|
<video class="video-message" v-if="videoPlay" :src="videoMessage.payload.videoUrl" :poster="videoMessage.payload.snapshotUrl" object-fit="cover" error="videoError" autoplay="true" direction="0"></video>
|
|||
|
|
</view>
|
|||
|
|
<view class="message-input" v-if="showChat">
|
|||
|
|
<TUI-message-input ref="messageInput" id="message-input" :conversation="conversation" @sendMessage="sendMessage" @handleCall="handleCall"></TUI-message-input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import TUIMessageList from '../components/tui-chat/message-list/index';
|
|||
|
|
import TUIMessageInput from '../components/tui-chat/message-input/index';
|
|||
|
|
import TUIGroupProfile from '../components/tui-group/group-profile/index';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
conversationName: '',
|
|||
|
|
conversation: {},
|
|||
|
|
messageList: [],
|
|||
|
|
isShow: false,
|
|||
|
|
showChat: true,
|
|||
|
|
conversationID: '',
|
|||
|
|
videoPlay: false,
|
|||
|
|
videoMessage: {},
|
|||
|
|
config: {
|
|||
|
|
sdkAppID: uni.getStorageSync('sdkAppID'),
|
|||
|
|
userID: uni.getStorageSync('userID'),
|
|||
|
|
userSig: uni.getStorageSync('userSig'),
|
|||
|
|
type: 1,
|
|||
|
|
tim: null
|
|||
|
|
},
|
|||
|
|
friendList: '',
|
|||
|
|
options: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
components: {
|
|||
|
|
TUIMessageList,
|
|||
|
|
TUIMessageInput,
|
|||
|
|
TUIGroupProfile
|
|||
|
|
},
|
|||
|
|
props: {},
|
|||
|
|
created() {
|
|||
|
|
uni.$on('videoPlayerHandler', value => {
|
|||
|
|
this.videoPlay = value.isPlay;
|
|||
|
|
this.videoMessage = value.message;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
isLogin() {
|
|||
|
|
return this.$store.state.isLogin;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
isLogin(val) {
|
|||
|
|
if (val) {
|
|||
|
|
this.getMsg();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页 面加载
|
|||
|
|
*/
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.options = options;
|
|||
|
|
if (this.isLogin) {
|
|||
|
|
this.getMsg();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
this.$refs.TUICalling.destroyed();
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getMsg() {
|
|||
|
|
this.getFriendList();
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
// 初始化 小程序视频通话 TUICalling
|
|||
|
|
this.config = {
|
|||
|
|
sdkAppID: uni.getStorageSync('sdkAppID'),
|
|||
|
|
userID: uni.getStorageSync('userInfo').userID,
|
|||
|
|
userSig: uni.getStorageSync('userInfo').userSig
|
|||
|
|
};
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$refs.TUICalling.init();
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
const { conversationID } = this.options;
|
|||
|
|
this.conversationID = conversationID;
|
|||
|
|
uni.$TUIKit
|
|||
|
|
.setMessageRead({
|
|||
|
|
conversationID
|
|||
|
|
})
|
|||
|
|
.then(() => {});
|
|||
|
|
uni.$TUIKit.getConversationProfile(conversationID).then(res => {
|
|||
|
|
const { conversation } = res.data;
|
|||
|
|
|
|||
|
|
this.conversation = conversation;
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: this.getConversationName(conversation)
|
|||
|
|
});
|
|||
|
|
this.setData({
|
|||
|
|
conversationName: this.getConversationName(conversation),
|
|||
|
|
isShow: conversation.type === 'GROUP'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
nameTo() {
|
|||
|
|
this.pageUrl();
|
|||
|
|
},
|
|||
|
|
pageUrl() {
|
|||
|
|
const num = this.conversationID.slice(0, 3);
|
|||
|
|
const list = this.friendList;
|
|||
|
|
// 跳转好友信息页面
|
|||
|
|
if (num === 'C2C') {
|
|||
|
|
const ID = this.conversationID.substring(3);
|
|||
|
|
const id = list.some(item => item.userID == ID);
|
|||
|
|
if (id === true) {
|
|||
|
|
let promise = uni.$TUIKit.getFriendProfile({
|
|||
|
|
userIDList: [ID]
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(function (imResponse) {
|
|||
|
|
const { friendList, failureUserIDList } = imResponse.data;
|
|||
|
|
friendList.forEach(friend => {
|
|||
|
|
// Friend 对象
|
|||
|
|
});
|
|||
|
|
// 失败的 userIDList
|
|||
|
|
failureUserIDList.forEach(item => {
|
|||
|
|
const { userID, code, message } = item;
|
|||
|
|
});
|
|||
|
|
var id = friendList[0].userID;
|
|||
|
|
var avatar = friendList[0].profile.avatar;
|
|||
|
|
var remark = friendList[0].remark;
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/im/information/information?id=' + id + '&url=' + avatar + '&remark=' + remark + '&index=1'
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(function (imError) {
|
|||
|
|
console.warn('getFriendProfile error:', imError); // 获取失败
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
let promise = uni.$TUIKit.getUserProfile({
|
|||
|
|
userIDList: [ID] // 请注意：即使只拉取一个用户的资料，也需要用数组类型，例如：userIDList: ['user1']
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(function (imResponse) {
|
|||
|
|
// 存储用户资料的数组 - [Profile]
|
|||
|
|
const userID = imResponse.data;
|
|||
|
|
for (var i = 0; i < userID.length; i++) {
|
|||
|
|
var id = userID[i].userID;
|
|||
|
|
var avatar = userID[i].avatar;
|
|||
|
|
var nick = userID[i].nick;
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/im/information/information?id=' + id + '&url=' + avatar + '&nick=' + nick + '&index=2'
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(function (imError) {
|
|||
|
|
console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 跳转群聊信息页面
|
|||
|
|
if (num === 'GRO') {
|
|||
|
|
const group = this.conversationID.substring(5);
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/im/information/groupInfo?id=' + group
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onNavigationBarButtonTap() {
|
|||
|
|
this.pageUrl();
|
|||
|
|
},
|
|||
|
|
stopVideoHander() {
|
|||
|
|
this.videoPlay = false;
|
|||
|
|
},
|
|||
|
|
getFriendList() {
|
|||
|
|
let promise = uni.$TUIKit.getFriendList();
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
const friendList = imResponse.data; // 好友列表
|
|||
|
|
this.friendList = friendList;
|
|||
|
|
})
|
|||
|
|
.catch(function (imError) {
|
|||
|
|
console.warn('getFriendList error:', imError); // 获取好友列表失败的相关信息
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getConversationName(conversation) {
|
|||
|
|
if (conversation.type === '@TIM#SYSTEM') {
|
|||
|
|
this.setData({
|
|||
|
|
showChat: false
|
|||
|
|
});
|
|||
|
|
return '系统通知';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (conversation.type === 'C2C') {
|
|||
|
|
return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (conversation.type === 'GROUP') {
|
|||
|
|
return conversation.groupProfile.name || conversation.groupProfile.groupID;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleCall(val) {
|
|||
|
|
console.log(val.detail.userID, '通话id');
|
|||
|
|
|
|||
|
|
console.log(val.detail.type, '通话类型');
|
|||
|
|
// 小程序通话
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
this.$refs.TUICalling.call({
|
|||
|
|
userID: val.detail.userID,
|
|||
|
|
type: val.detail.type
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// APP通话
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
console.log('callMediaType', Number(val.detail.type));
|
|||
|
|
uni.$TUICallKit.call(
|
|||
|
|
{
|
|||
|
|
userID: val.detail.userID,
|
|||
|
|
callMediaType: Number(val.detail.type)
|
|||
|
|
},
|
|||
|
|
res => {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
console.log('call success');
|
|||
|
|
} else {
|
|||
|
|
console.log(`${res.msg}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
sendMessage(event) {
|
|||
|
|
// 将自己发送的消息写进消息列表里面
|
|||
|
|
this.$refs.messageList.updateMessageList(event.detail.message);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
triggerClose() {
|
|||
|
|
if (this.showChat) {
|
|||
|
|
this.$refs.messageInput.handleClose();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goBack() {
|
|||
|
|
const pages = getCurrentPages(); // 当前页面栈
|
|||
|
|
|
|||
|
|
if (pages[pages.length - 2].route === '/pages/im/conversation/create-conversation/create' || pages[pages.length - 2].route === 'pages/TUI-Group/create-group/create' || pages[pages.length - 2].route === 'pages/TUI-Group/join-group/join') {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 2
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.$TUIKit
|
|||
|
|
.setMessageRead({
|
|||
|
|
conversationID: this.conversationID
|
|||
|
|
})
|
|||
|
|
.then(() => {});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShareAppMessage() {}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
|
|||
|
|
.chatBg {
|
|||
|
|
position: fixed;
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
top: 120rpx;
|
|||
|
|
/* #endif */
|
|||
|
|
/* #ifdef MP-WEIXIN || APP-PLUS */
|
|||
|
|
top: 20rpx;
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
width: 90%;
|
|||
|
|
background: linear-gradient(to right, #6665f6, #fa709a);
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
display: flex;
|
|||
|
|
left: 50%;
|
|||
|
|
margin-left: -45%;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
z-index: 99;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 100rpx;
|
|||
|
|
}
|
|||
|
|
.chatUser {
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
position: relative;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-chatroom-navigatorbar {
|
|||
|
|
position: relative;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
height: 90rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-chatroom-navigatorbar-back {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
left: 24rpx;
|
|||
|
|
bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.conversation-title {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 350rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
line-height: 56rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
z-index: 100;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 200rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100vw;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-input {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calling {
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 199;
|
|||
|
|
top: 0;
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
top: calc(88rpx + constant(safe-area-inset-top));
|
|||
|
|
top: calc(88rpx + env(safe-area-inset-top));
|
|||
|
|
/* #endif */
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group-profile {
|
|||
|
|
z-index: 1111;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container-box {
|
|||
|
|
position: fixed;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
top: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-message {
|
|||
|
|
width: 90vw;
|
|||
|
|
height: 300px;
|
|||
|
|
}
|
|||
|
|
</style>
|