395 lines
9.1 KiB
Plaintext
395 lines
9.1 KiB
Plaintext
<template>
|
||
<view class="container" @click="hiddenDeleteBtn">
|
||
<uni-list :border="false" class="list-box">
|
||
<template v-if="showMenu">
|
||
<uni-list-item v-for="(menu,menuIndex) in menuList" :key="menuIndex" class="menu-item"
|
||
:title="menu.title" link
|
||
@click="openPages(menu)" :border="false" :showBadge="true"
|
||
>
|
||
<template v-slot:header>
|
||
<view class="slot-icon-box green">
|
||
<image class="slot-icon" :src="'/uni_modules/uni-im/static/noticeIcon/' + menu.srcName + '.png'" mode="widthFix"></image>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
|
||
<uni-list-item v-for="(item,index) in noticeList" :key="item.id" class="menu-item" :title="item.title"
|
||
:showBadge="true" :badgeText="item.badge" :badgeStyle="item.badgeStyle" link @click="openPages(item)" :border="false">
|
||
<template v-slot:header>
|
||
<view class="slot-icon-box blue">
|
||
<image class="slot-icon" :src="item.icon" mode="widthFix"></image>
|
||
</view>
|
||
</template>
|
||
</uni-list-item>
|
||
</template>
|
||
|
||
<template v-if="showUser">
|
||
<uni-list-item :customStyle="{padding:0}" :border="false">
|
||
<template v-slot:body>
|
||
<text class="grey">好友列表</text>
|
||
</template>
|
||
</uni-list-item>
|
||
<uni-list-item v-for="(item, index) in friendList" :key="item._id" :customStyle="{padding:0}" class="user-list-item">
|
||
<template v-slot:body>
|
||
<scroll-view scroll-x="true" @scroll="scroll"
|
||
:scroll-left="activeIndex === index ?'':scrollLeft[index]" :show-scrollbar="false"
|
||
:scroll-with-animation="true" class="user-list-item-scroll-view">
|
||
<view class="item" @click="toChat(item)" @touchstart.passive="activeIndex = index">
|
||
<image class="avatar"
|
||
:src="item.avatar_file&&item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'"
|
||
mode="widthFix"></image>
|
||
<text class="username">{{item.nickname}}</text>
|
||
<button @click.stop="deleteItem(item,index,$event)" class="delete-btn" size="mini" type="warn">删除</button>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
</uni-list-item>
|
||
<uni-list-item :customStyle="{padding:0}">
|
||
<template v-slot:body>
|
||
<uni-load-more class="tip" :status="friendHasMore?'loading':'noMore'"></uni-load-more>
|
||
</template>
|
||
</uni-list-item>
|
||
</template>
|
||
</uni-list>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uniIm from '@/uni_modules/uni-im/lib/main.js';
|
||
const db = uniCloud.database()
|
||
export default {
|
||
emits:['clickMenu'],
|
||
props: {
|
||
// pc端时会控制隐藏
|
||
showMenu: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// pc端时会控制隐藏
|
||
showUser: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
scrollLeft: {
|
||
0: 0,
|
||
1: 1
|
||
},
|
||
activeIndex: false,
|
||
menuList:[
|
||
{
|
||
title:'加人/加群',
|
||
path:'./addPeopleGroups/addPeopleGroups',
|
||
srcName:'search'
|
||
},
|
||
{
|
||
title:'群聊',
|
||
path:'./groupList/groupList',
|
||
srcName:'group'
|
||
},
|
||
{
|
||
title:'创建群聊',
|
||
path:'./createGroup/createGroup',
|
||
srcName:'createGroup'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
//是否为pc宽屏（width>960px）
|
||
isWidescreen(){
|
||
return uniIm.isWidescreen
|
||
},
|
||
friendList() {
|
||
return uniIm.friend.dataList
|
||
},
|
||
friendHasMore(){
|
||
return uniIm.friend.hasMore
|
||
},
|
||
noticeList() {
|
||
return [{
|
||
title: "新朋友",
|
||
param: {
|
||
type: ['uni-im-friend-invite']
|
||
},
|
||
icon: "/uni_modules/uni-im/static/noticeIcon/newFriend.png"
|
||
},
|
||
{
|
||
title: "群通知",
|
||
param: {
|
||
type: ['uni-im-group-join-request']
|
||
},
|
||
icon: "/uni_modules/uni-im/static/noticeIcon/groupNotice.png"
|
||
},
|
||
{
|
||
title: "系统通知",
|
||
param: {
|
||
excludeType: ['uni-im-group-join-request', 'uni-im-friend-invite']
|
||
},
|
||
icon: "/uni_modules/uni-im/static/noticeIcon/notification.png"
|
||
}
|
||
].reduce((sum,item,index) => {
|
||
let {param:filterNotice,title} = item,
|
||
param = {filterNotice,title}
|
||
// console.log('param----',param);
|
||
sum.push({
|
||
title: item.title,
|
||
badge: this.getUnreadCount(item.param),
|
||
badgeStyle: {
|
||
backgroundColor: '#d60000'
|
||
},
|
||
path: "./notification/notification?param=" + encodeURIComponent(JSON.stringify(param)),
|
||
param,
|
||
icon: item.icon,
|
||
id:Date.now()+'-'+index
|
||
})
|
||
return sum
|
||
}, [])
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.$refs.udb.loadData({
|
||
clear: true
|
||
}, () => {
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
},
|
||
onReachBottom() {
|
||
// this.$refs.udb.loadMore()
|
||
},
|
||
methods: {
|
||
openPages(item,index){
|
||
// #ifdef H5
|
||
if(this.isWidescreen){
|
||
let componentName = 'uni-im-' + item.path.split('/')[1],
|
||
param = item.param
|
||
return this.$emit('clickMenu',{componentName,param,title:item.title})
|
||
}
|
||
// #endif
|
||
// console.log('item',item);
|
||
uni.navigateTo({
|
||
url:item.path,
|
||
fail: (e) => {
|
||
console.error(e,item.path);
|
||
}
|
||
})
|
||
},
|
||
getUnreadCount(param) {
|
||
return uniIm.notification.unreadCount(param)
|
||
},
|
||
toChat(item) {
|
||
// console.log('this.isWidescreen',this.isWidescreen)
|
||
if (this.isWidescreen) {
|
||
//若为宽屏，则触发右侧详情页的自定义事件，通知右侧窗体刷新详情
|
||
uni.$emit('uni-im-toChat',{user_id:item._id})
|
||
} else {
|
||
// 若为窄屏，则打开新窗体，在新窗体打开详情页面
|
||
openPages('/uni_modules/uni-im/pages/chat/chat?user_id=' + item._id);
|
||
}
|
||
|
||
function openPages(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
fail: (err1) => {
|
||
console.log({err1});
|
||
uni.switchTab({
|
||
url,
|
||
fail: (err2) => {
|
||
console.error({err1,err2})
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
hiddenDeleteBtn() {
|
||
this.activeIndex = false
|
||
this.$nextTick(() => {
|
||
for (let i in this.scrollLeft) {
|
||
this.$set(this.scrollLeft, i, 0)
|
||
// this.scrollLeft[i] = 0
|
||
}
|
||
})
|
||
},
|
||
async deleteItem(item, index,event) {
|
||
uni.showModal({
|
||
title: '确认要删除好友吗',
|
||
content: '此操作不可撤销',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
complete: async (e) => {
|
||
if (e.confirm) {
|
||
uni.showLoading({
|
||
mask: true
|
||
});
|
||
await db.collection('uni-im-friend').where({
|
||
friend_uid: item._id,
|
||
user_id:uniCloud.getCurrentUserInfo().uid
|
||
}).remove()
|
||
uni.hideLoading()
|
||
// 收到push消息后会自动，将此用户从列表中移除
|
||
}
|
||
}
|
||
});
|
||
this.hiddenDeleteBtn()
|
||
event.stopPropagation()
|
||
event.preventDefault()
|
||
},
|
||
scroll(e) {
|
||
// console.log(this.inMove);
|
||
this.$set(this.scrollLeft, this.activeIndex, e.detail.scrollLeft)
|
||
// this.scrollLeft[this.activeIndex] = e.detail.scrollLeft
|
||
for (let i in this.scrollLeft) {
|
||
if (i != this.activeIndex) {
|
||
this.$set(this.scrollLeft, i, 0)
|
||
// this.scrollLeft[i] = 0
|
||
}
|
||
}
|
||
},
|
||
handleItemClick(id) {
|
||
uni.navigateTo({
|
||
url: './detail?id=' + id
|
||
})
|
||
},
|
||
fabClick() {
|
||
// 打开新增页面
|
||
uni.navigateTo({
|
||
url: './add',
|
||
events: {
|
||
// 监听新增数据成功后, 刷新当前页面数据
|
||
refreshData: () => {
|
||
this.$refs.udb.loadData({
|
||
clear: true
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tip {
|
||
width: 750rpx;
|
||
/* #ifndef APP-NVUE */
|
||
position: relative;
|
||
// left: -15px;
|
||
/* #endif */
|
||
text-align: center;
|
||
padding:30px 0;
|
||
color: #999999;
|
||
/* #ifdef H5 */
|
||
cursor: default;
|
||
/* #endif */
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.grey {
|
||
background-color: #f5f5f5;
|
||
text-align: left;
|
||
padding: 8px;
|
||
font-size: 12px;
|
||
width: 750rpx;
|
||
}
|
||
|
||
.container {
|
||
width: 750rpx;
|
||
/* #ifndef APP-NVUE */
|
||
height: 100vh;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
background-color: #f5f5f5;
|
||
}
|
||
/* #ifdef APP-NVUE */
|
||
.list-box{
|
||
background-color: #f5f5f5;
|
||
}
|
||
/* #endif */
|
||
|
||
.menu-item {
|
||
width: 750rpx;
|
||
height: 60px;
|
||
border-bottom: #f5f5f5 solid 1px;
|
||
justify-content: space-around;
|
||
/* #ifndef MP */
|
||
// padding: 0 15rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.user-list-item-scroll-view{
|
||
width: 750rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
/* #ifndef APP-NVUE */
|
||
.user-list-item-scroll-view ::v-deep .uni-scroll-view ::-webkit-scrollbar {
|
||
display: none!important;
|
||
}
|
||
/* #endif */
|
||
|
||
.item {
|
||
width: 880rpx;
|
||
position: relative;
|
||
height: 60px;
|
||
align-items: center;
|
||
padding: 8px 15px;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.avatar {
|
||
background-color: #fefefe;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.username {
|
||
line-height: 30px;
|
||
margin-left: 30rpx;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.delete-btn {
|
||
border-radius: 0;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
width: 130rpx;
|
||
font-size: 26rpx;
|
||
padding: 0;
|
||
}
|
||
|
||
.slot-icon-box {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.slot-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.warn {
|
||
background-color: #FA9E3B;
|
||
}
|
||
|
||
.green {
|
||
background-color: #08C060;
|
||
}
|
||
|
||
.blue {
|
||
background-color: #5DBAFF;
|
||
}
|
||
</style>
|