封装时间点选择器

src/sheep/components/TimePointPicker.vue

@@ -0,0 +1,130 @@
+<template>
+	<view class="date-time-range">
+		<view
+			class="date-range-item"
+			:class="[selectedDateIndex == index ? 'active' : '']"
+			v-for="(item, index) in getLast7DaysWeek()"
+			:key="index"
+			@click="selectDate(item, index)"
+		>
+			<view>{{ item.week }}</view>
+			<view>{{ item.date }}</view>
+		</view>
+	</view>
+	<view class="day-time-point-list">
+		<button
+			:class="selectedTimePointIndex == index ? 'active' : ''"
+			v-for="(item, index) in dayTimePointList"
+			:key="index"
+			@click="selectTimePoint(item, index)"
+		>
+			{{ item }}
+		</button>
+	</view>
+	<view class="px-20rpx py-2 flex justify-between">
+		<tm-button skin="thin" block @click="emit('cancel')">取消</tm-button>
+		&nbsp;&nbsp;
+		<tm-button block @click="onConfirm">确定</tm-button>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+
+const emit = defineEmits(["confirm", "cancel"])
+
+// 未来一周的日期
+const getLast7DaysWeek = (): { week: string; date: string; fullDate: string }[] => {
+	const weekMap: string[] = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
+	const result: { week: string; date: string; fullDate: string }[] = []
+	const today = new Date()
+	for (let i = 0; i < 7; i++) {
+		const d = new Date(today)
+		d.setDate(today.getDate() + i)
+		const week = weekMap[d.getDay()]
+		const month = (d.getMonth() + 1).toString().padStart(2, "0")
+		const day = d.getDate().toString().padStart(2, "0")
+		const fullDate = `${d.getFullYear()}-${month}-${day}`
+		result.push({
+			week,
+			date: `${month}-${day}`,
+			fullDate,
+		})
+	}
+	return result
+}
+
+// 生成时间点列表（8:00-18:00，每半小时一个时间点）
+const dayTimePointList = computed(() => {
+	const times: string[] = []
+	for (let i = 8; i < 18; i++) {
+		times.push(`${i.toString().padStart(2, "0")}:00`)
+		times.push(`${i.toString().padStart(2, "0")}:30`)
+	}
+	times.push("18:00") // 添加18:00作为结束时间
+	return times
+})
+
+const selectedDateIndex = ref(0)
+const selectedDateValue = ref<{ week: string; date: string; fullDate: string }>(getLast7DaysWeek()[0])
+const selectedTimePointIndex = ref(0)
+const selectedTimePointValue = ref(dayTimePointList.value[0])
+
+// 选择周
+const selectDate = (value: { week: string; date: string; fullDate: string }, index: number) => {
+	selectedDateValue.value = value
+	selectedDateIndex.value = index
+}
+
+// 选择时间点
+const selectTimePoint = (value: string, index: number) => {
+	selectedTimePointValue.value = value
+	selectedTimePointIndex.value = index
+}
+
+// 确认
+function onConfirm() {
+	emit("confirm", selectedDateValue.value, selectedTimePointValue.value)
+}
+</script>
+
+<style scoped>
+.date-time-range {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 30rpx;
+	font-size: 24rpx;
+}
+.date-time-range .date-range-item {
+	padding: 10rpx;
+	background-color: #eee;
+	border-radius: 12rpx;
+	margin: 0 10rpx;
+	text-align: center;
+	white-space: nowrap;
+}
+.date-time-range .active {
+	background: #0779fd;
+	border-color: #4988f2;
+	color: white;
+}
+.day-time-point-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20rpx;
+	margin-bottom: 20rpx;
+}
+.day-time-point-list button {
+	flex: 1 0 90rpx;
+	padding: 6rpx 0;
+	border: none;
+	background: #eeeeee;
+	border-radius: 12rpx;
+	font-size: 26rpx;
+	cursor: pointer;
+}
+.day-time-point-list .active {
+	background-color: #0779fd;
+	color: white;
+}
+</style>