622 lines
17 KiB
Vue
622 lines
17 KiB
Vue
<template>
|
||
<view class="container-conversation">
|
||
<!-- 顶部适配 -->
|
||
<u-navbar height="0">
|
||
<view class="u-nav-slot" slot="left"></view>
|
||
</u-navbar>
|
||
<!-- 标题栏 -->
|
||
<view class="topIcon">
|
||
消息
|
||
<view class="msgRt">
|
||
<!-- <view class="msgBox" @click="$navigateTo('/pages/im/application/application')">
|
||
<u-icon name="man-add-fill" color="#A6ADBB" size="22"></u-icon>
|
||
<text class="tips" v-if="unreadCount">{{unreadCount>99?'99+':unreadCount}}</text>
|
||
</view> -->
|
||
<view>
|
||
<u-icon @click="addBtn" name="plus-people-fill" color="#A6ADBB" size="22"></u-icon>
|
||
<view class="boxPopBg" v-if="false">
|
||
<text>
|
||
<u-icon name="photo" color="#fff"></u-icon>
|
||
</text>
|
||
<text>
|
||
<u-icon name="photo" color="#fff"></u-icon>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-search placeholder="搜索" v-model="searchKey" :show-action="false" v-if="false"></u-search>
|
||
<view class="imgBar" @click="handleRouter" v-if="false">
|
||
<view>
|
||
<image src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/imgBar/haoyou.png"></image>
|
||
<text>粉丝</text>
|
||
</view>
|
||
<view>
|
||
<image src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/imgBar/zan.png"></image>
|
||
<text>赞</text>
|
||
</view>
|
||
<view>
|
||
<image src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/imgBar/shafa.png"></image>
|
||
<text>动态</text>
|
||
</view>
|
||
<view>
|
||
<image src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/imgBar/chakan.png"></image>
|
||
<text>系统通知</text>
|
||
</view>
|
||
</view>
|
||
<!-- 通知 -->
|
||
<view class="notice" v-if="false">
|
||
<image src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/imgBar/tixing.png"></image>
|
||
<view>
|
||
开启消息通知
|
||
<text>第一时间收到Ta的私信消息</text>
|
||
</view>
|
||
<text @click="handleRouter">去开启</text>
|
||
</view>
|
||
<!-- 消息 -->
|
||
<view class="scroll-box">
|
||
<view class="uni-list margintop-bar">
|
||
<view v-if="conversationList.length > 0">
|
||
<u-swipe-action>
|
||
<u-swipe-action-item :threshold="60" :options="item.isPinned ? (item.messageRemindType == 'AcceptNotNotify' ? options4 : options1) : item.messageRemindType == 'AcceptNotNotify' ? options3 : options2" v-for="item of conversationList" :key="item.conversationID" :autoClose="true" @click="deleteConversationList($event, item.conversationID)">
|
||
<scroll-view scroll-y="true" class="scroll-Y">
|
||
<view class="swipe-action u-border-top u-border-bottom" @tap="handleRoute(item.conversationID)">
|
||
<view class="swipe-action__content">
|
||
<TUI-conversation-item class="swipe-action__content__text" :data-type="item.type" :conversation="item"></TUI-conversation-item>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</u-swipe-action-item>
|
||
</u-swipe-action>
|
||
</view>
|
||
<u-empty v-else text="暂无会话" marginTop="30" :customStyle="{height: '80vh'}" icon="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/moreImg.png"></u-empty>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 这里有个加载的补丁逻辑待优化，页面向SDK请求conversationList的时候会有时延，
|
||
造成页面的一个抖动，这里加一个if逻辑打一个补丁，后续继续优化 -->
|
||
<script>
|
||
import TUIConversationItem from '@/components/tui-conversation/conversation-item/index';
|
||
import {destroy_group} from '@/common/http/tim.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
options1: [
|
||
{
|
||
text: '恢复',
|
||
style: {
|
||
backgroundColor: '#3c9cff',
|
||
},
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#f56c6c',
|
||
},
|
||
},
|
||
{
|
||
text: '免打扰',
|
||
style: {
|
||
backgroundColor: '#ffaa00',
|
||
},
|
||
},
|
||
],
|
||
options4: [
|
||
{
|
||
text: '恢复',
|
||
style: {
|
||
backgroundColor: '#3c9cff',
|
||
},
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#f56c6c',
|
||
},
|
||
},
|
||
{
|
||
text: '提醒',
|
||
style: {
|
||
backgroundColor: '#ffaa00',
|
||
},
|
||
},
|
||
],
|
||
options2: [
|
||
{
|
||
text: '顶置',
|
||
style: {
|
||
backgroundColor: '#3c9cff',
|
||
},
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#f56c6c',
|
||
},
|
||
},
|
||
{
|
||
text: '免打扰',
|
||
style: {
|
||
backgroundColor: '#ffaa00',
|
||
},
|
||
},
|
||
],
|
||
options3: [
|
||
{
|
||
text: '顶置',
|
||
style: {
|
||
backgroundColor: '#3c9cff',
|
||
},
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#f56c6c',
|
||
},
|
||
},
|
||
{
|
||
text: '提醒',
|
||
style: {
|
||
backgroundColor: '#ffaa00',
|
||
},
|
||
},
|
||
],
|
||
conversationID: '',
|
||
searchKey: '',
|
||
conversationList: [],
|
||
showSelectTag: false,
|
||
unreadCount:0,
|
||
};
|
||
},
|
||
components: {
|
||
TUIConversationItem,
|
||
},
|
||
computed: {
|
||
isLogin() {
|
||
console.log(this.$store.state);
|
||
return this.$store.state.isLogin;
|
||
},
|
||
},
|
||
watch: {
|
||
isLogin(val) {
|
||
if (val) {
|
||
// 登入后拉去会话列表
|
||
this.getConversationList();
|
||
uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
console.log("mounted聊天首页");
|
||
if (this.isLogin) {
|
||
// 登入后拉去会话列表
|
||
console.log("拉数据去了");
|
||
this.getFriendApplicationList();
|
||
this.getConversationList();
|
||
uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
|
||
/* 申请列表更新时触发*/
|
||
uni.$TUIKit.on(uni.$TUIKitEvent.FRIEND_APPLICATION_LIST_UPDATED,this.onUnreadCount)
|
||
}
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onShow() {
|
||
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面卸载
|
||
*/
|
||
onUnload() {
|
||
// uni.$TUIKit.off(uni.$TUIKitEvent.SDK_READY, this.onConversationListUpdated);
|
||
},
|
||
methods: {
|
||
getFriendApplicationList(){
|
||
let promise = uni.$TUIKit.getFriendApplicationList();
|
||
promise.then((imResponse)=> {
|
||
// friendApplicationList - 好友申请列表 - [FriendApplication]
|
||
// unreadCount - 好友申请的未读数
|
||
const { friendApplicationList, unreadCount } = imResponse.data;
|
||
this.unreadCount = unreadCount;
|
||
})
|
||
},
|
||
deleteConversationList: function (e, value) {
|
||
console.log(e,value);
|
||
if (e.index == '0') {
|
||
const list = this.conversationList;
|
||
const show = list.map(item => {
|
||
return item.isPinned;
|
||
});
|
||
for (var item of list) {
|
||
if (item.conversationID == value) {
|
||
if (show[list.indexOf(item)] === false) {
|
||
// 置顶会话，v2.14.0起支持
|
||
uni.$TUIKit
|
||
.pinConversation({
|
||
conversationID: value,
|
||
isPinned: true,
|
||
})
|
||
.then(imResponse => {
|
||
// 置顶会话成功
|
||
const { conversationID } = imResponse.data; // 被置顶的会话 ID
|
||
console.log(conversationID);
|
||
})
|
||
.catch(function (imError) {
|
||
console.warn('pinConversation error:', imError); // 置顶会话失败的相关信息
|
||
});
|
||
}
|
||
if (show[list.indexOf(item)] === true) {
|
||
// 取消置顶会话，v2.14.0起支持
|
||
uni.$TUIKit
|
||
.pinConversation({
|
||
conversationID: value,
|
||
isPinned: false,
|
||
})
|
||
.then(imResponse => {
|
||
// 取消置顶会话成功
|
||
const { conversationID } = imResponse.data; // 被取消置顶的会话 ID
|
||
})
|
||
.catch(function (imError) {
|
||
console.warn('pinConversation error:', imError); // 取消置顶会话失败的相关信息
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (e.index == '1') {
|
||
uni.$TUIKit
|
||
.deleteConversation(value)
|
||
.then(function (imResponse) {
|
||
//删除成功。
|
||
const { conversationID } = imResponse.data; // 被删除的会话 ID。
|
||
})
|
||
.catch(function (imError) {
|
||
console.warn('deleteConversation error:', imError); // 删除会话失败的相关信息
|
||
});
|
||
}
|
||
if (e.index == '2') {
|
||
const list = this.conversationList;
|
||
const show = list.map(item => {
|
||
return item.conversationID;
|
||
});
|
||
const num = value.substring(0, 3);
|
||
if (num === 'C2C') {
|
||
const user = value.slice(3);
|
||
if (list[show.indexOf(value)].messageRemindType === 'AcceptNotNotify') {
|
||
uni.$TUIKit
|
||
.setMessageRemindType({
|
||
userIDList: [user],
|
||
messageRemindType: this.TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE,
|
||
})
|
||
.then(function (imResponse) {
|
||
// 设置成功后 SDK 会触发 TIM.EVENT.CONVERSATION_LIST_UPDATED 事件（遍历列表，并读取 Conversation.messageRemindType）
|
||
const { successUserIDList, failureUserIDList } = imResponse.data;
|
||
})
|
||
.catch(function (imError) {
|
||
console.warn('setMessageRemindType error:', imError);
|
||
});
|
||
}
|
||
if (list[show.indexOf(value)].messageRemindType === 'AcceptAndNotify') {
|
||
uni.$TUIKit
|
||
.setMessageRemindType({
|
||
userIDList: [user],
|
||
messageRemindType: this.TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE,
|
||
})
|
||
.then(function (imResponse) {
|
||
// 设置成功后 SDK 会触发 TIM.EVENT.CONVERSATION_LIST_UPDATED 事件（遍历列表，并读取 Conversation.messageRemindType）
|
||
const { successUserIDList, failureUserIDList } = imResponse.data;
|
||
})
|
||
.catch(function (imError) {
|
||
console.warn('setMessageRemindType error:', imError);
|
||
});
|
||
}
|
||
if (list[show.indexOf(value)].messageRemindType === '') {
|
||
list[show.indexOf(value)].messageRemindType = 'AcceptNotNotify';
|
||
}
|
||
}
|
||
if (num === 'GRO') {
|
||
const groupID = value.slice(5);
|
||
if (list[show.indexOf(value)].messageRemindType === 'AcceptNotNotify') {
|
||
uni.$TUIKit
|
||
.setMessageRemindType({
|
||
groupID: groupID,
|
||
messageRemindType: this.TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE,
|
||
})
|
||
.then(function (imResponse) {})
|
||
.catch(function (imError) {
|
||
console.warn('setMessageRemindType error:', imError);
|
||
});
|
||
}
|
||
if (list[show.indexOf(value)].messageRemindType === 'AcceptAndNotify') {
|
||
uni.$TUIKit
|
||
.setMessageRemindType({
|
||
groupID: groupID,
|
||
messageRemindType: this.TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE,
|
||
})
|
||
.then(function (imResponse) {})
|
||
.catch(function (imError) {
|
||
console.warn('setMessageRemindType error:', imError);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
},
|
||
handleRouter() {
|
||
destroy_group('GROUP12').then((res)=>{
|
||
console.log(res);
|
||
}).catch((err)=>{
|
||
console.log(err);
|
||
})
|
||
uni.showToast({
|
||
title: '跳转',
|
||
icon: 'none',
|
||
});
|
||
},
|
||
addBtn() {
|
||
uni.showActionSheet({
|
||
itemList:[... ['添加好友', '创建群聊', '加入群聊', '扫一扫','通讯录'],`新的好友`],
|
||
success: res => {
|
||
// /pages/im/application/application
|
||
switch (res.tapIndex + 1) {
|
||
case 1:
|
||
uni.navigateTo({
|
||
url: '/pages/im/conversation/create-conversation/create',
|
||
});
|
||
break;
|
||
|
||
case 2:
|
||
uni.navigateTo({
|
||
url: '/pages/im/group/create-group/create',
|
||
});
|
||
break;
|
||
|
||
case 3:
|
||
uni.navigateTo({
|
||
url: '/pages/im/group/join-group/join',
|
||
});
|
||
break;
|
||
case 4:
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
},
|
||
});
|
||
break;
|
||
case 5:
|
||
uni.navigateTo({
|
||
url: '../chat/list',
|
||
});
|
||
break;
|
||
case 6:
|
||
uni.navigateTo({
|
||
url: '/pages/im/application/application',
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
fail: res => {
|
||
console.log(res.errMsg);
|
||
},
|
||
});
|
||
},
|
||
handleRoute(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/im/chat/chat?conversationID=${id}`,
|
||
});
|
||
},
|
||
onUnreadCount(event){
|
||
const { friendApplicationList, unreadCount } = event.data;
|
||
this.unreadCount = unreadCount;
|
||
},
|
||
onConversationListUpdated(event) {
|
||
this.conversationList = event.data;
|
||
},
|
||
pullDownRefresh(){
|
||
console.log("pullDownRefresh刷新聊天首页");
|
||
if (this.isLogin) {
|
||
// 登入后拉去会话列表
|
||
console.log("拉数据去了");
|
||
this.getFriendApplicationList();
|
||
this.getConversationList();
|
||
uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
|
||
setTimeout(()=>{
|
||
uni.stopPullDownRefresh()
|
||
},2500)
|
||
}
|
||
},
|
||
getConversationList() {
|
||
console.log(789);
|
||
uni.$TUIKit.getConversationList().then(imResponse => {
|
||
console.log(imResponse);
|
||
this.conversationList = imResponse.data.conversationList;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container-conversation {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
|
||
.boxPopBg {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 10rpx;
|
||
background: #303133;
|
||
width: 230rpx;
|
||
height: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 6rpx;
|
||
|
||
> text {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
border-bottom: 1rpx solid #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.topTag {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
border-bottom: solid 5px #303133;
|
||
border-right: solid 5px transparent;
|
||
border-left: solid 5px transparent;
|
||
right: 15px;
|
||
top: 0px;
|
||
z-index: 999;
|
||
}
|
||
}
|
||
|
||
.notice {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
height: 130rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0px 4rpx 27rpx 11rpx rgba(80, 15, 101, 0.09);
|
||
border-radius: 19rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
> image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
> view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
> text {
|
||
width: 138rpx;
|
||
height: 57rpx;
|
||
background: linear-gradient(99deg, #fd8be0 0%, #48c5fe 100%);
|
||
border-radius: 29rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.imgBar {
|
||
padding: 40rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
text {
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.topIcon {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 40rpx;
|
||
height: 80rpx;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
font-weight: bold;
|
||
z-index: 99999;
|
||
margin-top: 10rpx;
|
||
/* #ifdef APP-PLUS */
|
||
margin-top: 90rpx;
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
.msgRt {
|
||
margin-right: 200rpx;
|
||
}
|
||
/* #endif */
|
||
.msgBox{
|
||
position: relative;
|
||
.tips{
|
||
position: absolute;
|
||
right: -20rpx;
|
||
top: -10rpx;
|
||
color: white;
|
||
font-size: 20rpx;
|
||
padding: 0 14rpx;
|
||
border-radius: 50rpx;
|
||
z-index: 9;
|
||
background-color: #CA0400;
|
||
}
|
||
}
|
||
view {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.u-icon {
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-box {
|
||
height: calc(100vh - 220rpx);
|
||
}
|
||
|
||
.margintop-bar {
|
||
margin-bottom: 160 rpx;
|
||
}
|
||
|
||
.btn-show-more {
|
||
display: flex;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
padding-left: 3rpx;
|
||
}
|
||
|
||
.picker {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 96rpx;
|
||
}
|
||
</style>
|