wanzai_school_app/pages/late/late.vue

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

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

		<!-- 迟到列表区域 -->
		<view class="list">
			<uni-swipe-action>
				<view v-for="(item, index) in list" :key="index">
					<uni-swipe-action-item :right-options="options" @click="onClickItem(item)">
						<!-- 每一个迟到记录区域 -->
						<view class="item_box">
							<view class="box_info">
								<image class="info_img" src="/static/images/header.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.timeGroup }}</view>
						</view>
					</uni-swipe-action-item>
					<view style="height: 20rpx"></view>
				</view>
			</uni-swipe-action>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

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

const timeRang = ref([])

const list = ref([
	{
		cardNo: '132',
		name: '小明',
		timeGroup: '时间组'
	},
	{
		cardNo: '132',
		name: '小明',
		timeGroup: '时间组'
	},
	{
		cardNo: '132',
		name: '小明',
		timeGroup: '时间组'
	},
	{
		cardNo: '132',
		name: '小明',
		timeGroup: '时间组'
	},
	{
		cardNo: '132',
		name: '小明',
		timeGroup: '时间组'
	}
])

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

// 切换时间回调
const changeTime = (e) => {
	timeRang.value = e
	console.log(timeRang.value)
	if (timeRang.value.length) {
		console.log(1)
	} else {
		console.log(2)
	}
}
</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;
	}

	.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 - 160rpx);
		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>