teaching-uniapp/pages/msg/msg.vue

<template>
	<view class="msg">
		<statusBar :item="navBarData"></statusBar>
		<view class="allRead" @click="updateisread">
			一键已读
		</view>
		<view class="top">
			<view class="left" @click="puMsg" :class="current == 0 ? info1 : info2">
				<view class="" style="position: relative;">
					<view class="msgq" v-if="msgn>0">
						{{msgn}}
					</view>
					<text>消息通知</text>
				</view>
				<view v-if="current == 0" class="yun">
					<image src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/Ellipse 10.png"
						mode="aspectFill"></image>
				</view>
			</view>

			<view class="right" @click="sysMsg" :class="current == 1 ? info1 : info2">
				<view class="" style="position: relative;">
					<view class="msgq" v-if="msgn2>0">
						{{msgn2}}
					</view>
					<text>系统通知</text>
				</view>
				<view v-if="current == 1" class="yun">
					<image src="https://teacherapi.cocorobo.cn/teaching-file/static//yym/Ellipse 10.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<swiper class="scroll-view-height" @change="swipeIndex" :current="current" :duration="300">
			<swiper-item>
				<scroll-view scroll-y="true" @scrolltolower="informlower" style="height: 100%;">
					<view class="">
						<view class="" v-for="(item,index) in Msglist" :key="index">
							<view class="msgBlock" @click="readOneMsg" :data-id="item">
								<view class="dian" v-if="!item.isread">•</view>
								<view class="tit">
									<view>活动报名成功</view>
									<view class="msgtime">
										{{item.create_at}}
									</view>
								</view>
								<view class="contxt">恭喜！您已成功完成<text
										style="color: rgba(0, 86, 168, 1);">“{{item.acName}}”</text>活动报名。您的参与信息已经成功提交，您现在是我们活动的一部分，我们非常期待与您共度美好时光。
								</view>
								<view class="contxt">
									以下是一些额外信息，以确保您充分了解您的参与：
								</view>
								<!-- <view class="contxt1">
									<view class="" style="width: 2em;text-align: center;">•</view>
									<view class="uiTit"> <view class="uiAcTit">活动名称:</view> [{{item.acName}}]</view>
								</view> -->
								<!-- <view class="contxt1" style="display: flex;">
									<view class="" style="width: 2em;text-align: center;">•</view>
									<view class=""> 日期: [{{item.begin_at}}]</view>
								</view> -->
								<view class="contxt1" >
									<view class="" style="width: 2em;flex-shrink: 1; text-align: center;">•</view>
									<view class="uiTit"><view class="uiAcTit">时间:</view>   [{{item.begin_at}}]</view>
								</view>
								<!-- <view class="contxt1" >
									<view class="" style="width: 2em;text-align: center;">•</view>
									<view class="uiTit"> <view class="uiAcTit">地点:</view>  [{{item.address}}]</view>
								</view>
								<view class="contxt1" >
									<view class="" style="width: 2em;text-align: center;">•</view>
									<view class="uiTit"> <view class="uiAcTit">活动形式:</view> [{{item.acshape}}]</view>
								</view> -->
							</view>

							<view class="msgBlock" v-if="item.type==1" @click="readOneMsg" :data-id="item">
								<view class="dian" v-if="!item.isread">•</view>
								<view class="tit">
									<view>活动开始提醒</view>
									<text class="msgtime">{{item.create_at}}</text>
								</view>
								<view class="contxt">
									<text style="color: rgba(0, 86, 168, 1);">“丽湖职教双创教育国际虚拟教研室 • 常规教研活动
										第9期”</text>活动现在已经在我们的平台上正式上线，欢迎您点击浏览和积极参加。不要错过这个令人兴奋的机会，我们期待着与您一同度过难忘的时光。点击活动名称进入活动详情哦！
								</view>
							</view>
						</view>
					</view>
					<view class="loading">
						<view v-if="clLoading==1">数据加载中...</view>
						<view v-if="clLoading==2">没有更多了~~</view>
					</view>

				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y="true" @scrolltolower="syslower" style="height: 100%;">
					<view class="">
						<view class="" v-for="(item,index) in syslist" :key="index">
							<view class="msgBlock" @click="readOneMsg" :data-id="item">
								<view class="dian" v-if="!item.isread">•</view>
								<view class="tit">
									<view>恭喜您，成功加入会员</view>
									<text class="msgtime">{{item.create_at}}</text>
								</view>
								<view class="contxt1">
									尊敬的<text style="color: rgba(0, 86, 168, 1);">{{item.username}}</text>,
								</view>
								<view class="contxt">
									我们很高兴通知您，您已成功加入<text
										style="color: rgba(0, 86, 168, 1);">[XXX小程序会员]</text>！欢迎加入我们的团队，我们期待与您一同合作并参与。
								</view>
							</view>
						</view>
					</view>
					<view class="loading">
						<view v-if="sysLoading==1">数据加载中...</view>
						<view v-if="sysLoading==2">没有更多了~~</view>
					</view>

				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 弹窗 -->
		<view style="width: 750rpx;height: 100vh;background-color: rgba(0, 0, 0, .5);padding: 0;position: absolute;"
			v-show="showPopup">
			<!-- <view class="mask" v-show="showPopup" @click="closePopup"></view> -->
			<view class="popup-container">
				<view class="popup">
					<view class="header">
						<text>确认一键已读？</text>
					</view>
					<view class="footer">
						<view class="cancel-btn" @click="showPopup=false">取消</view>
						<view class="confirm-btn" @click="conf">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '活动消息',
					btn: 1
				},
				Msglist: [],
				syslist: [],

				showPopup: false,


				current: 0, //消息页面切换
				info1: "info1", //类名
				info2: "info2",
				msgn: 0,
				msgn2: 0,

				clLoading: 0,
				sysLoading: 0,

				clcurrentPage: 1, //页数
				syscurrentPage: 1, //页数


			};
		},
		methods: {
			// 获取消息通知数据
			getdata() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					ty: 0,
					page: this.clcurrentPage,
					lim: 15
				}
				this.$request('/selectMessage', "POST", data).then(res => {
					console.log('获取消息通知数据', res);
					if (!res[0].length) {
						this.clLoading = 2
					} else {
						this.clLoading = 0
					}

					this.Msglist = [...this.Msglist, ...res[0]]
				})
			},
			// 获取系统通知数据
			getdata2() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					ty: 1,
					page: this.syscurrentPage,
					lim: 15
				}
				this.$request('/selectMessage', "POST", data).then(res => {
					console.log('获取系统通知数据', res);
					if (!res[0].length) {
						this.sysLoading = 2
					} else {
						this.sysLoading = 0
					}

					this.syslist = [...this.syslist, ...res[0]]
				})
			},
			// 点击单个已读
			readOneMsg(e) {
				const data = e.currentTarget.dataset.id
				console.log(data);

				let a = {
					openid: this.$store.state.user.openid, //用户id
					id: data.id
				}

				if (data.isread == 0) {
					this.$request('/updateOneIsRead', "POST", a).then(res => {
						console.log(res);
						this.getMag()
						// 去除信息列表右上未读红点，current判断所在哪个消息列表
						if (this.current == 0) {
							this.Msglist.forEach(e => {
								if (data.id == e.id) {
									e.isread = 1
								}
							})
						} else {
							this.syslist.forEach(e => {
								if (data.id == e.id) {
									e.isread = 1
								}
							})
						}
					})
				}
			},

			// 消息通知触底
			informlower() {
				console.log('没触底？');
				if (this.clLoading == 2) return
				this.clLoading = 1
				this.clcurrentPage++
				setTimeout(this.getdata, 1000)
			},
			// 系统通知触底
			syslower() {
				console.log('没触底？');
				if (this.sysLoading == 2) return
				this.sysLoading = 1
				this.syscurrentPage++
				setTimeout(this.getdata2, 1000)
			},
			// 更新已读
			updateisread() {
				this.showPopup = true
			},
			// 弹窗确认已读
			conf() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					type: this.current,
				}
				this.$request('/updateIsRead', "POST", data).then(res => {
					// console.log('获取', res);
					// 未读提示红点重置为0，在后面赋值
					// this.msgn = 0
					// this.msgn2 = 0
					// 调用方法赋值未读红点
					this.getMag()

					// 去除信息列表右上未读红点，current判断所在哪个消息列表
					if (this.current == 0) {
						this.Msglist.forEach(e => {
							e.isread = 1
						})
					} else {
						this.syslist.forEach(e => {
							e.isread = 1
						})
					}
					this.showPopup = false
				})
			},
			// 获取未读信息
			getMag() {
				this.$request('/selectUnreadMsg', "POST", {
					oid: this.$store.state.user.openid
				}).then(res => {
					console.log('获取未读信息', res);
					// 未读提示红点重置为0，在后面赋值
					this.msgn = 0
					this.msgn2 = 0
					// 获取全部未读信息
					let arr = res[0]
					if (arr.length != 0) {
						// 遍历未读信息，展示信息切换栏右上红点信息
						arr.forEach(e => {
							if (e.type == 0) {
								this.msgn = res[0][0].msg
							} else if (e.type == 1 && arr.length == 2) {
								this.msgn2 = res[0][1].msg
							} else if (e.type == 1 && arr.length == 1) {
								this.msgn2 = res[0][0].msg
							}
						})
					}
				})
			},
			// 切换消息页面
			puMsg() {
				this.current = 0;
			},
			sysMsg() {
				this.current = 1;
			},
			swipeIndex(index) {
				this.current = index.detail.current;
			},
		},
		onShow() {
			// 消息通知
			this.Msglist= []
			//系统通知
			this.syslist= []
			this.getdata()
			this.getdata2()
			this.getMag()
		}
	}
