wanzai_school_app/pagesReservation/set/set.vue

<template>
	<view class="set">
		<!-- 年级区域 -->
		<view class="box">
			年级
			<!-- <picker @change="bindPickerChange" :value="gradeCurrentIndex" :range="gradeArray">
				<view class="box_select">
					{{ gradeArray[gradeCurrentIndex] }}
					<img class="img" src="@/static/images/bottom.png" alt="" />
				</view>
			</picker> -->
			<view class="box_select">{{ configInfo.gradeName }}</view>
		</view>

		<!-- 班级区域 -->
		<view class="box">
			班级
			<!-- <picker @change="bindPickerChange" :value="classCurrentIndex" :range="classArray">
				<view class="box_select">
					{{ classArray[classCurrentIndex] }}
					<img class="img" src="@/static/images/bottom.png" alt="" />
				</view>
			</picker> -->
			<view class="box_select">{{ configInfo.className }}</view>
		</view>

		<!-- 设置区域 -->
		<view class="setBox">
			<view class="title">
				<view class="circle"></view>
				访客预约小程序审批流程设置
			</view>

			<!-- 小程序是否需要审核 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in checkItems" :key="item.value" @click="checkboxChange(checkItems, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>

			<!-- 小程序是否需要推送 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in pushItems" :key="item.value" @click="checkboxChange(pushItems, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>

			<!-- 小程序是否需要核销区域 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in cancelItems" :key="item.value" @click="checkboxChange(cancelItems, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>

			<view class="title">
				<view class="circle"></view>
				访客预约终端审批流程设置
			</view>

			<!-- 大屏是否需要审核 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in checkItems_screen" :key="item.value" @click="checkboxChange(checkItems_screen, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>

			<!-- 大屏是否需要推送 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in pushItems_screen" :key="item.value" @click="checkboxChange(pushItems_screen, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>

			<!-- 大屏是否需要核销区域 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in cancelItems_screen" :key="item.value" @click="checkboxChange(cancelItems_screen, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>

			<view class="title">
				<view class="circle"></view>
				门禁设置
			</view>

			<!-- 门禁是否需要联动区域 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in doorItems" :key="item.value" @click="checkboxChange(doorItems, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>

			<view class="title">
				<view class="circle"></view>
				车闸设置
			</view>

			<!-- 车闸是否需要联动区域 -->
			<checkbox-group class="checkbox_group">
				<label class="checkbox" v-for="item in carItems" :key="item.value" @click="checkboxChange(carItems, item)">
					<view>
						<checkbox color="#3464FF" :value="item.value" :checked="item.checked" />
					</view>
					<view>{{ item.name }}</view>
				</label>
			</checkbox-group>
		</view>

		<!-- 按钮区域 -->
		<view class="btns">
			<view class="btn cancel" @click="handleCancle">取消</view>
			<view class="btn save" @click="handleSave">保存</view>
		</view>
	</view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import backlogVue from '../backlog/backlog.vue'
import { onLoad } from '@dcloudio/uni-app'
import { myRequest } from '../../utils/api'

// 年级数组
// const gradeArray = ref(['2022', '2023', '2024', '2025'])
// 当前选择的年级索引
// const gradeCurrentIndex = ref(0)

// 班级数组
// const classArray = ref(['1班', '2班', '3班', '4班'])
// 当前选择的班级索引
// const classCurrentIndex = ref(0)

// 小程序审核数组
const checkItems = ref([
	{
		value: 1,
		name: '需要审核',
		checked: false
	},
	{
		value: 4,
		name: '不需要审核',
		checked: false
	}
])

// 小程序推送数组
const pushItems = ref([
	{
		value: 5,
		name: '需要推送',
		checked: false
	},
	{
		value: 3,
		name: '不需要推送',
		checked: false
	}
])

// 小程序核销数组
const cancelItems = ref([
	{
		value: 6,
		name: '需要核销',
		checked: false
	},
	{
		value: 9,
		name: '不需要核销',
		checked: false
	}
])

// 大屏审核数组
const checkItems_screen = ref([
	{
		value: 1,
		name: '需要审核',
		checked: false
	},
	{
		value: 4,
		name: '不需要审核',
		checked: false
	}
])

// 大屏推送数组
const pushItems_screen = ref([
	{
		value: 5,
		name: '需要推送',
		checked: false
	},
	{
		value: 3,
		name: '不需要推送',
		checked: false
	}
])

// 大屏核销数组
const cancelItems_screen = ref([
	{
		value: 6,
		name: '需要核销',
		checked: false
	},
	{
		value: 9,
		name: '不需要核销',
		checked: false
	}
])

// 门禁数组
const doorItems = ref([
	{
		value: 0,
		name: '需要联动',
		checked: false
	},
	{
		value: 1,
		name: '不需要联动',
		checked: false
	}
])

// 车闸数组
const carItems = ref([
	{
		value: 0,
		name: '需要联动',
		checked: false
	},
	{
		value: 1,
		name: '不需要联动',
		checked: false
	}
])

// 配置信息
const configInfo = ref({})

onLoad((options) => {
	configInfo.value = JSON.parse(options.info)
	// console.log(configInfo.value)

	handleMatch(checkItems.value, configInfo.value.appAuditConfig)
	handleMatch(pushItems.value, configInfo.value.appPushConfig)
	handleMatch(cancelItems.value, configInfo.value.appCancelConfig)
	handleMatch(checkItems_screen.value, configInfo.value.screenAuditConfig)
	handleMatch(pushItems_screen.value, configInfo.value.screenPushConfig)
	handleMatch(cancelItems_screen.value, configInfo.value.screenCancelConfig)
	handleMatch(doorItems.value, configInfo.value.accessConfig)

	handleMatch(carItems.value, configInfo.value.carConfig)
})

// 勾选时的回调
const checkboxChange = (list, item) => {
	list.forEach((ele) => {
		ele.checked = false
	})
	nextTick(() => {
		item.checked = true
	})
}

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

// 保存按钮回调
const handleSave = async () => {
	let appAuditConfig = handleMatchValue(checkItems.value)
	let appPushConfig = handleMatchValue(pushItems.value)
	let appCancelConfig = handleMatchValue(cancelItems.value)
	let screenAuditConfig = handleMatchValue(checkItems_screen.value)
	let screenPushConfig = handleMatchValue(pushItems_screen.value)
	let screenCancelConfig = handleMatchValue(cancelItems_screen.value)
	let accessConfig = handleMatchValue(doorItems.value)
	let carConfig = handleMatchValue(carItems.value)

	const res = await myRequest({
		url: '/wanzai/api/smartVisitorParentsConfig/update',
		method: 'post',
		data: {
			id: configInfo.value.id,
			classId: configInfo.value.classId,
			appAuditConfig,
			appPushConfig,
			appCancelConfig,
			screenAuditConfig,
			screenPushConfig,
			screenCancelConfig,
			accessConfig,
			carConfig
		}
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'none',
			duration: 2000
		})

		setTimeout(() => {
			uni.redirectTo({
				url: '/pagesReservation/backlog/backlog'
			})
		}, 2000)
	}
}

// 匹配出哪个是勾选上的
const handleMatch = (list, v) => {
	list.forEach((ele) => {
		if (ele.value == v) {
			ele.checked = true
		}
	})
}

// 匹配出当前勾选上的值
const handleMatchValue = (list) => {
	let Obj = list.find((ele) => ele.checked)
	return Obj.value
}
</script>

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

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		height: 90rpx;
		font-size: 28rpx;

		.box_select {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			width: 628rpx;
			height: 90rpx;
			border-radius: 15rpx;
			background-color: #fff;

			.img {
				width: 33rpx;
				height: 33rpx;
			}
		}
	}

	.setBox {
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 710rpx;
		height: 1065rpx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			height: 90rpx;
			font-size: 28rpx;
			font-weight: bold;

			.circle {
				margin-right: 20rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #3464ff;
			}
		}

		.checkbox_group {
			display: flex;
			align-items: center;
			margin-bottom: 35rpx;

			.checkbox {
				display: flex;
				align-items: center;
				margin-right: 70rpx;
			}
		}
	}

	.btns {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 100rpx;
		height: 100rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 297rpx;
			height: 100rpx;
			font-size: 32rpx;
			border-radius: 8rpx;
		}

		.cancel {
			color: #0061ff;
			border: 2rpx solid #0061ff;
		}

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