mechanicStore-app/pages/console/setOrderTime.uvue

<!-- pages/setOrderTime/setOrderTime.uvue -->
<template>
	<view class="container">

		<!-- 头部：全部可接单 -->
		<view class="header-box" @click="allTime">
			<text class="header-text">
				{{ allIndex == 2 ? '取消全选' : '全部可接单' }}
			</text>
		</view>

		<!-- 滚动列表区域 -->
		<!-- uni-app x 中 scroll-view 需要明确高度或使用 flex 填充 -->
		<scroll-view class="time-list" scroll-y="true">
			<view class="time-grid">
				<view v-for="item in timeArr" :key="item.start_time"
					:class="item.isSelect ? 'time-card selected' : 'time-card normal'" @click.stop="chooseTime(item)">
					<text :class="item.isSelect ? 'time-text selected' : 'time-text normal'">
						{{ item.start_time }}
					</text>
					<text :class="item.isSelect ? 'time-sub selected' : 'time-sub normal'">
						{{ item.isSelect ? '可接单' : '休息' }}
					</text>
				</view>
			</view>
		</scroll-view>
		<!-- 底部保存按钮 -->
		<view class="footer-box" @click="handleSave">
			<text class="footer-text">
				保存设置
			</text>
		</view>
	</view>
</template>

<script lang="uts" setup>
	import { ref } from 'vue';
	import { editWorkTimeSetting } from '@/utils/api/workbenches.uts'

	// 状态定义
	const allIndex = ref<1 | 2>(1); // 1: 普通模式, 2: 全选模式

	// 1. 定义时间项类型（必须最先定义）
	type TimeItem = {
		start_time : string;
		end_time : string;
		isSelect : boolean;
	}

	// 2. 定义响应式数组
	const timeArr = ref<TimeItem[]>([]);

	// 3. 先定义初始化函数
	function initTimeArr() {
		const arr : TimeItem[] = [];
		for (let i = 0; i < 48; i++) {
			const startHour = Math.floor(i / 2);
			const startMin = i % 2 === 0 ? '00' : '30';

			let endHour = Math.floor((i + 1) / 2);
			let endMin = (i + 1) % 2 === 0 ? '00' : '30';

			// 处理23:30 -> 24:00
			if (endHour >= 24) {
				endHour = 24;
				endMin = '00';
			}

			arr.push({
				start_time: `${startHour < 10 ? '0' : ''}${startHour}:${startMin}`,
				end_time: `${endHour < 10 ? '0' : ''}${endHour}:${endMin}`,
				isSelect: false
			});
		}
		timeArr.value = arr;
	}

	// 4. 定义点击函数
	function chooseTime(item : TimeItem) {
		item.isSelect = !item.isSelect;
		console.log('选中时间：', item.start_time, item.isSelect);
	}

	// 5. 最后调用函数（UTS 核心：先定义，后调用）
	initTimeArr();

	// onShow(() => {
	// 	allIndex.value = 1;
	// 	// getCoachTime();
	// 	// adjustSafeArea();
	// });


	// // 获取技师时间设置
	// const getCoachTime = async () => {
	// 	// 重置状态
	// 	timeArr.value.forEach(item => item.isSelect = false);
	// 	allIndex.value = 1;

	// 	try {
	// 		const res = await workbenchesInfoApi.getWorkTimeSetting();
	// 		const timeRanges = res.data?.time_ranges || [];

	// 		// 判断是否全部可接单
	// 		if (timeRanges.length === 1 && timeRanges[0].start_time === '00:00' && timeRanges[0].end_time === '24:00') {
	// 			allTime();
	// 			return;
	// 		}

	// 		// 匹配时间段
	// 		timeArr.value.forEach(item => {
	// 			const itemTime = item.start_time;
	// 			for (const range of timeRanges) {
	// 				// 比较逻辑：start <= item < end
	// 				if (compareTime(itemTime, range.start_time) >= 0 &&
	// 					compareTime(itemTime, range.end_time) < 0
	// 				) {
	// 					item.isSelect = true;
	// 					break;
	// 				}
	// 			}
	// 		});
	// 	} catch (error) {
	// 		console.error('获取时间设置失败', error);
	// 		uni.showToast({ title: '加载失败', icon: 'none' });
	// 	}
	// };

	// 时间比较工具函数
	// function compareTime(t1, t2) {
	// 	if (!t1 || !t2) return 0;
	// 	const [h1, m1] = t1.split(':').map(Number);
	// 	const [h2, m2] = t2.split(':').map(Number);

	// 	if (h1 !== h2) return h1 > h2 ? 1 : -1;
	// 	if (m1 !== m2) return m1 > m2 ? 1 : -1;
	// 	return 0;
	// }

	// 点击单个时间



	// 全部可接单/取消全选
	const allTime = () => {
		if (allIndex.value === 2) {
			// 当前是全选状态，点击则取消全选
			for (let i = 0; i < timeArr.value.length; i++) {
				timeArr.value[i].isSelect = false;
			}
			allIndex.value = 1;
		} else {
			// 当前是普通状态，点击则全选
			for (let i = 0; i < timeArr.value.length; i++) {
				timeArr.value[i].isSelect = true;
			}
			allIndex.value = 2;
		}
	};
	const handleSave = async () => {
		// console.log(timeArr.value, 'timeArr')
		// 1. 声明选中时间数组（类型固定）
		const kjTime : TimeItem[] = []
		// 2. 遍历获取选中的时间段
		for (let i = 0; i < timeArr.value.length; i++) {
			const item : TimeItem = timeArr.value[i]
			if (item.isSelect) {
				kjTime.push(item)
			}
		}
		// 3. 校验：未选择时间段
		if (kjTime.length === 0) {
			uni.showToast({
				title: '请至少选择一个可接单时间段',
				icon: 'none',
				duration: 2000
			})
			return
		}
		try {

			const scheduleData = {
				// time_ranges: kjTime.filter((range : TimeItem) => range.isSelect).map((range : TimeItem) => ({
				// 			start_time: range.start_time,
				// 			end_time: range.end_time
				// 		}))
				time_ranges: [{ start_time: "04:00", end_time: "04:30" }, { start_time: "04:30", end_time: "05:00" }]

			}
			console.log(scheduleData, 'scheduleData');

			// 调用接口保存
			const res = await editWorkTimeSetting(scheduleData)
			console.log(res);
			// if ((res.code as number) === 200) {
			// 	uni.showToast({
			// 		title: '保存成功',
			// 		icon: 'success',
			// 		duration: 2000
			// 	})
			// 	uni.reLaunch({
			// 		url: '/pages/index/console'
			// 	})
			// }
		} catch (error) {
			uni.showToast({
				title: '保存失败，请重试',
				icon: 'none'
			})
			console.error('保存报错：', error)
		}
	}
