wanzai_school_app/pages/addStudent/addStudent.vue

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

		<!-- 输入框和添加按钮区域 -->
		<view class="header">
			<view class="header_input">
				<uni-icons type="search" size="28" color="#808080" @click="changeInputValue"></uni-icons>
				<input v-model="keyWord" class="input" type="text" placeholder="请输入学生姓名" />
			</view>
			<view class="header_add" @click="goAddPage">
				<uni-icons type="plus" size="28" color="#0061FF"></uni-icons>
			</view>
		</view>

		<!-- 全选按钮区域 -->
		<view class="all" v-if="dataList.length">
			<view class="all_text" @click="handleAllCheck">
				<radio color="#0061FF" style="transform: scale(0.7)" :checked="allChecked" />
				全选
			</view>

			<view class="cancel" @click="handleCancel">
				<uni-icons type="closeempty" size="17" color="#00BAAD"></uni-icons>
				&nbsp;取消全选
			</view>
		</view>

		<!-- 学生列表区域 -->
		<view class="list" v-if="dataList.length">
			<!-- 每一个学生区域 -->
			<view class="list_item" v-for="item in dataList" :key="item.id" @click="handleClickItem(item)">
				<radio color="#0061FF" style="transform: scale(0.7)" :checked="item.isChecked" />
				<view class="item_info">
					<image v-if="item.headImage" class="info_img" :src="item.headImage" mode="aspectFill"></image>
					<image v-else class="info_img" src="/static/images/header.png" mode="aspectFill"></image>
					<view class="info_msg">
						<view class="msg_name">{{ item.name }}</view>
						<view>{{ item.cardNo }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 确认按钮区域 -->
		<view class="btn" v-if="dataList.length" @click="handleConfirm">确认</view>

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

<script setup>
import { onLoad } 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 keyWord = ref('')

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

// 列表数据
const dataList = ref([])

onLoad(() => {
	// 查询未分组的学生
	getData()
})

// 查询未分组的学生
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/appListClass',
		data: {
			keyWord: keyWord.value
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	dataList.value = result
	dataList.value.forEach((ele) => {
		ele.isChecked = false
	})
}

// 输入框搜索回调
const changeInputValue = () => {
	getData()
}

// 点击添加图标回调
const goAddPage = () => {
	uni.navigateTo({
		url: '/pages/addStudentMsg/addStudentMsg'
	})
}

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

// 点击取消按钮回调
const handleCancel = () => {
	if (allChecked.value) {
		dataList.value.forEach((ele) => {
			ele.isChecked = false
		})
	}
	allChecked.value = false
}

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

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

// 确认按钮回调
const handleConfirm = () => {
	// 判断是否选择了学生
	const flag = dataList.value.find((ele) => ele.isChecked)

	if (!flag) {
		uni.showToast({
			title: '请至少选择一名学生',
			icon: 'none',
			mask: true
		})
	} else {
		uni.showModal({
			title: '提示',
			content: '确定将未分组的学生添加到班级吗？',
			success: (res) => {
				if (res.confirm) {
					let arr = []
					dataList.value.forEach((ele) => {
						if (ele.isChecked) {
							arr.push(ele.id)
						}
					})
					handleAddClass(arr)
				}
			}
		})
	}
}

// 添加请求
const handleAddClass = async (ids) => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/appSaveClass',
		method: 'post',
		data: {
			ids,
			schoolClass: uni.getStorageSync('userInfo').schoolClass
			// departmentId: uni.getStorageSync('userInfo').departmentId
		}
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/studentManage/studentManage'
			})
		}, 1500)
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 20rpx;
	height: 100vh;
	background-color: #f1f6fe;

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

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;

		.header_input {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 40rpx;
			width: 589rpx;
			height: 100rpx;
			font-size: 28rpx;
			border-radius: 13rpx;
			border: 2rpx solid #cccccc;
			background-color: #fff;

			.input {
				padding: 0 20rpx;
				width: 425rpx;
			}
		}

		.header_add {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			border-radius: 13rpx;
			border: 2rpx solid #cccccc;
			background-color: #fff;
		}
	}

	.all {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		font-size: 28rpx;

		.all_text {
			display: flex;
			align-items: center;
			color: #0061ff;
		}

		.cancel {
			display: flex;
			align-items: center;
			margin-left: 50rpx;
			color: #00baad;
		}
	}

	.list {
		margin-top: 30rpx;
		height: calc(100vh - 500rpx);
		overflow-y: auto;

		.list_item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.item_info {
				display: flex;
				align-items: center;
				flex: 1;
				height: 167rpx;
				border-radius: 8rpx 0 0 8rpx;
				background-color: #fff;

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

				.info_msg {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 28rpx;
					height: 100rpx;
					font-size: 28rpx;
					color: #808080;

					.msg_name {
						color: #000000;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
		width: 710rpx;
		height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		border-radius: 8rpx;
		background-color: #0061ff;
	}
}
</style>