</script>

<style lang="scss">
	.msg {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
		width: 750rpx;
		height: 100vh;

		.allRead {
			position: fixed;
			font-size: 20rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 90rpx;
			background-color: rgba(0, 86, 168, 1);
			color: #fff;
			right: 70rpx;
			z-index: 10;
			bottom: 100rpx;
		}

		.loading {
			height: 30rpx;
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 100rpx;
			font-size: 26rpx;
			color: #888;
			line-height: 2em;
		}

		.top {
			display: flex;
			justify-content: space-between;
			margin: auto;
			width: 100%;
			background-color: #ffffff;
			padding: 10px 20%;
			// position: relative;



			.msgq {
				width: 32rpx;
				height: 32rpx;
				background-color: rgba(213, 73, 65, 1);
				border-radius: 50rpx;
				color: #fff;
				font-size: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: -10rpx;
				right: -20rpx;
				font-weight: normal !important;
			}

			.info1 {
				font-weight: bold !important;
				position: relative;
				color: rgba(0, 0, 0, 0.8);
				font-size: 34rpx;
				line-height: 48rpx;
				width: 136rpx;
				height: 48rpx;
				text-align: center;

				.yun {
					width: 134rpx;
					height: 32rpx;
					position: absolute;
					left: 0;
					bottom: -10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.info2 {
				color: rgba(0, 0, 0, 0.6);
				font-size: 34rpx;
				font-weight: 400;
				line-height: 48rpx;
				width: 136rpx;
				height: 48rpx;
				text-align: center;
				font-family: 微软雅黑;
			}
		}

		.scroll-view-height {
			padding: 20rpx 0;
			flex: 1;

			.msgBlock {
				width: 720rpx;
				margin: auto;
				background-color: #ffffff;
				border-radius: 12px;
				padding: 28rpx 24rpx 32rpx 24rpx;
				margin-bottom: 20rpx;
				position: relative;

				.dian {
					position: absolute;
					right: 10rpx;
					top: -20rpx;
					font-size: 60rpx;
					color: rgba(213, 73, 65, 1);
				}

				.tit {
					font-size: 34rpx;
					font-weight: 400;
					height: 48rpx;
					line-height: 48rpx;
					margin-bottom: 20rpx;
					color: rgba(0, 0, 0, 0.8);
					display: flex;
					justify-content: space-between;

					.msgtime {
						line-height: 58rpx;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.4);
					}
				}

				.contxt {
					text-indent: 2em;
					color: rgba(0, 0, 0, 0.6);
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.contxt1 {
					color: rgba(0, 0, 0, 0.6);
					font-size: 28rpx;
					line-height: 40rpx;
					display: flex;
					.uiTit{
						display: flex;
						.uiAcTit{
							width: auto;
							// width: 120rpx;
							// flex-shrink: 0;
						}
					}
				}
			}


		}
	}
</style>