141 lines
3.3 KiB
Vue
141 lines
3.3 KiB
Vue
<template>
|
||
<view class="min-page bg-f7 color-333 u-font-28">
|
||
<up-sticky>
|
||
<view class="top u-flex u-row-between">
|
||
<view></view>
|
||
<view class="u-flex" @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">
|
||
<view
|
||
class="item u-flex"
|
||
v-for="(item, index) in list"
|
||
:key="item.id"
|
||
@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"
|
||
>用户昵称：这里是消息内容这里,,,,</view
|
||
>
|
||
</view>
|
||
<view class="color-333 u-font-24">{{ item.send_time }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import go from "@/commons/utils/go.js";
|
||
|
||
import * as chatApi from "@/http/php/chat";
|
||
import { ref ,reactive} from "vue";
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
|
||
|
||
const list = ref([]);
|
||
|
||
async function getList() {
|
||
const res = await chatApi.messageSessionList({});
|
||
list.value = (res.list || []).filter((v) => !v.is_del);
|
||
}
|
||
|
||
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.session_id).join(',')});
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "清空成功",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
setTimeout(() => {
|
||
getList();
|
||
}, 1000);
|
||
}
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
function toDetail(item) {
|
||
go.to("PAGES_CHAT_CHAT", {
|
||
group_id: item.group_id,
|
||
session_id: item.session_id,
|
||
});
|
||
}
|
||
|
||
const messageUnreadCount = ref(0);
|
||
onShow(() => {
|
||
getList();
|
||
// 获取未读消息总数
|
||
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;
|
||
margin-bottom: 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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|