</script>

<style lang="scss">
	/* 根容器：使用 Flex 布局填满屏幕 */
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		/* 或 100% */
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
		/* 适配全面屏底部 */
	}

	/* 顶部占位 */
	.top-safe-area {
		width: 100%;
		height: 20rpx;
		/* 根据需要调整 */
		flex-shrink: 0;
	}

	/* 头部盒子 */
	.header-box {
		width: 184rpx;
		height: 66rpx;
		border-radius: 16rpx;
		background-color: #FFDA59;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0 20rpx 32rpx;
		flex-shrink: 0;

		.header-text {
			color: #3D444E;
			font-size: 28rpx;
			font-weight: 700;
			letter-spacing: 3rpx;
		}
	}

	/* 滚动列表区域：flex: 1 占据剩余空间 */
	.time-list {
		flex: 1;
		width: 100%;
		padding-bottom: 20rpx;
	}

	/* 网格布局容器 */
	.time-grid {
		width: 100%;
		padding: 0 20rpx 20rpx;
		/* 底部 padding 防止被按钮遮挡 */
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row;
	}

	/* 时间卡片通用样式 */
	.time-card {
		width: 158rpx;
		height: 90rpx;
		border-radius: 16rpx;
		margin-bottom: 22rpx;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-width: 2rpx;
		border-style: solid;

		/* 选中状态 */
		&.selected {
			background-color: #FFFBEF;
			border-color: #FFDB5F;

			.time-text,
			.time-sub {
				color: #3A3330;
			}
		}

		/* 未选中状态 */
		&.normal {
			background-color: #F3F3F3;
			border-color: transparent;

			.time-text,
			.time-sub {
				color: #9B9B9B;
			}
		}
	}

	/* 时间文字 */
	.time-text {
		font-size: 28rpx;
		font-weight: 400;
		margin-bottom: 4rpx;
		text-align: center;
	}

	/* 状态文字 */
	.time-sub {
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 2rpx;
		text-align: center;
	}

	/* 底部保存按钮 */
	.footer-box {

		/* bottom: 40rpx; */
		/* 距离底部距离 */

		transform: translateX(-50%);
		left: 50%;
		width: 78%;
		height: 100rpx;
		background-color: #FFDA59;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		.footer-text {
			color: #3A3330;
			font-size: 34rpx;
			font-weight: 700;
			letter-spacing: 3rpx;
		}
	}
</style>