hm-examples/pagesB/messagecenter/messagecenter.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:statusHeight+'px'}">
			<view @tap="switchEv(true)" :class="isWen?'bold':'col9'" class="posir" :style="{color: isWen?publicColor:''}">
				日程提醒
				<view v-if="isWen" class="isWen":style="{background: publicColor}"></view>
			</view>
			<view @tap="switchEv(false)" :class="!isWen?'bold':'col9'" class="posir" :style="{color: !isWen?publicColor:''}">
				消息中心
				<view v-if="!isWen" class="isWen":style="{background: publicColor}"></view>
			</view>
		</view>
		<!-- 列表 -->
		<view :style="{paddingTop: (statusHeight+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 {
				searchVal:'',//输入框的值
				dataList:[],
				showTop:false,//是否显示返回顶部
				chuTop:'',
				isWen:true,
				page:1,
				size:10,
				total:0,
				isZanw:true,
				ntype:'reminders',//默认日程提醒
				comeNum:0
			}
		},
		computed:{
			statusHeight() {
				return this.$store.state.statusHeight
			},
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
		},
		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.disableShareEv();
		},
		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{
		content: '';
		display: block;
		height: 8rpx;
		width: 80%;
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #3875F6;
	}
</style>