2021-08-19 06:40:59 +00:00
|
|
|
|
<template>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<!-- 状态栏 -->
|
2022-01-12 04:24:29 +00:00
|
|
|
|
<status-nav :titleVal="'消息'" :whereCome="comeNum" :statusTitle="true"></status-nav>
|
2021-10-22 03:07:32 +00:00
|
|
|
|
<view id="daoh" class="bacf pad-zy30 pad-sx20 isTopf fon28 col3 disja" :style="{top:statusHNH+'px'}">
|
2021-11-02 10:23:53 +00:00
|
|
|
|
<view @tap="switchEv(true)" :class="isWen?'isWen bold':'col9'" class="posir">日程提醒</view>
|
|
|
|
|
|
<view @tap="switchEv(false)" :class="!isWen?'isWen bold':'col9'" class="posir">消息中心</view>
|
2021-10-22 03:07:32 +00:00
|
|
|
|
</view>
|
2021-08-19 06:40:59 +00:00
|
|
|
|
<!-- 列表 -->
|
2021-10-22 03:07:32 +00:00
|
|
|
|
<view :style="{paddingTop: (statusHNH+chuTop+15)+'px'}" class="pad-zy32">
|
2021-08-19 06:40:59 +00:00
|
|
|
|
<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>
|
2021-12-20 08:02:27 +00:00
|
|
|
|
<view @tap="readMsg(index,indexl)" class="radius10 bacf pad20 mar-x20" v-for="(iteml,indexl) in item.list" :key="indexl">
|
2021-08-19 06:40:59 +00:00
|
|
|
|
<view class="disac">
|
2021-11-02 10:23:53 +00:00
|
|
|
|
<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>
|
2021-08-19 06:40:59 +00:00
|
|
|
|
<view class="fon28 col3 bold mar-zy10">{{iteml.title}}</view>
|
2021-11-02 10:23:53 +00:00
|
|
|
|
<view :style="{background:iteml.is_read==1?'rgba(204, 204, 204,1)':'#FF4D4D'}" class="message-status">{{iteml.is_read==1?'已读':'未读'}}</view>
|
2021-08-19 06:40:59 +00:00
|
|
|
|
</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> -->
|
2021-08-26 09:57:04 +00:00
|
|
|
|
<!-- 底部客服 -->
|
|
|
|
|
|
<public-customer :nbottom="100"></public-customer>
|
2021-08-19 06:40:59 +00:00
|
|
|
|
</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,//是否显示返回顶部
|
2021-10-22 03:07:32 +00:00
|
|
|
|
chuTop:'',
|
|
|
|
|
|
isWen:true,
|
2021-11-02 10:23:53 +00:00
|
|
|
|
page:1,
|
|
|
|
|
|
size:10,
|
|
|
|
|
|
total:0,
|
|
|
|
|
|
isZanw:true,
|
2022-01-12 04:24:29 +00:00
|
|
|
|
ntype:'reminders',//默认日程提醒
|
|
|
|
|
|
comeNum:0
|
2021-08-19 06:40:59 +00:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onPageScroll(e) {
|
|
|
|
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
|
|
|
|
|
},
|
2021-11-02 10:23:53 +00:00
|
|
|
|
onReachBottom() {
|
|
|
|
|
|
if(this.total!=this.dataList.length){
|
|
|
|
|
|
this.page++
|
|
|
|
|
|
this.checkList()//调用自主预约列表事件
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多消息','none',1000)
|
|
|
|
|
|
this.isZanw = false
|
|
|
|
|
|
}
|
2021-08-19 06:40:59 +00:00
|
|
|
|
},
|
2021-08-22 08:53:12 +00:00
|
|
|
|
onShow() {
|
2021-11-02 10:23:53 +00:00
|
|
|
|
this.$toolAll.tools.isLogin();
|
2021-08-22 08:53:12 +00:00
|
|
|
|
},
|
2021-10-22 03:07:32 +00:00
|
|
|
|
onLoad(options) {
|
2022-01-12 04:24:29 +00:00
|
|
|
|
// 从其他方式进入当前页面，点击返回回到我的页面
|
|
|
|
|
|
if(options.comeNum==undefined) this.comeNum = 2;
|
2021-10-22 03:07:32 +00:00
|
|
|
|
const query = wx.createSelectorQuery()
|
|
|
|
|
|
query.select('#daoh').boundingClientRect((rect) => {
|
|
|
|
|
|
// console.log('状态栏+标题栏：',rect);
|
|
|
|
|
|
this.chuTop = rect.height
|
|
|
|
|
|
}).exec()
|
2021-11-02 10:23:53 +00:00
|
|
|
|
if(options.index==undefined){this.isWen = false;this.ntype = 'message';}
|
|
|
|
|
|
this.checkMsg();
|
2021-12-30 03:05:30 +00:00
|
|
|
|
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) {
|
|
|
|
|
|
///点击知道了的后续操作
|
|
|
|
|
|
///如跳转首页面
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2021-08-19 06:40:59 +00:00
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
2021-12-20 08:02:27 +00:00
|
|
|
|
readMsg(index1,index2){
|
|
|
|
|
|
this.dataList[index1].list[index2].is_read = 1;
|
|
|
|
|
|
},
|
2021-08-19 06:40:59 +00:00
|
|
|
|
checkMsg(){
|
2021-11-02 10:23:53 +00:00
|
|
|
|
this.$requst.post('user/messages',{page:this.page,size:this.size,type:this.ntype}).then(res=>{
|
2021-08-19 06:40:59 +00:00
|
|
|
|
// console.log('消息列表：',res);
|
|
|
|
|
|
if(res.code==0){
|
2021-11-02 10:23:53 +00:00
|
|
|
|
if(this.page==1) this.dataList = [];
|
|
|
|
|
|
this.total = res.data.total;
|
2021-08-19 06:40:59 +00:00
|
|
|
|
if(res.data.list.length!=0){
|
|
|
|
|
|
res.data.list.forEach(item=>{
|
2021-12-20 08:02:27 +00:00
|
|
|
|
let titleMsg = '';
|
|
|
|
|
|
if(item.type=='notice') titleMsg = "通知";
|
|
|
|
|
|
if(item.type=='system') titleMsg = "系统消息";
|
2021-08-19 06:40:59 +00:00
|
|
|
|
let msgObj = {
|
|
|
|
|
|
time:item.send_at,
|
|
|
|
|
|
list:[
|
|
|
|
|
|
{
|
|
|
|
|
|
is_read:item.is_read,
|
|
|
|
|
|
title:titleMsg,
|
|
|
|
|
|
content:item.content,
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
this.dataList.push(msgObj)
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},error=>{})
|
|
|
|
|
|
},
|
2021-11-02 10:23:53 +00:00
|
|
|
|
switchEv(flag){
|
|
|
|
|
|
this.isWen = flag;
|
|
|
|
|
|
this.isZanw = true;
|
|
|
|
|
|
this.page = 1;
|
|
|
|
|
|
if(flag){
|
|
|
|
|
|
this.ntype = 'reminders';
|
|
|
|
|
|
this.checkMsg();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.ntype = 'message';
|
|
|
|
|
|
this.checkMsg();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2021-08-19 06:40:59 +00:00
|
|
|
|
backTop(){//回到顶部事件
|
|
|
|
|
|
uni.pageScrollTo({
|
|
|
|
|
|
scrollTop: 0,
|
|
|
|
|
|
duration: 300
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
2021-10-22 03:07:32 +00:00
|
|
|
|
.isWen{color: #3875F6;}
|
|
|
|
|
|
.isWen::after{
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
height: 8rpx;
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: -20rpx;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
background: #3875F6;
|
|
|
|
|
|
}
|
2021-08-19 06:40:59 +00:00
|
|
|
|
</style>
|
