304 lines
7.5 KiB
Vue
304 lines
7.5 KiB
Vue
<template>
|
||
<view class="min-page bg-f7 color-333 u-font-28">
|
||
<up-sticky>
|
||
<view class="top u-flex u-row-between u-col-center">
|
||
<view style="width: 420rpx">
|
||
<up-search
|
||
v-model="query.key"
|
||
placeholder="搜索群名称"
|
||
:showAction="false"
|
||
@clear="throttleSearch"
|
||
@change="throttleSearch"
|
||
></up-search>
|
||
</view>
|
||
<view class="u-flex u-col-center" @click="clearAllmsg">
|
||
<text class="color-666 u-m-r-12">清空未读</text>
|
||
<image src="/pageChat/static/clear.png" class="clear"></image>
|
||
</view>
|
||
</view>
|
||
</up-sticky>
|
||
<view class="list">
|
||
<up-swipe-action>
|
||
<template v-for="(item, index) in list" :key="item.id">
|
||
<up-swipe-action-item
|
||
:options="options1"
|
||
v-model:show="item.showOptions"
|
||
@click="optionsClick($event, item, index)"
|
||
>
|
||
<view class="item u-flex" @click="toDetail(item)">
|
||
<view class="u-flex avatar">
|
||
<up-avatar
|
||
size="118rpx"
|
||
:src="item.avatar"
|
||
shape="square"
|
||
round="8rpx"
|
||
></up-avatar>
|
||
<view class="bandage" v-if="item.unread_count > 0">{{
|
||
item.unread_count >= 99 ? "99" : item.unread_count
|
||
}}</view>
|
||
</view>
|
||
<view class="u-flex-1 u-flex u-row-between u-p-l-14">
|
||
<view style="max-width: 364rpx">
|
||
<view class="color-000 u-line-1">{{ item.name }}</view>
|
||
<view class="u-m-t-28 u-line-1 u-font-24 color-999">{{
|
||
item.msg
|
||
}}</view>
|
||
</view>
|
||
<view class="color-333 u-font-24">{{ item.send_time }}</view>
|
||
</view>
|
||
</view>
|
||
</up-swipe-action-item>
|
||
<view style="height: 16rpx" class="bg-f7"></view>
|
||
</template>
|
||
</up-swipe-action>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as chatApi from "@/http/php/chat";
|
||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import { useChatStore } from "@/stores/chat";
|
||
import dayjs from "dayjs";
|
||
const chatStore = useChatStore();
|
||
|
||
const originalOnReceiveMsg = chatStore.onReceiveMsg;
|
||
|
||
// 定义消息回调函数
|
||
const handleReceiveMsg = (msg) => {
|
||
// 先执行原始回调（如果有）
|
||
if (typeof originalOnReceiveMsg === "function") {
|
||
originalOnReceiveMsg(msg);
|
||
}
|
||
|
||
if (msg.operate_type == "receive_msg" && msg.chat_type == 2) {
|
||
const index = allList.value.findIndex((v) => v.group_id == msg.group_id);
|
||
if (index != -1) {
|
||
allList.value[index].unread_count += 1;
|
||
allList.value[index].msg = returnMsg(msg);
|
||
allList.value[index].send_time = msg.send_time;
|
||
allList.value[index].send_time_origin = msg.send_time_origin;
|
||
allList.value = listSort(allList.value);
|
||
}
|
||
const index1 = list.value.findIndex((v) => v.group_id == msg.group_id);
|
||
if (index1 != -1) {
|
||
list.value[index1].unread_count += 1;
|
||
list.value[index1].msg = returnMsg(msg);
|
||
list.value[index1].send_time = msg.send_time;
|
||
list.value[index1].send_time_origin = msg.send_time_origin;
|
||
list.value = listSort(list.value);
|
||
}
|
||
}
|
||
};
|
||
onMounted(() => {
|
||
chatStore.registerReceiveMsgCallback(handleReceiveMsg);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// 移除消息回调，避免内存泄漏
|
||
chatStore.removeReceiveMsgCallback(handleReceiveMsg);
|
||
});
|
||
|
||
function returnMsg(msg) {
|
||
if (msg.msg_type == 1) {
|
||
return msg.nick + "：" + msg.content;
|
||
}
|
||
if (msg.msg_type == 2) {
|
||
return msg.nick + "：" + "[图片]";
|
||
}
|
||
if (msg.msg_type == 5) {
|
||
return msg.nick + "：" + "[视频]";
|
||
}
|
||
if (msg.msg_type == 4) {
|
||
return msg.nick + "：" + "[优惠券]";
|
||
}
|
||
}
|
||
chatStore.connectSocket();
|
||
|
||
// 使用 reactive 创建响应式对象
|
||
const options1 = reactive([
|
||
{
|
||
text: "删除",
|
||
style: {
|
||
backgroundColor: "#f56c6c",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
]);
|
||
|
||
function optionsClick(e, item, index) {
|
||
if (e.index == 0) {
|
||
//删除
|
||
|
||
chatApi
|
||
.sessionlistdel({
|
||
session_id: item.session_id,
|
||
})
|
||
.then((res) => {
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "删除成功",
|
||
icon: "none",
|
||
duration: 1000,
|
||
});
|
||
list.value.splice(index, 1);
|
||
setTimeout(() => {
|
||
getList();
|
||
}, 1000);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
const list = ref([]);
|
||
let allList = ref([]);
|
||
|
||
const query = reactive({
|
||
key: "",
|
||
});
|
||
|
||
function throttle(fn, delay) {
|
||
let timer = null;
|
||
return function (...args) {
|
||
if (timer) {
|
||
clearTimeout(timer);
|
||
}
|
||
timer = setTimeout(() => {
|
||
fn.apply(this, args);
|
||
}, delay);
|
||
};
|
||
}
|
||
|
||
//使用节流函数
|
||
const throttleSearch = throttle(search, 500);
|
||
function search() {
|
||
const arr = allList.value
|
||
.filter((v) => v.name.includes(query.key.trim()))
|
||
.map((v) => {
|
||
return {
|
||
...v,
|
||
showOptions: false,
|
||
};
|
||
});
|
||
list.value = listSort(arr);
|
||
}
|
||
|
||
function listSort(arr) {
|
||
return arr.sort((a, b) => {
|
||
return dayjs(b.send_time_origin).unix() - dayjs(a.send_time_origin).unix();
|
||
});
|
||
}
|
||
|
||
async function getList() {
|
||
const res = await chatApi.messageSessionList({});
|
||
const arr = (res.list || []).filter((v) => !v.is_del);
|
||
allList.value = listSort(arr);
|
||
|
||
search();
|
||
}
|
||
|
||
async function clearAllmsg() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要清空所有未读消息吗？",
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
const res = await chatApi.messageMarkReadAll({
|
||
session_ids: list.value.map((v) => v.group_id).join(","),
|
||
});
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "清空成功",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
setTimeout(() => {
|
||
getList();
|
||
}, 1000);
|
||
}
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
function toDetail(item) {
|
||
if (!item.is_th) {
|
||
return uni.showToast({
|
||
title: "你已不在该群内",
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
}
|
||
uni.navigateTo({
|
||
url:
|
||
"/pageChat/chat" +
|
||
`?group_id=${item.group_id}&session_id=${item.session_id}`,
|
||
});
|
||
}
|
||
|
||
const messageUnreadCount = ref(0);
|
||
onShow(() => {
|
||
getList();
|
||
// 检查连接状态，确保连接活跃
|
||
if (!chatStore.isConnect || !chatStore.socketTask) {
|
||
console.log("列表页显示，检查Socket连接");
|
||
chatStore.forceReconnect();
|
||
} else {
|
||
chatStore.shop_id = "";
|
||
chatStore.init();
|
||
}
|
||
|
||
// 获取未读消息总数
|
||
chatApi.messageUnreadCount({}).then((res) => {
|
||
console.log(res);
|
||
messageUnreadCount.value = res.total;
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.top {
|
||
padding: 32rpx 28rpx;
|
||
background-color: #fff;
|
||
}
|
||
.clear {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
.list {
|
||
padding: 36rpx 28rpx;
|
||
|
||
.item {
|
||
padding: 32rpx 28rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
.avatar {
|
||
position: relative;
|
||
.bandage {
|
||
position: absolute;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
background: #ff1c1c;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
text-align: center;
|
||
line-height: 38rpx;
|
||
right: -10rpx;
|
||
top: -10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.u-swipe-action-item__content) {
|
||
background-color: transparent;
|
||
}
|
||
:deep(.u-swipe-action-item) {
|
||
border-radius: 16rpx;
|
||
}
|
||
</style>
|