wanzai_school_app/pages/studentManage/studentManage.vue

<template>
	<view class="container" :style="showEdit ? 'padding-bottom:180rpx' : ''">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />

		<!-- input组件区域 -->
		<HeaderInput placeholder="请输入学生姓名或时间组名称" @changeInputValue="changeInputValue" />

		<!-- 学校年级班级区域 -->
		<view class="school" v-if="list.length">
			<view class="">{{ classInfo }}</view>
			<!-- 批量按钮区域 -->
			<view v-if="!showEdit" class="school_edit" @click="handleEdit">
				<img class="img" src="@/static/images/edit.png" />
				批量
			</view>
			<!-- 全选按钮区域 -->
			<view v-else class="school_btn">
				<view class="cancel" @click="handleCancel">取消</view>

				<radio color="#0061FF" style="transform: scale(0.7)" :checked="allChecked" @click="handleAllCheck" />
				<view class="all">全选</view>
			</view>
		</view>

		<!-- 学生列表区域 -->
		<view class="list_box" v-if="list.length">
			<!-- 每一个学生区域 -->
			<view class="item_box" v-for="(item, index) in list" :key="index" @click="handleClickItem(item)">
				<view class="box_name">{{ item.name }}（{{ item.cardNo }}）</view>
				<view class="box_time">{{ item.timeGroup }}</view>

				<radio v-if="showEdit" color="#0061FF" style="transform: scale(0.7)" :checked="item.isChecked" />
			</view>
		</view>

		<!-- 关联时间组按钮区域 -->
		<view class="btn" v-if="showEdit">
			<view class="btn_box" @click="handleBind">
				<uni-icons color="#fff" type="link" size="28"></uni-icons>
				<text class="text">关联时间组</text>
			</view>
		</view>

		<!-- 没有数据时展示的页面 -->
		<NoData v-if="!list.length" style="margin-top: 140rpx" />
	</view>
</template>

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

// 当前所处班级
const classInfo = ref()

// 搜索框绑定数据
const keyWord = ref('')

// 学生列表数据
const list = ref([])

// 缓存数据
const copyList = ref([])

// 是否显示全选radio
const showEdit = ref(false)

// 是否全选
const allChecked = ref(false)

onLoad(() => {
	getData()
})

// 获取学生列表数据
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/queryClassUser',
		data: {
			userId: uni.getStorageSync('userInfo').id,
			keyWord: keyWord.value
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	list.value = result.userDetails
	list.value.forEach((ele) => {
		ele.isChecked = false
	})
	classInfo.value = result.name
	uni.setNavigationBarTitle({
		title: result.name
	})
}

// 点击批量按钮回调
const handleEdit = () => {
	showEdit.value = true
	copyList.value = JSON.parse(JSON.stringify(list.value))
}

// 点击取消按钮回调
const handleCancel = () => {
	showEdit.value = false
	allChecked.value = false
	list.value = copyList.value
}

// 点击全选按钮回调
const handleAllCheck = () => {
	if (!allChecked.value) {
		list.value.forEach((ele) => {
			ele.isChecked = true
		})
	} else {
		list.value.forEach((ele) => {
			ele.isChecked = false
		})
	}
	allChecked.value = !allChecked.value
}

// 点击每一个学生时的回调
const handleClickItem = (item) => {
	if (showEdit.value) {
		item.isChecked = !item.isChecked

		// 判断全选按钮的状态
		allChecked.value = list.value.every((ele) => ele.isChecked)
	}
}

// 点击关联时间组按钮回调
const handleBind = () => {
	// 判断是否选择了学生
	const flag = list.value.find((ele) => ele.isChecked)

	if (!flag) {
		uni.showToast({
			title: '请至少选择一名学生',
			icon: 'none',
			mask: true
		})
	} else {
		let arr = []
		list.value.forEach((ele) => {
			if (ele.isChecked) {
				arr.push(ele.id)
			}
		})
		uni.navigateTo({
			url: `/pages/timeGroup/timeGroup?ids=${JSON.stringify(arr)}`
		})
	}
}

// 输入框组件自定义事件
const changeInputValue = (value) => {
	keyWord.value = value
	getData()
}
</script>

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

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

	// 学校名称区域样式
	.school {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 38rpx;
		color: #808080;
		font-size: 28rpx;

		.school_edit {
			display: flex;
			align-items: center;
			margin-right: 30rpx;
			color: #0061ff;

			.img {
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.school_btn {
			display: flex;
			align-items: center;

			.cancel {
				margin-right: 20rpx;
				color: #d43030;
			}

			.all {
				margin-left: -10rpx;
			}
		}
	}

	.list_box {
		padding: 0 30rpx 30rpx;
		margin-top: 22rpx;
		background-color: #fff;

		.item_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 103rpx;
			font-size: 24rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.box_name {
			}

			.box_time {
			}
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		padding: 0 30rpx 30rpx;
		background-color: #fff;

		.btn_box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 28rpx;
			width: 650rpx;
			height: 100rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
			background-color: #0061ff;

			.text {
				margin-left: 10rpx;
			}
		}
	}
}
</style>