wanzai_school_app/pages/timeGroup/timeGroup.vue

<template>
	<view class="container">
		<!-- 时间组列表区域 -->
		<view class="time_list" v-if="timeGroups.length">
			<!-- 每一个时间组区域 -->
			<view class="time_item" v-for="item in timeGroups" :key="item.id" @click="handleClickItem(item)">
				<view class="item_left">
					<view class="top">{{ item.name }}</view>
					<view class="bottom">{{ item.remark }}</view>
				</view>
				<radio color="#0061FF" style="transform: scale(0.9)" :checked="item.isChecked" />
			</view>
		</view>

		<!-- 按钮区域 -->
		<view class="btns" v-if="timeGroups.length">
			<view class="cancel" @click="handleCancel">取消</view>
			<view class="confirm" @click="handleConfirm">确认</view>
		</view>

		<!-- 没有数据时展示的页面 -->
		<NoData v-else />
	</view>
</template>

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

// 时间组列表
const timeGroups = ref([])

// 学生ID集合
const ids = ref([])

onLoad((options) => {
	ids.value = JSON.parse(options.ids)
	getTimeGroups()
})

// 获取时间组列表数据
const getTimeGroups = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/timeGroups'
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	timeGroups.value = result
	timeGroups.value.forEach((ele) => {
		ele.isChecked = false
	})
}

// 点击每一个时间组的回调
const handleClickItem = (item) => {
	timeGroups.value.forEach((ele) => {
		ele.isChecked = false
	})
	item.isChecked = !item.isChecked
}

// 点击取消按钮回调
const handleCancel = () => {
	uni.navigateBack(1)
}

// 点击确认按钮回调
const handleConfirm = async () => {
	// 判断是否选择了时间组
	const flag = timeGroups.value.find((ele) => ele.isChecked)

	if (!flag) {
		uni.showToast({
			title: '请选择时间组',
			icon: 'none',
			mask: true
		})
	} else {
		const timeGroupId = flag.id
		const res = await myRequest({
			url: '/wanzai/api/smartUser/setUserTimeGroup',
			method: 'post',
			data: {
				ids: ids.value,
				timeGroupId
			}
		})
		// console.log(res)
		uni.showToast({
			title: res.message,
			icon: 'none',
			mask: true
		})
		if (res.code == 200) {
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/studentManage/studentManage'
				})
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f1f6fe;

	.time_list {
		box-sizing: border-box;
		padding: 15rpx 0;
		margin: auto;
		width: 710rpx;
		height: calc(100vh - 245rpx);
		overflow-y: auto;

		.time_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 28rpx;
			margin-bottom: 20rpx;
			height: 128rpx;
			background-color: #fff;

			.item_left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 80rpx;

				.top {
					font-size: 28rpx;
				}
				.bottom {
					font-size: 24rpx;
					color: #b3b3b3;
				}
			}
		}
	}

	.btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-evenly;
		padding: 70rpx 0;
		height: 100rpx;
		font-size: 32rpx;
		border-top: 1rpx solid #eee;
		background-color: #fff;

		.cancel {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 297rpx;
			border-radius: 8rpx;
			color: #0061ff;
			border: 1rpx solid #0061ff;
		}

		.confirm {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 297rpx;
			border-radius: 8rpx;
			color: #fff;
			background-color: #0061ff;
		}
	}
}
</style>