122 lines
4.3 KiB
Vue
122 lines
4.3 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'消息中心'" :statusTitle="true"></status-nav>
|
||
<!-- 列表 -->
|
||
<view :style="{paddingTop: statusHNH+'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 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" style="width:46rpx;height:56rpx;" src="/static/public/unread.png" mode=""></image>
|
||
<image v-if="iteml.is_read==1" style="width:46rpx;height:56rpx;" 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'}" style="border-radius: 5rpx;font-size: 24rpx;color: #FFFFFF;padding: 2rpx 8rpx 4rpx 6rpx;transform: scale(.8);">{{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,//是否显示返回顶部
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||
},
|
||
onReachBottom() {//触底事件
|
||
// for (let i = 0; i < 4; i++) {
|
||
// let obj = {
|
||
// status:false,
|
||
// main_img:'/static/public/main_img.png',
|
||
// title:'恒美小课堂',
|
||
// content:'饺子会吃肉？',
|
||
// head_img:'/static/public/like.png',
|
||
// name:'吃肉的饺子'
|
||
// }
|
||
// this.dataList.push(obj)
|
||
// }
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin()
|
||
},
|
||
onLoad() {
|
||
this.checkMsg()
|
||
},
|
||
methods: {
|
||
checkMsg(){
|
||
this.$requst.post('user/messages').then(res=>{
|
||
// console.log('消息列表：',res);
|
||
if(res.code==0){
|
||
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=>{})
|
||
},
|
||
backTop(){//回到顶部事件
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|