hengmei-one/pagesB/messagecenter/messagecenter.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>