移动app
This commit is contained in:
@@ -0,0 +1,275 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user