gym-manage/gym-manage-uniapp/components/groupCourse/TimePeriodSelector.vue

<template>
	<view class="time-period-selector">
		<view class="sort-header">
			<uni-icons type="calendar" size="16" color="#FF6B35" class="sort-icon" />
			<text class="sort-label">上课时段</text>
		</view>
		<view class="slider-wrapper">
			<view 
				v-for="(option, index) in timePeriodOptions" 
				:key="index"
				:class="['slider-item', { active: currentIndex === index }]"
				@click="handlePeriodChange(index)"
			>
				<span class="iconfont_time_select" v-bind:class="getPeriodIcon(option.value)"></span>
				
				<text :class="['slider-text', { active: currentIndex === index }]">
					{{ option.label.split(' ')[0] }}
				</text>
			</view>
			<!-- 滑动指示器 -->
			<view 
				class="slider-indicator" 
				:style="{ left: `calc(8rpx + ${currentIndex} * (100% - 16rpx) / 4)` }"
			></view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
	timePeriodOptions: {
		type: Array,
		default: () => [
			{ label: '全部', value: 'all' },
			{ label: '早上 (6-12 点)', value: 'morning', startHour: 6, endHour: 12 },
			{ label: '下午 (12-18 点)', value: 'afternoon', startHour: 12, endHour: 18 },
			{ label: '晚上 (18-24 点)', value: 'evening', startHour: 18, endHour: 24 }
		]
	},
	modelValue: {
		type: Number,
		default: 0
	}
})

const emit = defineEmits(['update:modelValue', 'change'])

const currentIndex = ref(props.modelValue)

watch(() => props.modelValue, (val) => {
	currentIndex.value = val
})

const getPeriodIcon = (value) => {
	const iconMap = {
		'all': 'icon-gengduo ',
		'morning': 'icon-zaochen',
		'afternoon': 'icon-xiawucha ',
		'evening': 'icon-yewan '
	}
	return iconMap[value] || iconMap[all]
}

const handlePeriodChange = (index) => {
	currentIndex.value = index
	const option = props.timePeriodOptions[index]
	console.log('[TimePeriodSelector] 时间段变更:', { 
		index, 
		value: option.value, 
		label: option.label 
	})
	emit('update:modelValue', index)
	emit('change', option)
}

const getTimePeriodParams = () => {
	const option = props.timePeriodOptions[currentIndex.value]
	const params = {
		index: currentIndex.value,
		value: option.value,
		label: option.label,
		startHour: option.startHour,
		endHour: option.endHour
	}
	console.log('[TimePeriodSelector] 获取时间段参数:', params)
	return params
}

defineExpose({
	getTimePeriodParams,
	getPeriodIcon
})
</script>

<style lang="scss" scoped>

@import "@/common/style/iconfont_time_select.css";

.time-period-selector {
	padding: 24rpx;
	background: linear-gradient(135deg, #F5F7FA 0%, #E9EDF2 100%);
	border-radius: 20rpx;
	box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.03);

	.sort-header {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 20rpx;
		
		.sort-icon {
			display: flex;
			align-items: center;
		}
		
		.sort-label {
			font-size: 28rpx;
			color: #1a202c;
			font-weight: 600;
		}
	}

	.slider-wrapper {
		position: relative;
		display: flex;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 8rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
		
		.slider-item {
			position: relative;
			z-index: 2;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 8rpx;
			padding: 20rpx 0;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			
			.slider-icon {
				display: flex;
				align-items: center;
				transition: all 0.3s ease;
			}
			
			.slider-text {
				font-size: 24rpx;
				color: #8A99B4;
				font-weight: 500;
				transition: all 0.3s ease;
				
				&.active {
					color: #ffffff;
					font-weight: 600;
				}
			}
			
			&.active {
				.slider-icon {
					color: #ffffff !important;
				}
				
				.slider-text {
					color: #ffffff !important;
				}
			}
		}
		
		/* 滑动指示器 */
		.slider-indicator {
			position: absolute;
			top: 8rpx;
			left: 8rpx;
			width: calc((100% - 16rpx) / 4);
			height: calc(100% - 16rpx);
			background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
			border-radius: 12rpx;
			box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.4);
			transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			z-index: 1;
		}
	}
}
</style>