wanzai_school_app/pages/check/check.vue

<template>
	<view class="container">
		<!-- 筛选区域 -->
		<picker @change="bindPickerChange" :value="currentIndex" :range="array" range-key="text">
			<view class="search">
				<view>
					{{ array[currentIndex].text }}
				</view>
				▼
			</view>
		</picker>

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

		<!-- 列表区域 -->
		<view class="list">
			<!-- 每一个资料区域 -->
			<view class="list_item" v-for="item in dataList" :key="item.id">
				<!-- 标题区域 -->
				<view class="item_title">
					<view class="title_text">入学登记</view>
					{{ item.createTime }}
				</view>

				<!-- 信息区域 -->
				<view class="item_body">
					<view class="type check" v-if="item.status == 0">待审批</view>
					<view class="type pass" v-if="item.status == 1">已通过</view>
					<view class="type reject" v-if="item.status == 2">已拒绝</view>
					<view class="box">孩子姓名：{{ item.name }}</view>
					<view class="box">性别：{{ item.sexId == 1 ? '男' : '女' }}</view>
					<view class="box">
						照片：
						<image
							v-if="!item.headImage"
							class="box_img"
							src="https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/nupp7VVnHWpVa413437dba82ce85374b2a4ee1a6b973.png"
							mode="aspectFill"
						></image>
						<image v-else class="box_img" :src="item.headImage" mode="aspectFill" @click="clickImg(item.headImage)"></image>
					</view>
					<view class="box">年级：{{ item.gradeName }}</view>
					<view class="box">班级：{{ item.schoolClassName }}</view>

					<!-- 家属数组区域 -->
					<view v-for="(ele, index) in item.list" :key="index">
						<view class="box">家属{{ index + 1 }}：{{ ele.name }}</view>
						<view class="box">手机号码：{{ ele.phone }}</view>
						<view class="box">家属与本人的关系：{{ ele.ship }}</view>
					</view>

					<view class="btns" v-if="item.status == 0">
						<view class="btn reject" @click="clickBtn(item.id, 2)">拒绝</view>
						<view class="btn agree" @click="clickBtn(item.id, 1)">同意</view>
					</view>
				</view>
			</view>

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

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

// 当前激活索引
const currentIndex = ref(0)
// 状态数组
const array = ref([
	{
		text: '全部',
		value: ''
	},
	{
		text: '待审批',
		value: 0
	},
	{
		text: '已通过',
		value: 1
	},
	{
		text: '已拒绝',
		value: 2
	}
])

// 当前页
const currentPage = ref(1)
// 总条数
const total = ref(0)
// 资料审批数组
const dataList = ref([])

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

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

	getManageClass(id)
})

// 页面下拉刷新回调
onReachBottom(() => {
	if (total.value > dataList.value.length) {
		currentPage.value++
		getData()
	} else {
		uni.showToast({
			title: '没有更多数据了~',
			icon: 'none'
		})
	}
})

// 获取管理的班级数组
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
	grade_student.value = result[0].gradeId

	getData()
}

// 获取资料审批数组
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartEnrollmentUser/list',
		data: {
			currentPage: currentPage.value,
			pageCount: 4,
			status: array.value[currentIndex.value].value,
			grade: grade_student.value,
			schoolClass: classes_student.value
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	console.log(result)
	dataList.value = [...dataList.value, ...result.list]
	total.value = result.totalCount
}

// 切换状态时的回调
const bindPickerChange = (e) => {
	// console.log(e.detail.value)
	if (e.detail.value != currentIndex.value) {
		currentIndex.value = e.detail.value
		currentPage.value = 1
		dataList.value = []
		getData()
	}
}

// 学生部门筛选框选择时的回调
const onchange_student = (e) => {
	// console.log(e)
	classes_student.value = e.classId
	grade_student.value = e.gradeId
	currentPage.value = 1
	dataList.value = []
	getData()
}

// 点击同意拒绝按钮回调
const clickBtn = (id, type) => {
	uni.showModal({
		title: '提示',
		content: `确定${type == 1 ? '同意' : '拒绝'}该审批吗？`,
		success: (res) => {
			if (res.confirm) {
				clickBtnReq(id, type)
			}
		}
	})
}

// 审批请求
const clickBtnReq = async (id, type) => {
	const res = await myRequest({
		url: '/wanzai/api/smartEnrollmentUser/examine',
		method: 'post',
		data: {
			id: id,
			status: type
		}
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			currentPage.value = 1
			dataList.value = []
			getData()
		}, 1500)
	}
}

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

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

	.search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 284rpx;
		height: 80rpx;
		font-size: 28rpx;
		border-radius: 55rpx;
		background-color: #fff;
	}

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

	.list {
		margin-top: 30rpx;

		.list_item {
			margin-bottom: 30rpx;
			border-radius: 8rpx;
			background-color: #fff;

			.item_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 90rpx;
				color: #808080;
				font-size: 24rpx;
				border-bottom: 2rpx solid #e6e6e6;

				.title_text {
					font-size: 28rpx;
					font-weight: bold;
					color: #000;
				}
			}

			.item_body {
				position: relative;
				padding: 25rpx 30rpx;

				.type {
					position: absolute;
					top: 16rpx;
					right: 30rpx;
					font-size: 28rpx;
				}

				.check {
					color: #ff8d1a;
				}

				.pass {
					color: #0061ff;
				}

				.reject {
					color: #d43030;
				}

				.box {
					display: flex;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color: #383838;

					.box_img {
						width: 116rpx;
						height: 155rpx;
						border-radius: 4rpx;
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 28rpx;
						width: 146rpx;
						height: 80rpx;
						font-size: 28rpx;
						color: #fff;
						border-radius: 10rpx;
					}

					.reject {
						background-color: #d43030;
					}

					.agree {
						background-color: #0061ff;
					}
				}
			}
		}
	}
}
</style>