359 lines
8.4 KiB
Vue
359 lines
8.4 KiB
Vue
<template>
|
||
<view class="forum">
|
||
<view class="bg">
|
||
<image
|
||
class="bgImg"
|
||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
|
||
mode="scaleToFill"
|
||
/>
|
||
</view>
|
||
<view class="title">消息</view>
|
||
</view>
|
||
<view class="content">
|
||
<scroll-view
|
||
show-scrollbar="false"
|
||
scroll-y="true"
|
||
class="scroll"
|
||
v-if="Conversationobj.conversations.length > 0"
|
||
refresher-enabled="true"
|
||
refresher-threshold="40"
|
||
@refresherrefresh="onRefresherRefresh"
|
||
:refresher-triggered="triggered"
|
||
>
|
||
<view class="card" v-for="item in Conversationobj.conversations" :key="item.userId">
|
||
<uni-swipe-action>
|
||
<uni-swipe-action-item>
|
||
<view
|
||
class="cardContent"
|
||
@click="goChat(item.userId, item.data.nickname, item.data.avatar)"
|
||
>
|
||
<image class="cardImg" :src="item.data.avatar" mode="scaleToFill" />
|
||
<view class="cardUnread" v-if="item.unread > 0">{{
|
||
item.unread > 99 ? "99+" : item.unread
|
||
}}</view>
|
||
<view class="cardnameandtimeandNews">
|
||
<view class="cardnameandtime">
|
||
<view class="cardname">{{ item.data.nickname }}</view>
|
||
<view class="cardtime">{{
|
||
TimeFormatting(item.lastMessage.timestamp)
|
||
}}</view>
|
||
</view>
|
||
<view class="cardNews">
|
||
{{ item.lastMessage.payload.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-slot:right>
|
||
<view class="rightPosition">
|
||
<view v-if="!item.top" class="topPosition" @click="goTop(item, true)"
|
||
>置顶</view
|
||
>
|
||
<view v-if="item.top" class="topPosition" @click="goTop(item, false)"
|
||
>取消置顶</view
|
||
>
|
||
<view class="Delete" @click="deleteConversation(item)">删除</view>
|
||
</view>
|
||
</template>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="scroll" v-if="Conversationobj.conversations.length == 0">
|
||
<view class="nodata">
|
||
<view class="nodatatext">您还没有跟其他人的聊天，快去聊天吧！</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- tanber -->
|
||
<view class="tabBar">
|
||
<tabBar :tabIndex="3"></tabBar>
|
||
</view>
|
||
<uni-popup ref="Refusepopup" type="center" border-radius="10px 10px 0 0">
|
||
<view class="popup-Hintcontent">
|
||
<view class="popup-text">提示</view>
|
||
<view class="popup-texts">您确定要删除这个会话吗？</view>
|
||
<view class="popup-btn">
|
||
<button class="invite" type="primary" @click="operation()">确认</button>
|
||
<button class="cancel" type="default" @click="RefuseHintcloseHint()">取消</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import tabBar from "../../components/tabBar/tabBar";
|
||
import TimeFormatting from "../../components/TimeFormatting.js";
|
||
import {
|
||
getConversationList,
|
||
conversationTop,
|
||
conversationDelete,
|
||
} from "../../components/goEasyTool/tool.js";
|
||
import GoEasy from "goeasy";
|
||
export default {
|
||
data() {
|
||
return {
|
||
Conversationobj: { conversations: [] },
|
||
DeleteSession: {},
|
||
triggered: false,
|
||
};
|
||
},
|
||
onLoad() {
|
||
//获取会话列表
|
||
getConversationList(this.$goeasy).then((res) => {
|
||
console.log(res);
|
||
this.Conversationobj = res;
|
||
});
|
||
//监听会话列表变化
|
||
var im = this.$goeasy.im;
|
||
im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.onConversationsUpdated);
|
||
},
|
||
methods: {
|
||
//下拉刷新
|
||
onRefresherRefresh() {
|
||
this.triggered = true;
|
||
getConversationList(this.$goeasy).then((res) => {
|
||
this.Conversationobj = res;
|
||
this.triggered = false;
|
||
});
|
||
},
|
||
//删除会话
|
||
operation() {
|
||
conversationDelete(this.$goeasy, this.DeleteSession).then((res) => {
|
||
uni.showToast({
|
||
title: "删除成功",
|
||
icon: "none",
|
||
});
|
||
this.$refs.Refusepopup.close();
|
||
});
|
||
},
|
||
//关闭提示框
|
||
RefuseHintcloseHint() {
|
||
this.$refs.Refusepopup.close();
|
||
this.DeleteSession = {};
|
||
},
|
||
//删除会话
|
||
deleteConversation(item) {
|
||
this.DeleteSession = item;
|
||
this.$refs.Refusepopup.open("center");
|
||
},
|
||
//置顶会话
|
||
goTop(item, top) {
|
||
conversationTop(this.$goeasy, item, top).then((res) => {
|
||
uni.showToast({
|
||
title: top ? "置顶成功" : "取消置顶成功",
|
||
icon: "none",
|
||
});
|
||
});
|
||
},
|
||
//监听会话列表变化
|
||
onConversationsUpdated(conversations) {
|
||
this.Conversationobj = conversations;
|
||
},
|
||
TimeFormatting: TimeFormatting,
|
||
//跳转聊天页面
|
||
goChat(userId, nickname, avatar) {
|
||
wx.navigateTo({
|
||
url: `/pages/index/chat/chat?userId=${userId}&nickname=${nickname}&avatar=${avatar}`,
|
||
});
|
||
},
|
||
},
|
||
components: {
|
||
tabBar,
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
}
|
||
.bgImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.title {
|
||
position: absolute;
|
||
top: 120rpx;
|
||
left: 335rpx;
|
||
font-size: 34rpx;
|
||
color: #100e0f;
|
||
font-weight: bold;
|
||
}
|
||
.content {
|
||
position: absolute;
|
||
top: 200rpx;
|
||
left: 0rpx;
|
||
right: 0rpx;
|
||
bottom: 100rpx;
|
||
}
|
||
.scroll {
|
||
width: 90%;
|
||
height: 100%;
|
||
padding: 0% 5% 0% 5%;
|
||
}
|
||
.scroll ::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
display: none;
|
||
}
|
||
.nodata {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.nodatatext {
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
}
|
||
.scroll ::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
display: none;
|
||
}
|
||
.card {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.cardContent {
|
||
height: 150rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.cardImg {
|
||
height: 110rpx;
|
||
width: 110rpx;
|
||
border-radius: 20rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
.cardUnread {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 15rpx;
|
||
font-size: 18rpx;
|
||
color: #ffffff;
|
||
background-color: #f53123;
|
||
text-align: center;
|
||
line-height: 30rpx;
|
||
margin-top: -100rpx;
|
||
margin-left: -15rpx;
|
||
}
|
||
.cardnameandtimeandNews {
|
||
width: 500rpx;
|
||
height: 110rpx;
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.cardnameandtime {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.cardNews {
|
||
width: 500rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
.cardname {
|
||
font-size: 30rpx;
|
||
color: #100e0f;
|
||
font-weight: bold;
|
||
}
|
||
.cardtime {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.rightPosition {
|
||
height: 150rpx;
|
||
width: 300rpx;
|
||
display: flex;
|
||
}
|
||
.topPosition {
|
||
height: 150rpx;
|
||
width: 150rpx;
|
||
background-color: #f5a623;
|
||
text-align: center;
|
||
line-height: 150rpx;
|
||
}
|
||
.Delete {
|
||
height: 150rpx;
|
||
width: 150rpx;
|
||
background-color: #f54323;
|
||
text-align: center;
|
||
line-height: 150rpx;
|
||
border-top-right-radius: 20rpx;
|
||
border-bottom-right-radius: 20rpx;
|
||
}
|
||
.popup-Hintcontent {
|
||
width: 600rpx;
|
||
height: 500rpx;
|
||
background-repeat: no-repeat;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
|
||
background-position: center;
|
||
}
|
||
.popup-text {
|
||
color: #161616;
|
||
font-size: 36.26rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.popup-texts {
|
||
margin-left: 50rpx;
|
||
color: #7e7e7e;
|
||
font-size: 26rpx;
|
||
margin-right: 50rpx;
|
||
margin-top: 70rpx;
|
||
margin-bottom: 70rpx;
|
||
}
|
||
.popup-btn {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 50rpx;
|
||
}
|
||
.invite {
|
||
width: 225.19rpx;
|
||
height: 78.24rpx;
|
||
font-size: 28.63rpx;
|
||
line-height: 80rpx;
|
||
border-top-left-radius: 50rpx;
|
||
border-bottom-left-radius: 50rpx;
|
||
border-bottom-right-radius: 50rpx;
|
||
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
|
||
}
|
||
.cancel {
|
||
width: 225.19rpx;
|
||
height: 78.24rpx;
|
||
font-size: 28.63rpx;
|
||
line-height: 80rpx;
|
||
margin-left: 30rpx;
|
||
color: #03aba8;
|
||
border-top-left-radius: 50rpx;
|
||
border-bottom-left-radius: 50rpx;
|
||
border-bottom-right-radius: 50rpx;
|
||
border: 1rpx solid #03aba8;
|
||
}
|
||
</style>
|