276 lines
7.0 KiB
Plaintext
276 lines
7.0 KiB
Plaintext
<template>
|
||
<view class="notification-box">
|
||
<text class="tips" v-if="tips">{{tips}}</text>
|
||
<uni-list :border="false">
|
||
<template v-if="notificationDatas && notificationDatas.length">
|
||
<uni-list-chat v-for="(item,index) in notificationDatas" :key="item.id"
|
||
:avatarCircle="true" :clickable="true"
|
||
:badge-text="item.is_read?'':'dot'" badgePositon="left"
|
||
:title="item.payload.title||item.title"
|
||
:note="item.payload.content||item.content||'无'"
|
||
:avatar="item.payload.avatar_file&&item.payload.avatar_file.url ? item.payload.avatar_file.url : '/uni_modules/uni-im/static/noticeIcon/notification2.png'"
|
||
@click.native="clickHandle(index,item)" direction="column" :time="friendlyTime(item.create_time)"
|
||
>
|
||
<view class="handle-box">
|
||
<template v-if="item.payload.state">
|
||
<text class="handle done">
|
||
{{'已'+(item.payload.state == 'confirm'?item.payload.confirmText:item.payload.cancelText)}}
|
||
</text>
|
||
</template>
|
||
<template v-else>
|
||
<text class="handle"
|
||
@click.stop="doAction(index,0)"
|
||
v-if="item.payload.cancelText"
|
||
>{{item.payload.cancelText}}</text>
|
||
<text
|
||
class="handle"
|
||
@click.stop="doAction(index,1)"
|
||
v-if="item.payload.confirmText"
|
||
>{{item.payload.confirmText}}</text>
|
||
<uni-icons v-if="!item.payload.cancelText && !item.payload.confirmText && item.path"
|
||
type="right" color="#cccccc"></uni-icons>
|
||
</template>
|
||
</view>
|
||
</uni-list-chat>
|
||
</template>
|
||
<uni-list-item v-else class="load-more">
|
||
<template v-slot:body>
|
||
<uni-load-more class="tip" :status="hasMore?'loading':'noMore'"></uni-load-more>
|
||
</template>
|
||
</uni-list-item>
|
||
</uni-list>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uniImUtils from '@/uni_modules/uni-im/common/utils.js';
|
||
import uniIm from '@/uni_modules/uni-im/lib/main.js';
|
||
import action from './action.js';
|
||
const db = uniCloud.database();
|
||
export default {
|
||
data() {
|
||
return {
|
||
filterNotice:{},
|
||
tips:"",
|
||
hasMore:true
|
||
// notificationDatas:[]
|
||
}
|
||
},
|
||
async onLoad({param}) {
|
||
// console.log(param,decodeURIComponent(param))
|
||
param = JSON.parse(decodeURIComponent(param))
|
||
// console.log(param)
|
||
this.setParam(param)
|
||
},
|
||
computed: {
|
||
//是否为pc宽屏（width>960px）
|
||
isWidescreen(){
|
||
return uniIm.isWidescreen
|
||
},
|
||
notificationDatas(){
|
||
let notificationDatas = uniIm.notification.get(this.filterNotice)
|
||
if(notificationDatas.length == 0){
|
||
setTimeout(()=> {
|
||
this.hasMore = false
|
||
}, 100);
|
||
}
|
||
return notificationDatas
|
||
}
|
||
},
|
||
mounted() {
|
||
this.hasMore = uniIm.notification.hasMore
|
||
},
|
||
methods: {
|
||
setParam({filterNotice,title}){
|
||
if(typeof filterNotice == 'string'){
|
||
filterNotice = JSON.parse(decodeURIComponent(filterNotice))
|
||
}
|
||
this.filterNotice = filterNotice
|
||
console.log('filterNotice',filterNotice)
|
||
uni.setNavigationBarTitle({
|
||
title
|
||
})
|
||
|
||
if(title == '新朋友' && !this.isWidescreen){
|
||
this.tips = '好友请求通知'
|
||
}
|
||
},
|
||
async setItem({_id},param){
|
||
const datas = uniIm.notification.get(this.filterNotice)
|
||
for (let i = 0; i < datas.length; i++) {
|
||
if(datas[i]._id == _id){
|
||
datas[i] = deepAssign(datas[i],param)
|
||
uniIm.notificationDatas = datas
|
||
console.log('uniIm.notificationDatas',uniIm.notificationDatas)
|
||
break;
|
||
}
|
||
}
|
||
|
||
let ares = await db.collection('uni-im-notification')
|
||
.where(`"_id" == "${_id}" && "user_id" == $cloudEnv_uid`)
|
||
.get()
|
||
// console.log(13231,ares);
|
||
let res = await db.collection('uni-im-notification')
|
||
.where(`"_id" == "${_id}" && "user_id" == $cloudEnv_uid`)
|
||
.update(param)
|
||
// console.log('res---66666',param,res.result.updated);
|
||
|
||
/**
|
||
*判断对象是否是一个纯粹的对象
|
||
*/
|
||
function isPlainObject(obj){
|
||
return typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]'
|
||
}
|
||
/**
|
||
*深度合并多个对象的方法
|
||
*/
|
||
function deepAssign( ){
|
||
let len = arguments.length, target = arguments[0]
|
||
if(!isPlainObject(target)){
|
||
target = {}
|
||
}
|
||
for (let i = 1; i < len; i++){
|
||
let source = arguments[i]
|
||
if( isPlainObject( source ) ){
|
||
for( let s in source ){
|
||
if ( s === '__proto__' || target === source[s] ) {
|
||
continue
|
||
}
|
||
if( isPlainObject( source[s] ) ){
|
||
target[s] = deepAssign(target[s], source[s])
|
||
}else{
|
||
target[s] = source[s]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return target
|
||
}
|
||
},
|
||
async clickHandle(index,item){
|
||
// console.log('index',index,item);
|
||
//如果未读，设置为已读
|
||
if(!item.is_read){
|
||
this.setItem(item,{is_read:true})
|
||
}
|
||
//存在链接就跳转
|
||
let path = item.path || item.payload.path
|
||
if(path){
|
||
uni.navigateTo({
|
||
url:path,
|
||
fail: (e) => {
|
||
console.error(e);
|
||
}
|
||
})
|
||
}
|
||
// let item = this.notificationDatas[index]
|
||
// item.data.is_read = true
|
||
// this.notificationDatas[index] = Object.assign({},item)
|
||
// console.log(this.notificationDatas);
|
||
},
|
||
doAction(index,type){
|
||
let item = this.notificationDatas[index]
|
||
let e = {
|
||
subType:item.payload.subType,
|
||
confirm:type===1,
|
||
cancel:type===0,
|
||
item
|
||
}
|
||
action(e,data=>{
|
||
console.log('doAction',data)
|
||
this.setItem(item,{
|
||
is_read:true,
|
||
payload:{
|
||
state : type===1?'confirm':'cancel'
|
||
}
|
||
})
|
||
})
|
||
// console.log(index);
|
||
},
|
||
friendlyTime(timestamp) {
|
||
return uniImUtils.toFriendlyTime(timestamp)
|
||
},
|
||
handleText(state){
|
||
switch (state){
|
||
case 0:
|
||
return '同意'
|
||
break;
|
||
case 100:
|
||
return '已同意'
|
||
break;
|
||
case -100:
|
||
return '已拒绝'
|
||
break;
|
||
default:
|
||
return '其他'
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.notification-box{
|
||
/* #ifndef APP-NVUE */
|
||
height: 100vh;
|
||
// width: 750rpx;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
background-color: #f5f5f5;
|
||
}
|
||
.tips{
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding-left: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
.handle-box{
|
||
flex-direction: row;
|
||
height: 40px;
|
||
align-items: center;
|
||
}
|
||
.handle{
|
||
width: 50px;
|
||
text-align: center;
|
||
height: 25px;
|
||
line-height: 25px;
|
||
background-color: #efefef;
|
||
border-radius: 50px;
|
||
font-size: 12px;
|
||
margin:0 5px;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
.done{
|
||
width: 50px;
|
||
background-color: #FFF;
|
||
color: #aaa;
|
||
/* #ifdef H5 */
|
||
cursor: default;
|
||
/* #endif */
|
||
}
|
||
.load-more{
|
||
background-color: #f5f5f5!important;
|
||
justify-content: center;
|
||
}
|
||
.tip{
|
||
position: relative;
|
||
left: -15px;
|
||
width: 750rpx;
|
||
/* #ifndef APP-NVUE */
|
||
/* pc宽屏时需要使用100vw */
|
||
width: 100vw;
|
||
/* #endif */
|
||
}
|
||
/* #ifdef MP-WEIXIN */
|
||
.load-more ::v-deep .uni-list-item{
|
||
background-color: #f5f5f5!important;
|
||
}
|
||
/* #endif */
|
||
</style>
|