211 lines
7.3 KiB
Vue
211 lines
7.3 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'消息'" :whereCome="comeNum" :statusTitle="true"></status-nav>
|
||
<view id="daoh" class="bacf pad-zy30 pad-sx20 isTopf fon28 col3 disja" :style="{top:statusHNH+'px'}">
|
||
<view @tap="switchEv(true)" :class="isWen?'isWen bold':'col9'" class="posir">日程提醒</view>
|
||
<view @tap="switchEv(false)" :class="!isWen?'isWen bold':'col9'" class="posir">消息中心</view>
|
||
</view>
|
||
<!-- 列表 -->
|
||
<view :style="{paddingTop: (statusHNH+chuTop+15)+'px'}" class="pad-zy32">
|
||
<view v-if="dataList.length!=0">
|
||
<view v-for="(item,index) in dataList" :key="index">
|
||
<view class="fon24 col6 tc mar-sx50">{{item.time}}</view>
|
||
<view @tap="readMsg(index,indexl)" class="radius10 bacf pad20 mar-x20" v-for="(iteml,indexl) in item.list" :key="indexl">
|
||
<view class="disac">
|
||
<image v-if="iteml.is_read==0" class="message-img" src="/static/public/unread.png" mode=""></image>
|
||
<image v-if="iteml.is_read==1" class="message-img" src="/static/public/read.png" mode=""></image>
|
||
<view class="fon28 col3 bold mar-zy10">{{iteml.title}}</view>
|
||
<view :style="{background:iteml.is_read==1?'rgba(204, 204, 204,1)':'#FF4D4D'}" class="message-status">{{iteml.is_read==1?'已读':'未读'}}</view>
|
||
</view>
|
||
<view v-if="iteml.content!=''" class="fon26 col3 mar-s20">{{iteml.content}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="disjcac fc" style="margin-top: 50%;">
|
||
<image src="/static/public/nothingm.png" style="width: 474rpx;height: 273rpx;" mode="aspectFill"></image>
|
||
<view class="fon24 col3">暂无消息</view>
|
||
</view>
|
||
</view>
|
||
<!-- 返回顶部 -->
|
||
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
||
<!-- 底部客服 -->
|
||
<public-customer :nbottom="100"></public-customer>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
searchVal:'',//输入框的值
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
dataList:[
|
||
// {
|
||
// time:'2021-07-15 14:25',
|
||
// list:[
|
||
// {is_read:0,title:'系统消息',content:''},
|
||
// {is_read:0,title:'系统消息',content:'尊敬的用户XX您好，您预约已成功，请与2021年7月28 日14:30分准时到达“恒美植发”门店进行检查。'},
|
||
// {is_read:0,title:'系统消息',content:'尊敬的用户XX您好，您预约已成功，请与2021年7月28 日14:30分准时到达“恒美植发”门店进行检查。'},
|
||
// ]
|
||
// },
|
||
// {
|
||
// time:'2021-07-10 22:36',
|
||
// list:[
|
||
// {is_read:1,title:'系统消息',content:'尊敬的用户XX您好，您预约已成功，请与2021年7月28 日14:30分准时到达“恒美植发”门店进行检查。'},
|
||
// {is_read:1,title:'系统消息',content:'尊敬的用户XX您好，您预约已成功，请与2021年7月28 日14:30分准时到达“恒美植发”门店进行检查。'},
|
||
// {is_read:1,title:'系统消息',content:'尊敬的用户XX您好，您预约已成功，请与2021年7月28 日14:30分准时到达“恒美植发”门店进行检查。'},
|
||
// ]
|
||
// }
|
||
],
|
||
showTop:false,//是否显示返回顶部
|
||
chuTop:'',
|
||
isWen:true,
|
||
page:1,
|
||
size:10,
|
||
total:0,
|
||
isZanw:true,
|
||
ntype:'reminders',//默认日程提醒
|
||
comeNum:0
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||
},
|
||
onReachBottom() {
|
||
if(this.total!=this.dataList.length){
|
||
this.page++
|
||
this.checkMsg()//调用自主预约列表事件
|
||
} else {
|
||
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多消息','none',1000)
|
||
this.isZanw = false
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin();
|
||
},
|
||
onLoad(options) {
|
||
// 从其他方式进入当前页面，点击返回回到我的页面
|
||
if(options.comeNum==undefined) this.comeNum = 2;
|
||
const query = wx.createSelectorQuery()
|
||
query.select('#daoh').boundingClientRect((rect) => {
|
||
// console.log('状态栏+标题栏：',rect);
|
||
this.chuTop = rect.height
|
||
}).exec()
|
||
if(options.index==undefined){this.isWen = false;this.ntype = 'message';}
|
||
this.checkMsg();
|
||
let that = this ;
|
||
wx.showModal({
|
||
title: '温馨提示',
|
||
content: '为及时通知到您，需要向您申请消息发送权限，不会骚扰您的生活！',
|
||
confirmText:"同意",
|
||
cancelText:"拒绝",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
//调用订阅消息
|
||
console.log('用户点击确定', '订阅消息授权成功');
|
||
//调用订阅
|
||
wx.requestSubscribeMessage({
|
||
tmplIds: ['d0efR-Ga27c6eIvx9mAwJcnAqzhM_Sq68XiFvjvlBJM','eyxvInLLF3L_wmcSQc_O7XLKF7RoGK1dM3OwKj5fHio'],
|
||
success: (res) => {
|
||
console.log(res, 'success')
|
||
},
|
||
fail: (res) => {
|
||
console.log(res, 'fail')
|
||
},
|
||
complete: (res) => {
|
||
wx.getSetting({
|
||
withSubscriptions: true,
|
||
success: (res) => {
|
||
console.log(res, '获取设置信息')
|
||
}
|
||
})
|
||
console.log(res, 'complete')
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消', '订阅消息授权');
|
||
///显示第二个弹说明一下
|
||
wx.showModal({
|
||
title: '温馨提示',
|
||
content: '拒绝后您将无法获得及时的消息通知哦',
|
||
confirmText:"知道了",
|
||
showCancel:false,
|
||
success: function (res) {
|
||
///点击知道了的后续操作
|
||
///如跳转首页面
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
readMsg(index1,index2){
|
||
this.dataList[index1].list[index2].is_read = 1;
|
||
},
|
||
checkMsg(){
|
||
this.$requst.post('user/messages',{page:this.page,size:this.size,type:this.ntype}).then(res=>{
|
||
// console.log('消息列表：',res);
|
||
if(res.code==0){
|
||
if(this.page==1) this.dataList = [];
|
||
this.total = res.data.total;
|
||
if(res.data.list.length!=0){
|
||
res.data.list.forEach(item=>{
|
||
let titleMsg = '';
|
||
if(item.type=='notice') titleMsg = "通知";
|
||
if(item.type=='system') titleMsg = "系统消息";
|
||
let msgObj = {
|
||
time:item.send_at,
|
||
list:[
|
||
{
|
||
is_read:item.is_read,
|
||
title:titleMsg,
|
||
content:item.content,
|
||
}
|
||
]
|
||
}
|
||
this.dataList.push(msgObj)
|
||
})
|
||
}
|
||
}
|
||
},error=>{})
|
||
},
|
||
switchEv(flag){
|
||
this.isWen = flag;
|
||
this.isZanw = true;
|
||
this.page = 1;
|
||
if(flag){
|
||
this.ntype = 'reminders';
|
||
this.checkMsg();
|
||
} else {
|
||
this.ntype = 'message';
|
||
this.checkMsg();
|
||
}
|
||
},
|
||
backTop(){//回到顶部事件
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.isWen{color: #3875F6;}
|
||
.isWen::after{
|
||
content: '';
|
||
display: block;
|
||
height: 8rpx;
|
||
width: 80%;
|
||
position: absolute;
|
||
bottom: -20rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #3875F6;
|
||
}
|
||
</style>
|