wanzai_school_app/pages/late/late.vue

<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />

		<!-- 选择年级区域 -->
		<view class="grade">
			<uni-data-picker
				placeholder="请选择班级"
				popup-title="请选择班级"
				:clear-icon="false"
				:map="{ text: 'name', value: 'classId' }"
				:localdata="dataTree_student"
				v-model="classes_student"
				@change="onchange_student"
			></uni-data-picker>
		</view>

		<!-- 时间筛选区域 -->
		<view class="time">
			迟到时间
			<view class="time_rang">
				<uni-datetime-picker v-model="timeRang" type="daterange" @change="changeTime" />
			</view>
		</view>

		<!-- 迟到列表区域 -->
		<view class="list" v-if="list.length">
			<uni-swipe-action>
				<view v-for="item in list" :key="item.id">
					<uni-swipe-action-item :right-options="options" @click="onClickItem(item)">
						<!-- 每一个迟到记录区域 -->
						<view class="item_box">
							<view class="box_info">
								<image v-if="item.image" class="info_img" :src="item.image" mode="aspectFill" @click="clickImage(item.image)"></image>
								<image
									v-else
									class="info_img"
									src="https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/nupp7VVnHWpVa413437dba82ce85374b2a4ee1a6b973.png"
									mode="aspectFill"
								></image>
								<view class="info_msg">
									<view class="msg_name">
										{{ item.name }}
									</view>
									<view class="msg_no">
										{{ item.cardNo }}
									</view>
								</view>
							</view>
							<view class="box_time">{{ item.dateTime }}</view>
						</view>
					</uni-swipe-action-item>
					<view style="height: 20rpx"></view>
				</view>
			</uni-swipe-action>
		</view>

		<NoData v-else />
	</view>
</template>

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

// 班级数组
const dataTree_student = ref([])
// 选择的班级
const classes_student = ref()

const options = [
	{
		text: '删除',
		style: {
			backgroundColor: '#D43030'
		}
	}
]

// 迟到时间筛选
const timeRang = ref([])

// 迟到数据
const list = ref([])

onLoad(() => {
	const id = uni.getStorageSync('userInfo').id
	getManageClass(id)
})

// 获取管理的班级数组
const getManageClass = async (id) => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/getManageClass',
		data: {
			id
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	dataTree_student.value = result
	classes_student.value = result[0].classId
	getData()
}

// 获取迟到数据
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartLate/listApp',
		data: {
			currentPage: 1,
			pageCount: 1000,
			classId: classes_student.value,
			startTime: timeRang.value.length ? timeRang.value[0] + ' 00:00:00' : '',
			endTime: timeRang.value.length ? timeRang.value[1] + ' 00:00:00' : ''
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	console.log(result)
	list.value = result.list
}

// 点击图片回调
const clickImage = (url) => {
	uni.previewImage({
		urls: [url],
		current: 1
	})
}

// 点击每一项删除回调
const onClickItem = (item) => {
	uni.showModal({
		title: '提示',
		content: `确定把${item.name}的迟到记录移除吗？`,
		success: (res) => {
			if (res.confirm) {
				handleDeleteReq(item.id)
			}
		}
	})
}

// 删除请求
const handleDeleteReq = async (id) => {
	const res = await myRequest({
		url: '/wanzai/api/smartLate/delete?id=1',
		data: {
			id
		}
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '删除成功',
			icon: 'success'
		})
		setTimeout(() => {
			getData()
		}, 1500)
	}
}

// 切换时间回调
const changeTime = (e) => {
	timeRang.value = e

	getData()
}

// 学生部门筛选框选择时的回调
const onchange_student = (e) => {
	// console.log(e.detail.value)
	// console.log(classes_student.value)
	getData()
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 30rpx 20rpx;
	height: 100vh;
	background: linear-gradient(180deg, rgba(242, 247, 255, 1) 0%, rgba(242, 247, 255, 0) 100%);

	// 背景图片区域样式
	.img_bg {
		position: absolute;
		top: -70rpx;
		right: 0;
		width: 589rpx;
		height: 320rpx;
		pointer-events: none;
	}

	.grade {
		margin-bottom: 20rpx;
		height: 70rpx;
	}

	.time {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		height: 70rpx;
		font-size: 28rpx;

		.time_rang {
			margin-left: 20rpx;
			width: 500rpx;
		}
	}

	.list {
		height: calc(100vh - 250rpx);
		overflow-y: auto;

		.item_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			height: 167rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			background-color: #fff;

			.box_info {
				display: flex;

				.info_img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.info_msg {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 28rpx;

					.msg_name {
						font-size: 32rpx;
					}

					.msg_no {
						color: #808080;
					}
				}
			}

			.box_time {
			}
		}
	}
}
</style>