hengmei-two/pagesB/messagecenter/messagecenter.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'消息'" :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 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'//默认日程提醒
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {
			if(this.total!=this.dataList.length){
				this.page++
				this.checkList()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多消息','none',1000)
				this.isZanw = false
			}
		},
		onShow() {
			this.$toolAll.tools.isLogin();
		},
		onLoad(options) {
			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();
		},
		methods: {
			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>