131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<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.slice(0, 5) }}
|
|
</button>
|
|
</view>
|
|
<view class="px-20rpx py-2 flex justify-between">
|
|
<tm-button skin="thin" block @click="emit('cancel')">取消</tm-button>
|
|
|
|
<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:00`)
|
|
times.push(`${i.toString().padStart(2, "0")}:30:00`)
|
|
}
|
|
times.push("18:00: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>
|