wanzai_school_app/pages/msgWarn/msgWarn.vue

<template>
	<view class="container">
		<!-- 顶部筛选框区域 -->
		<picker @change="bindPickerChange" :value="currentIndex" :range="array">
			<view class="search">
				{{ array[currentIndex] }}
				<img class="search_icon" src="../../static/images/bottom.png" />
			</view>
		</picker>

		<!-- 每一条信息区域 -->
		<view class="box" v-for="item in list" :key="item.id">
			<view class="box_time">{{ item.dateTime }}</view>
			<view class="box_card">
				<view class="card_title">
					<!-- <view class="title_read" v-if="item.isRead === 0"></view> -->
					{{ item.type == 1 ? '预警推送' : '学生轨迹' }}
				</view>
				<view class="card_msg" v-if="item.userName">姓名：{{ item.userName }}</view>
				<view class="card_msg" v-if="item.typeName">类型：{{ item.typeName }}</view>
				<view class="card_msg" v-if="item.location">地点：{{ item.location }}</view>
				<view class="card_msg" v-if="item.image">
					图片：
					<img mode="aspectFill" class="img" :src="item.image" @click="previewImage(item.image)" />
				</view>
			</view>
		</view>

		<NoData v-if="!list.length" />
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import NoData from '@/components/noData.vue'
import { myRequest } from '@/utils/api.js'
import { previewImage } from '@/utils/previewImage.js'

onLoad(() => {
	let token = uni.getStorageSync('token')
	if (token) {
		getData()
	} else {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
})

onReachBottom(() => {
	if (list.value.length < total.value) {
		currentPage.value++
		getData()
	} else {
		uni.showToast({
			title: '没有更多数据了',
			icon: 'none'
		})
	}
})

// 当前页
const currentPage = ref(1)

// 一页多少条数据
const pageCount = ref(5)

// 总条数
const total = ref(0)

// 筛选框当前索引
const currentIndex = ref(0)

// 筛选框类型数组
const array = ref(['全部通知', '预警推送', '学生轨迹'])

// 信息列表
const list = ref([])

// 获取消息提醒列表数据
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smart-notification/remindingList',
		data: {
			id: uni.getStorageSync('userInfo').id,
			currentPage: currentPage.value,
			pageCount: pageCount.value,
			type: currentIndex.value == 0 ? '' : currentIndex.value
		}
	})
	// console.log(res)
	if (res.code == 200) {
		list.value = [...list.value, ...res.data.list]
		total.value = res.data.totalCount
	}
}

// 切换筛选框回调
const bindPickerChange = (e) => {
	currentIndex.value = e.detail.value
	list.value = []
	currentPage.value = 1
	getData()
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	padding: 0 20rpx 20rpx 20rpx;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 顶部筛选框区域样式
	.search {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		width: 230rpx;
		height: 80rpx;
		font-size: 28rpx;
		border-radius: 56rpx;
		background-color: #fff;

		.search_icon {
			margin-left: 10rpx;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.box {
		.box_time {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			color: #a6a6a6;
			font-size: 24rpx;
		}

		.box_card {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-sizing: border-box;
			padding: 25rpx 30rpx;
			line-height: 52rpx;
			color: #808080;
			font-size: 24rpx;
			border-radius: 8rpx;
			background-color: #fff;

			.card_title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #000;

				.title_read {
					margin-right: 10rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #d43030;
				}
			}

			.card_msg {
				display: flex;
				.img {
					margin-top: 10rpx;
					width: 100rpx;
					height: 160rpx;
				}
			}
		}
	}
}
</style>