412 lines
9.0 KiB
Vue
412 lines
9.0 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 {
|
||
proxy
|
||
} = getCurrentInstance()
|
||
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'
|
||
},
|
||
fn: (item) => setRead(item)
|
||
},]
|
||
|
||
// 系统
|
||
const systemRightOption = [{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#F85050'
|
||
},
|
||
}, {
|
||
text: '设为已读',
|
||
style: {
|
||
backgroundColor: '#00ADEE'
|
||
},
|
||
},]
|
||
// 传入参数
|
||
const props = defineProps({
|
||
// 类型
|
||
type: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
})
|
||
|
||
// 用户列表
|
||
const list = reactive([])
|
||
|
||
onMounted(() => {
|
||
if (props.type == 0) {
|
||
getList()
|
||
} else if (props.type == 1) {
|
||
// 视频消息
|
||
} else if (props.type == 2) {
|
||
// 商城消息
|
||
}
|
||
|
||
addListener()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
removeListener()
|
||
})
|
||
|
||
// 开启监听消息
|
||
function addListener() {
|
||
let onMessageReceived = function (event) {
|
||
getList()
|
||
}
|
||
|
||
uni.$chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onMessageReceived);
|
||
}
|
||
|
||
// 移除监听
|
||
function removeListener() {
|
||
uni.$chat.off(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, () => { });
|
||
}
|
||
|
||
// 获取消息列表
|
||
function getList() {
|
||
// 验证sdk是否准备完毕
|
||
let isReady = uni.$chat.isReady();
|
||
if (!isReady) {
|
||
setTimeout(function () {
|
||
getList();
|
||
}, 800);
|
||
return
|
||
}
|
||
|
||
uni.$emit('updateNum', {})
|
||
|
||
uni.$chat.getConversationList().then(rs => {
|
||
let res = rs.data.conversationList
|
||
console.log(res);
|
||
let arr = []
|
||
res.forEach(item => {
|
||
let obj = {}
|
||
obj.type = item.type;
|
||
obj.chatText = item.lastMessage.messageForShow;
|
||
obj.MsgTime = handleDate(item.lastMessage.lastTime);
|
||
obj.unreadCount = item.unreadCount;
|
||
|
||
if (item.type == 'C2C') {
|
||
obj.avatar = item.userProfile.avatar;
|
||
obj.name = item.userProfile.nick;
|
||
obj.userID = item.userProfile.userID;
|
||
} else if (item.type == 'GROUP') {
|
||
obj.avatar = item.groupProfile.avatar;
|
||
obj.name = item.groupProfile.name;
|
||
obj.num = item.groupProfile.memberCount;
|
||
obj.groupID = item.groupProfile.groupID;
|
||
}
|
||
arr.push(obj)
|
||
})
|
||
|
||
list.data = arr;
|
||
|
||
})
|
||
|
||
// api.news.getMessageList({
|
||
// query: {
|
||
// userId: userinfo.value.id,
|
||
// }
|
||
// }).then(rs => {
|
||
// if (rs.code == 200) {
|
||
// let msg = JSON.parse(rs.msg);
|
||
|
||
// list.data = handleList(msg.SessionItem);
|
||
|
||
// return
|
||
// }
|
||
// util.alert({
|
||
// content: rs.msg,
|
||
// showCancel: false,
|
||
// })
|
||
// })
|
||
}
|
||
|
||
/**
|
||
* 消息列表
|
||
* @param {Object} item
|
||
*/
|
||
function handleList(list) {
|
||
// 验证sdk是否准备完毕
|
||
let isReady = uni.$chat.isReady();
|
||
if (!isReady) {
|
||
setTimeout(function () {
|
||
handleList(list);
|
||
}, 800);
|
||
return
|
||
}
|
||
if (list) {
|
||
list.forEach(item => {
|
||
item.MsgTime = handleDate(item.MsgTime)
|
||
|
||
let type = item.type == 'C2C' ? `C2C${item.To_Account}` : `GROUP${item.GroupId}`;
|
||
uni.$chat.getConversationProfile(type).then(rs => {
|
||
let res = rs.data.conversation;
|
||
|
||
item.chatText = res.lastMessage.messageForShow;
|
||
item.unreadCount = res.unreadCount;
|
||
if (item.type == 'C2C') {
|
||
item.avatar = res.userProfile.avatar;
|
||
item.name = res.userProfile.nick;
|
||
} else if (item.type == 'GROUP') {
|
||
item.avatar = res.groupProfile.avatar;
|
||
item.name = res.groupProfile.name;
|
||
item.num = res.groupProfile.memberCount;
|
||
}
|
||
|
||
})
|
||
})
|
||
}
|
||
|
||
return list
|
||
}
|
||
|
||
// // 点击用户
|
||
// 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) {
|
||
let param = {};
|
||
// 单聊
|
||
if (item.type == 'C2C') {
|
||
param.type = 'C2C'
|
||
param.name = `${item.name}`
|
||
param.msgId = `${item.userID}`
|
||
} else {
|
||
// 群聊
|
||
param.type = 'GROUP'
|
||
param.name = `${item.name}`
|
||
param.msgId = `${item.groupID}`
|
||
param.num = `${item.num}`
|
||
}
|
||
|
||
setRead(item)
|
||
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) {
|
||
// 验证sdk是否准备完毕
|
||
let isReady = uni.$chat.isReady();
|
||
if (!isReady) {
|
||
setTimeout(function () {
|
||
delMsg(item);
|
||
}, 800);
|
||
return
|
||
}
|
||
|
||
let conversationId = item.type == 'C2C' ? `C2C${item.userID}` : `GROUP${item.groupID}`;
|
||
|
||
uni.$chat.deleteConversation(conversationId).then(rs => {
|
||
getList()
|
||
})
|
||
}
|
||
|
||
// 标为已读
|
||
function setRead(item) {
|
||
// 验证sdk是否准备完毕
|
||
let isReady = uni.$chat.isReady();
|
||
if (!isReady) {
|
||
setTimeout(function () {
|
||
setRead(item);
|
||
}, 800);
|
||
return
|
||
}
|
||
|
||
let conversationId = item.type == 'C2C' ? `C2C${item.userID}` : `GROUP${item.groupID}`;
|
||
uni.$chat.setMessageRead({
|
||
conversationID: conversationId,
|
||
}).then(rs => {
|
||
getList()
|
||
})
|
||
}
|
||
|
||
// 时间转换
|
||
function handleDate(timestamp) {
|
||
var timestamp = +timestamp * 1000;
|
||
var date = new Date(timestamp);
|
||
|
||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
||
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
|
||
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
||
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
|
||
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
||
|
||
var formattedDate = M + D + h + m + s;
|
||
return formattedDate
|
||
}
|
||
|
||
|
||
</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 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 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 wh90" 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.data" :key="index"
|
||
@click="handleMenu($event, item)">
|
||
<view class="item rows ptb20 plr30" @click.stop="handleChat(item)">
|
||
<view class="image wh90 pr">
|
||
<image class="cir wh90" :src="item.avatar" mode="aspectFill" />
|
||
<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">{{ item.name }}</view>
|
||
<view class="datetime c999 f22">
|
||
{{ util.formatTime('MM-dd HH:mm', item.MsgTime) }}</view>
|
||
</view>
|
||
<view class="desc thd mt10 c666 f24">{{ item.chatText }}</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;
|
||
text-align: center;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.mark {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.dot {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |