tra-app/src/pages/messageNotification/list.vue

<template>
	<z-paging ref="pagingRef" v-model="data_list" @query="queryList" class="scroll_div" empty-view-text="暂无数据">
		<template #top>
			<view class="main_div">
				<view class="body-title">
					<view class="back_div" @click="common.navigateBack()">
						<view class="back-icon"></view>
					</view>
					<view>{{ title }}</view>
				</view>
			</view>
		</template>
		<view class="scroll-Y">
			<view class="item" v-for="(item, index) in data_list" @click="itemClick(item)">
				<view class="top-icon-div">
					<view class="icon">
						<image class="img_100" :src="img" mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="title">
								{{ item.noticeTitle }}
							</view>
						</view>
						<view class="bottom">
							<view class="time">
								{{ item.ctTime?.substr(0, 16) }}
							</view>
						</view>
					</view>
				</view>
				<view class="note-div" v-if="typeValue !== '06'">{{ item.noticeContent }}</view>
				<view class="badge-div" v-else>
					<image-preview v-if="item.ossAddr" :src="item.ossAddr" mode="widthFix" class="badge-img"></image-preview>
					<view class="badge-name">{{ item.noticeContent }}</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryTraPersonalMessageNoticePaging, oneTimeReadByNoticeTyp } from '@/api/messageNotification.js';
	import common from '@/common/common';
	import type_01 from '@/static/images/messageNotification/type_01.png';
	import type_02 from '@/static/images/messageNotification/type_02.png';
	import type_03 from '@/static/images/messageNotification/type_03.png';
	import type_04 from '@/static/images/messageNotification/type_04.png';
	import type_05 from '@/static/images/messageNotification/type_05.png';
	import type_06 from '@/static/images/messageNotification/type_06.png';
	import type_07 from '@/static/images/messageNotification/type_07.png';
	import useZpaging from '@/composables/useZpaging.js';
	const fetchFunction = (params) => {
		const page = params?.page || 1;
		if (page === 1) {
			oneTimeReadByNoticeTyp({ noticeTyp: typeValue.value }).then((res) => {
				const pages = getCurrentPages();
				if (pages.length >= 1) {
					const prevPage = pages[pages.length - 2];
					if (prevPage.route === 'pages/messageNotification/index') {
						if (prevPage.$vm && typeof prevPage.$vm.$?.exposed?.refreshType === 'function') {
							prevPage.$vm.$?.exposed?.refreshType(typeValue.value);
						}
					}
				}
			});
		}
		return queryTraPersonalMessageNoticePaging({ noticeTyp: typeValue.value, ...params });
	};

	const { pagingRef, queryList, data_list } = useZpaging({
		fetchFunction: fetchFunction
	});

	const imageMap = {
		'01': type_01,
		'02': type_02,
		'03': type_03,
		'04': type_04,
		'05': type_05,
		'06': type_06,
		'07': type_07
	};
	const titleMap = {
		'01': '课程提醒',
		'02': '任务完成提醒',
		'03': '积分获取',
		'04': '任务时间提醒',
		'05': '新任务提醒',
		'06': '徽章获取',
		'07': '积分兑换'
	};
	const typeValue = ref('');
	const img = computed(() => imageMap[typeValue.value] ?? '');
	const title = computed(() => titleMap[typeValue.value] ?? '');

	const itemClick = (item) => {
		if (typeValue.value === '07') {
			// 积分兑换跳转
			if (item.noticeBusId) {
				common.navigateTo('/pages/pointsRedemption/index?id=' + item.noticeBusId);
			} else {
				common.msg('活动id不存在');
			}
		}
	};

	onLoad((e) => {
		typeValue.value = e.type;
	});
</script>

<style scoped lang="scss">
	.scroll_div {
		background-color: #f6f8ff;
	}
	.scroll-Y {
		height: 100%;
		padding-top: 1rpx;
		.item {
			background: #ffffff url('@/static/images/messageNotification/popup_bg.png') no-repeat center -4rpx;
			background-size: auto 50%;
			background-color: #ffffff;
			margin: 30rpx 38rpx;
			border-radius: 38rpx;
			border-bottom: 4rpx solid #efefef;
			padding: 28rpx 0rpx 28rpx 0rpx;
			.top-icon-div {
				display: flex;
				border-bottom: 1px solid #f1eff0;
				padding: 0 28rpx 20rpx 28rpx;
				margin-bottom: 20rpx;
				.icon {
					width: 78rpx;
					height: 78rpx;
				}
				.right {
					margin-left: 16rpx;
					overflow: hidden;
					.time {
						font-size: 23rpx;
						color: #999999;
						line-height: 30rpx;
						text-align: right;
						font-style: normal;
					}
					.title {
						font-family: PingFangSC;
						font-weight: 600;
						font-size: 30rpx;
						color: #000000;
						line-height: 46rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
			.note-div {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: left;
				padding: 0 28rpx;
			}
			.badge-div {
				display: flex;
				flex-direction: column;
				align-items: center;
				.badge-img {
					width: 170rpx;
				}
				.badge-name {
					margin: 10rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}
	}

	.main_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(0deg, rgba(195, 219, 255, 0) 0%, #c3dbff 100%);
		background-size: 100% 300px;
		background-repeat: no-repeat; /* 防止渐变重复平铺 */
		padding-top: var(--status-bar-height);
		overflow: hidden;
	}

	.body-title {
		width: 100%;
		height: 120rpx;
		font-size: 33rpx;
		padding-top: 10rpx;
		font-weight: 500;
		color: #000;
		font-weight: 600;
		position: relative;
		text-align: center;

		.delete_div {
			position: absolute;
			right: 20rpx;
			top: 7rpx;
			width: 70rpx;
			height: 70rpx;
			.img {
				margin-top: 10rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}

		.back_div {
			position: absolute;
			left: 26rpx;
			top: 17rpx;
			padding: 0 14rpx 14rpx 0;

			.back-icon {
				position: relative;
				width: 50rpx;
				height: 50rpx;
				cursor: pointer;
				display: flex;
				align-items: center;
			}

			.back-icon::before,
			.back-icon::after {
				content: '';
				position: absolute;
				transition: all 0.3s ease;
			}

			.back-icon::after {
				top: 25%;
				left: 25%;
				width: 40%;
				height: 40%;
				border-top: 4rpx solid #2b2c2e;
				border-left: 4rpx solid #2b2c2e;
				transform: rotate(-45deg);
			}
		}
	}
</style>