270 lines
6.3 KiB
Vue
270 lines
6.3 KiB
Vue
|
<script setup>
|
|||
|
|
/**
|
|||
|
|
* 消息列表
|
|||
|
|
*/
|
|||
|
|
import api from '@/api/index.js'
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
computed,
|
|||
|
|
reactive,
|
|||
|
|
onMounted,
|
|||
|
|
onUnmounted,
|
|||
|
|
getCurrentInstance,
|
|||
|
|
} from 'vue'
|
|||
|
|
// 腾讯云聊天
|
|||
|
|
import TencentCloudChat from '@tencentcloud/chat';
|
|||
|
|
// 工具库
|
|||
|
|
import util from '@/common/js/util.js'
|
|||
|
|
import {
|
|||
|
|
useStore,
|
|||
|
|
} from 'vuex'
|
|||
|
|
const store = useStore()
|
|||
|
|
const userinfo = computed(() => {
|
|||
|
|
let result = store.state.userinfo
|
|||
|
|
return result
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 右滑菜单
|
|||
|
|
const rightOption = [{
|
|||
|
|
text: '删除',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#F85050'
|
|||
|
|
},
|
|||
|
|
fn: (item) => delMsg(item)
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// text: '设为已读',
|
|||
|
|
// style: {
|
|||
|
|
// backgroundColor: '#00ADEE'
|
|||
|
|
// },
|
|||
|
|
// }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 系统
|
|||
|
|
const systemRightOption = [{
|
|||
|
|
text: '删除',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#F85050'
|
|||
|
|
},
|
|||
|
|
}, {
|
|||
|
|
text: '设为已读',
|
|||
|
|
style: {
|
|||
|
|
backgroundColor: '#00ADEE'
|
|||
|
|
},
|
|||
|
|
}, ]
|
|||
|
|
|
|||
|
|
// 用户列表
|
|||
|
|
const list = reactive([])
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getList()
|
|||
|
|
addListener()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
removeListener()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 开启监听消息
|
|||
|
|
function addListener() {
|
|||
|
|
let onMessageReceived = function(event) {
|
|||
|
|
getList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onMessageReceived);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移除监听
|
|||
|
|
function removeListener() {
|
|||
|
|
uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取朋友列表
|
|||
|
|
function getList() {
|
|||
|
|
uni.$chat.getConversationList().then(rs => {
|
|||
|
|
// console.log('getConversation', rs)
|
|||
|
|
list.length = 0
|
|||
|
|
list.push(...rs.data.conversationList)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击用户
|
|||
|
|
function handleUser(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: util.setUrl('/pages/index/videoHome', {
|
|||
|
|
userId: item.userId,
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 跳转
|
|||
|
|
function navigateToPage(path) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: path
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 去聊天
|
|||
|
|
* @param {Object} item
|
|||
|
|
*/
|
|||
|
|
function handleChat(item) {
|
|||
|
|
console.log('item', item)
|
|||
|
|
let param = {
|
|||
|
|
type: item.type
|
|||
|
|
}
|
|||
|
|
// 单聊
|
|||
|
|
if (item.type == 'C2C') {
|
|||
|
|
param.name = `${item.userProfile.nick}`
|
|||
|
|
param.msgId = `${item.userProfile.userID}`
|
|||
|
|
}
|
|||
|
|
// 群聊
|
|||
|
|
else if (item.type == 'GROUP') {
|
|||
|
|
param.name = `${item.groupProfile.name}(${item.groupProfile.memberCount})`
|
|||
|
|
param.msgId = `${item.groupProfile.groupID}`
|
|||
|
|
}
|
|||
|
|
//
|
|||
|
|
util.toChat(param)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 菜单
|
|||
|
|
* @param {Object} ev 默认事件
|
|||
|
|
* @param {Object} item 单项
|
|||
|
|
*/
|
|||
|
|
function handleMenu(ev, item) {
|
|||
|
|
console.log('ev', ev, item)
|
|||
|
|
ev.content.fn(item)
|
|||
|
|
proxy.$refs.swipeAction.closeAll()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除会话
|
|||
|
|
function delMsg(item) {
|
|||
|
|
uni.$chat.deleteConversation({
|
|||
|
|
conversationIDList: [item.conversationID],
|
|||
|
|
clearHistoryMessage: false,
|
|||
|
|
}).then(rs => {
|
|||
|
|
//
|
|||
|
|
getList()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="firendBox pr">
|
|||
|
|
<scroll-view scroll-y="true" class="scroll">
|
|||
|
|
<uni-swipe-action ref="swipeAction">
|
|||
|
|
<view class="list pb30">
|
|||
|
|
<!-- <uni-swipe-action-item :right-options="systemRightOption">
|
|||
|
|
<view class="item rows ptb20 plr30">
|
|||
|
|
<view class="image wh90 pr">
|
|||
|
|
<image class="cir" src="/static/msg1.png" mode="aspectFill" />
|
|||
|
|
<view class="dot pa t0 r0 cir" v-if="1"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="col f1 ml20">
|
|||
|
|
<view class="rows">
|
|||
|
|
<view class="name f1 thd c333 f32">新的关注</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="desc thd mt10 c666 f24">新增一位关注，快看看是谁吧~</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-swipe-action-item> -->
|
|||
|
|
<!-- <uni-swipe-action-item :right-options="systemRightOption">
|
|||
|
|
<view class="item rows ptb20 plr30">
|
|||
|
|
<view class="image wh90 pr">
|
|||
|
|
<image class="cir wh90" src="/static/msg1.png" mode="aspectFill" />
|
|||
|
|
<view class="dot pa t0 r0 cir" v-if="1"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="col f1 ml20">
|
|||
|
|
<view class="rows">
|
|||
|
|
<view class="name f1 thd c333 f32">互动消息</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="desc thd mt10 c666 f24">快去看看吧~</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-swipe-action-item> -->
|
|||
|
|
|
|||
|
|
<!-- <uni-swipe-action-item :right-options="systemRightOption">
|
|||
|
|
<view class="item rows ptb20 plr30">
|
|||
|
|
<view class="image wh90 pr">
|
|||
|
|
<image class="cir" src="/static/msg2.png" mode="aspectFill" />
|
|||
|
|
<view class="dot pa t0 r0 cir" v-if="0"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="col f1 ml20">
|
|||
|
|
<view class="rows">
|
|||
|
|
<view class="name f1 thd c333 f32">系统消息</view>
|
|||
|
|
<view class="datetime c999 f22">16:06</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="desc thd mt10 c666 f24">平台福利上新，快来玩转平台</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-swipe-action-item> -->
|
|||
|
|
<uni-swipe-action-item :right-options="rightOption" v-for="(item, index) in list" :key="index" @click="handleMenu($event,item)">
|
|||
|
|
<view class="item rows ptb20 plr30" @click="handleChat(item)">
|
|||
|
|
<view class="image wh90 pr">
|
|||
|
|
<template v-if="item.type == 'GROUP'">
|
|||
|
|
<image class="cir wh90" :src="item.groupProfile.avatar" mode="aspectFill" />
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="item.type == 'C2C'">
|
|||
|
|
<image class="cir wh90" :src="item.userProfile.avatar" mode="aspectFill" />
|
|||
|
|
</template>
|
|||
|
|
<!-- <view class="mark pa t0 r0 cfff f22 cir" v-if="item.unreadCount">{{item.unreadCount}}</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="col f1 ml20">
|
|||
|
|
<view class="rows">
|
|||
|
|
<view class="name f1 thd c333 f32">
|
|||
|
|
<template v-if="item.type == 'GROUP'">
|
|||
|
|
<text>{{ item.groupProfile.name }}</text>
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="item.type == 'C2C'">
|
|||
|
|
<text>{{item.userProfile.nick}}</text>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
<view class="datetime c999 f22">{{ util.formatTime('MM-dd HH:mm',item.lastMessage.lastTime) }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="desc thd mt10 c666 f24">{{item.lastMessage.messageForShow}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-swipe-action-item>
|
|||
|
|
<view class="mtb20 tac c999 f20">到底啦~</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-swipe-action>
|
|||
|
|
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
// 朋友列表
|
|||
|
|
.firendBox {
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.scroll {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 列表
|
|||
|
|
.list {
|
|||
|
|
|
|||
|
|
// 消息提示点
|
|||
|
|
.mark,
|
|||
|
|
.dot {
|
|||
|
|
background-color: #FF6B17;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mark {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dot {
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|