lanan-app/pages/message/message.vue

<template>
	<view class="content">
		<VNavigationBarVue title="消息通知"></VNavigationBarVue>
		<scroll-view scroll-y @scrolltolower="scrolltolower" class="mubu">
			<view class="jsy" v-if="listArr.length == 0">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
			</view>
			<view class="noticeGroup" v-for="group in groupArr" :key="group.date">
				<view class="noticeDate">{{ group.date }}</view>
				<!-- <view class="" @click="dianyidain()">测试方法</view> -->
				<view class="bao-box" v-for="(item,index) in group.noticeList" :key="index">
					<view class="icon-lv">
						<view class="hongdi" v-if="item.isRead == '0' "></view>
						<image src="@/static/icons/message/notice.png" mode="aspectFit"></image>
					</view>
					<view class="you">
						<view class="box-top">
							<text class="numone">{{item.title || ''}}</text>
							<!-- <text class="numthree">{{item.createTime.slice(10, -3) || ''}}</text> -->
						</view>
						<view class="numtwo">{{item.content || ''}}</view>
					</view>
				</view>
			</view>
			
		</scroll-view>

		<view style="width: 100%; height: 100rpx;"></view>
		<tabBar msg="1"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue'
	import VNavigationBarVue from '../../components/VNavigationBar.vue';
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs';
	const innerAudioContext = uni.createInnerAudioContext();
	export default {

		data() {
			return {
				msg: '2',
				value2: 1,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				listArr: [],
				groupArr: []
			}
		},
		onShow() {
			this.driverRescuePage()
			this.getlooklook()
		},
		components: {
			tabBar,
			VNavigationBarVue
		},
		methods: {
			scrolltolower() {
				if (this.pageNum >= this.totalPages) {
					uni.showToast({
						title: '没有下一页数据',
						icon: 'none'
					})

				} else {
					this.pageNum++
					this.driverRescuePage()
				}
			},
			dianyidain() {
				console.log('执行了');

				innerAudioContext.src =
					'https://mp-8344f740-3cda-4d89-b902-7235115ddaaf.cdn.bspapp.com/8080/LOL页面确认声_耳聆网_[声音ID：36839].mp3';
				innerAudioContext.play()


			},
			driverRescuePage() {
				let data = {

					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				request({
					url: '/announcement/announcement/getOwnMsg',
					method: 'get',
					params: data
				}).then((res) => {
					if (res.code == 200) {
						if (this.pageNum != 1) {
							this.listArr = this.listArr.concat(res.rows)
							this.noticeGroupByCreateTime(res.rows)
						} else {
							this.listArr = res.rows
							this.groupArr = []
							this.noticeGroupByCreateTime(this.listArr)
						}

						let total = res.total
						this.totalPages = Math.ceil(total / this.pageSize);
					}
				})
			},
			/**
			 * 消息通过日期分组
			 */
			noticeGroupByCreateTime(list) {
				if (list && list.length > 0) {
					list.forEach((item) => {
						const day = dayjs(item.createTime).format('MM-DD HH:mm')
						const find = this.groupArr.find(f => f.date === day)
						if (find) {
							find.noticeList.push(item)
						} else {
							this.groupArr.push({
								date: day,
								noticeList: [item]
							})
						}
					})
				}
				console.log('this.groupArr: ',this.groupArr);
			},
			async getlooklook() {
				let res = await request({
					url: '/announcement/announcement/setAllRead',
					method: 'get',
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background: #F7F8FC;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.mubu {
		flex: 1;
		height: 0;
		width: 100%;
		background: #F7F8FC;
		box-sizing: border-box;
		padding: 20rpx 32rpx;
	}
	
	.noticeGroup {
		display: flex;
		flex-direction: column;
		row-gap: 24rpx;
		padding-bottom: 30rpx;
		.noticeDate {
			color: #929292;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.bao-box {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		column-gap: 20rpx;
	}

	.icon-lv {
		flex-shrink: 0;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		position: relative;

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

	.hongdi {
		position: absolute;
		right: 2px;
		top: 2px;
		width: 20rpx;
		height: 20rpx;
		background: #FF3829;
		border-radius: 50%;
		z-index: 1;
	}

	.ddx {
		display: flex;
		align-items: center;
	}

	.you {
		width: 80%;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
		border-radius: 16rpx;
		border: 2rpx solid rgba(50,125,251,0.05);
		padding: 26rpx 34rpx;
	}

	.box-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.numone {
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		
	}

	.numtwo {
		font-size: 28rpx;
		color: #929292;
		margin-top: 4rpx;
	}

	.numthree {
		font-size: 24rpx;
		color: #929292;
	}

	.jsy {
		width: 95%;
		margin: 10px auto;
	}
</style>