mechanicStore-app/pages/console/setOrderTime.uvue

<!-- 设置时间 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<view style="width: 100%;height: 48rpx;"></view>
		<view class="head-box" @click="allTime">全部可接单</view>
		<scroll-view scroll-y="true" class="list">
			<view class="ss-flex-2 div-time-flag-box">
				<view :class="item?.isSelect ? 'conter-xz' : 'conter-xx'" v-for="item in timeArr"
					@click.stop="chooseTime(item)" :key="item.start_time">
					<view :class="item?.isSelect ? 'kjd-time' : 'xx-time'">{{ item.start_time }}</view>
					<view :class="item?.isSelect ? 'kjd-text' : 'xx-text'">{{ item?.isSelect ? '可接单' : '休息' }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="save-box" @click="handleSave">保存设置</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	//接口
	import workbenchesInfoApi from '@/sheep/api/masterProject/workbenches';

	const allIndex = ref(1)
	const timeArr = ref(Array.from({ length: 48 }, (_, i) => ({
		start_time: `${Math.floor(i / 2) < 10 ? '0' : ''}${Math.floor(i / 2)}:${i % 2 === 0 ? '00' : '30'}`,
		end_time: `${Math.floor((i + 1) / 2) < 10 ? '0' : ''}${Math.floor((i + 1) / 2)}:${(i + 1) % 2 === 0 ? '00' : '30'}`,
		isSelect: false
	})))
	onShow(() => {
		allIndex.value = 1
		getCoachTime()
	})
	//获取技师的时间设置
	const getCoachTime = async () => {
		// 先全部置为未选中
		timeArr.value.forEach(item => item.isSelect = false);

		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;
		}

		// 遍历所有时间段，判断是否在任一 time_range 内
		timeArr.value.forEach(item => {
			const itemTime = item.start_time;
			for (const range of timeRanges) {
				if (
					compareTime(itemTime, range.start_time) >= 0 &&
					compareTime(itemTime, range.end_time) < 0
				) {
					item.isSelect = true;
					break;
				}
			}
		});
	};

	// 时间字符串比较函数，返回 1/0/-1
	function compareTime(t1, t2) {
		// t1, t2: "09:00"
		const [h1, m1] = t1.split(':').map(Number);
		const [h2, m2] = t2.split(':').map(Number);
		if (h1 > h2) return 1;
		if (h1 < h2) return -1;
		if (m1 > m2) return 1;
		if (m1 < m2) return -1;
		return 0;
	}

	//点击单个时间
	const chooseTime = async (item) => {
		if (item.isSelect) {
			item.isSelect = false
		} else {
			item.isSelect = true
		}
	}
	//全部可接单
	const allTime = async () => {
		timeArr.value.forEach(item => {
			item.isSelect = true;
		});
		allIndex.value = 2
	}
	/**
	 * 保存排班设置
	 * @returns {Promise<void>}
	 */
	const handleSave = async () => {
		//获取可接单时间段
		const kjTime = []
		for (let i = 0; i < timeArr.value.length; i++) {
			const item = timeArr.value[i]
			if (item?.isSelect) {
				kjTime.push(item)
			}
		}
		if (kjTime.length === 0) {
			uni.showToast({
				title: '请至少选择一个可接单时间段',
				icon: 'none',
				duration: 2000
			})
			return
		}

		try {
			const scheduleData = {
				time_ranges: kjTime.filter(range => range.isSelect).map(range => ({
					start_time: range.start_time,
					end_time: range.end_time
				}))
			};
			await workbenchesInfoApi.editWorkTimeSetting(scheduleData);
			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/masterProject/homePage/index'
				})
			}, 2300);

		} catch (error) {
			uni.showToast({
				title: '保存失败，请重试',
				icon: 'none'
			});
		}
	};

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	//设置时间样式
	.head-box {
		width: 184rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		border-radius: 16rpx;
		background-color: #FFDA59;
		color: #3D444E;
		font-size: 28rpx;
		font-weight: 550;
		letter-spacing: 3rpx;
		margin-left: 32rpx;
		box-sizing: border-box;
	}


	.div-time-flag-box {
		width: 96%;
		margin-left: 3%;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.conter-xz {
		width: 158rpx;
		height: 90rpx;
		background-color: #FFFBEF;
		border: 2rpx solid #FFDB5F;
		border-radius: 16rpx;
		margin-bottom: 22rpx;
		margin-right: 22rpx;
		box-sizing: border-box;
	}

	.kjd-time {
		font-size: 28rpx;
		color: #3A3330;
		font-weight: 500;
		margin-top: 10rpx;
		text-align: center;
	}

	.kjd-text {
		font-size: 26rpx;
		color: #3A3330;
		font-weight: 500;
		letter-spacing: 2rpx;
		text-align: center;
	}

	.conter-xx {
		width: 158rpx;
		height: 94rpx;
		background-color: #F3F3F3;
		border-radius: 16rpx;
		margin-bottom: 22rpx;
		margin-right: 22rpx;
		box-sizing: border-box;
	}

	.xx-time {
		font-size: 28rpx;
		color: #9B9B9B;
		margin-top: 10rpx;
		text-align: center;
	}

	.xx-text {
		font-size: 26rpx;
		color: #9B9B9B;
		letter-spacing: 2rpx;
		text-align: center;
	}

	.save-box {
		position: absolute;
		bottom: 30rpx;
		left: 0;
		width: 78%;
		margin-left: 11%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #FFDA59;
		border-radius: 24rpx;
		font-size: 34rpx;
		color: #3A3330;
		font-weight: 550;
		letter-spacing: 3rpx;
		box-sizing: border-box;
	}

	//old样式
	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	// .body {
	//     position: relative;
	//     width: 100vw;
	//     height: 100vh;
	//     background-color: #FFFFFF;
	//     box-sizing: border-box;
	// }

	.list {
		position: absolute;
		top: 180rpx;
		left: 0;
		bottom: 150rpx;
		box-sizing: border-box;
	}
</style>