leromro-mini/components/its-calendar/its-calendar.vue

<template>
  <view>
    <view class="calendar">
      <scroll-view
        class="calendar_day_scroll"
        scroll-x="true"
        show-scrollbar="false"
      >
        <view class="calendar_day">
          <view
            class="day_x"
            :style="{ color: day_index == index ? '#FE3B3C' : '' }"
            v-for="(item, index) in dayArr"
            :key="index"
            @click.stop="dayList(item, index)"
          >
            <view class="day_x_a">{{ item.weeks }}</view>
            <view class="day_x_b">{{ item.days }}</view>
          </view>
        </view>
      </scroll-view>
      <scroll-view
        class="calendar_time_scroll"
        scroll-y="true"
        show-scrollbar="false"
      >
        <view class="calendar_time">
          <view
            class="time_x"
            :class="{
              time_x_sty: item?.checked,
              'disabled-time': item?.disabled || item?.hasReservation === 1,
            }"
            v-for="(item, index) in timeHostArr[day_index]"
            :key="index"
            @click="handleTimeClick(item)"
          >
            <text>{{ item?.hours }}</text>
            <text v-if="item.hasReservation === 1" class="hasRe-text"
              >已预约</text
            >
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="calendar_footer">
      <view class="selected-time-info">
        {{ selectRange.join('\n') }}
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    timeArr: {
      type: Array,
      default: () => [],
    },

    timeHostArr: {
      type: Array,
      default: () => [],
    },
    businessDuration: {
      // 从父组件接收的服务时长（分钟）
      type: Number,
      default: 0,
    },
    minQuantity: {
      // 从父组件接收的购买次数（次数）
      type: Number,
      default: 1,
    },
    businessTierName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dayArr: [],
      day_index: 0,
      host_index: '',
      nowTimes: new Date().getTime(), // 只保留一个定义
      disableAfterTime: null,
      selectedTime: null,
      selectedDay: null, // 新增：记录选择的日期
      selectedTimeSlots: {}, // 存储每个日期的选择状态
      upItem: null, //  保留上一个点击的item，外部情况下再刷新状态
      filteredSlots: [],
    }
  },
  watch: {
    timeArr: {
      handler(newVal) {
        // console.log(newVal, '>>>>>>>时间范围');
        let dateArr = newVal.map((item) => {
          let day = new Date(item)
          const daysOfWeek = [
            '周日',
            '周一',
            '周二',
            '周三',
            '周四',
            '周五',
            '周六',
          ]
          return {
            weeks: daysOfWeek[day.getDay()],
            days: item.slice(5),
          }
        })
        this.dayArr = dateArr
      },
      immediate: true,
      deep: true,
    },
    timeHostArr: {
      handler(newVal) {
        // console.log(newVal, '>>>>>>>时间更新');
        // 当timeHostArr更新时，恢复之前的选择状态
        if (newVal && newVal.length > 0) {
          this.restoreSelections()
        }
      },
      deep: true,
    },
  },
  mounted() {
    console.log(this.businessTierName, "businessTierName from parent component")
  },
  computed: {
    // 计算选中区域
    selectRange() {
      const reservations = this.timeHostArr[this.day_index]
      // console.log(reservations, '>>>>>reservations')
      // console.log(JSON.stringify(current), '>>>>>current');
      // return current
      const result = []
      let currentGroup = null

      for (const item of reservations) {
        if (item.checked) {
          // 遇到新的checked项，创建新组
          if (currentGroup) {
            result.push(currentGroup)
          }
          currentGroup = [item]
        } else if (currentGroup && item.disabled && item.hasReservation === 0) {
          // 如果当前有活跃的组，且符合disabled和hasReservation条件，加入当前组
          currentGroup.push(item)
        } else if (currentGroup) {
          // 不符合连续条件，结束当前组
          result.push(currentGroup)
          currentGroup = null
        }
      }

      // 添加最后一组（如果有）
      if (currentGroup) {
        result.push(currentGroup)
      }

      const timeRangeArr = result.map((arr) => {
        // 获取选中的日期
        const selectedDate = this.timeArr[this.day_index]
        const timeRange = arr[0].hours + '-' + arr[arr.length - 1].hours
        return `${this.businessTierName}\n预约上门时间：${selectedDate} ${timeRange}`
      })

      return timeRangeArr
    },
  },
  methods: {
    // 恢复选择状态
    restoreSelections() {
      // console.log('>>>>>>执行了', this.selectedTimeSlots);
      if (!this.timeHostArr[this.day_index]) return

      // console.log('>>>>>>执行了2', this.selectedTimeSlots);

      // 遍历当前日期的时间槽
      this.timeHostArr[this.day_index].forEach((slot) => {
        // 检查这个时间槽是否在之前被选中
        const dateKey = this.timeArr[this.day_index]
        // console.log(dateKey, '>>>>dateKey');
        // console.log(this.selectedTimeSlots[dateKey], '>>>>this.selectedTimeSlots[dateKey]');
        if (
          this.selectedTimeSlots[dateKey] &&
          this.selectedTimeSlots[dateKey].includes(slot.timeStamp)
        ) {
          slot.checked = true

          // 计算并禁用后续的时间段
          const seconds = this.businessDuration * this.minQuantity * 60
          // const startTimestamp =
          const endTimestamp = slot.timeStamp + seconds

          // 禁用后续的时间段
          this.timeHostArr[this.day_index].forEach((s) => {
            // 差一个范围控制变量，是否在可选择范围内
            if (s.timeStamp > slot.timeStamp && s.timeStamp <= endTimestamp) {
              s.disabled = true
            }
          })
        }
      })
    },

    handleTimeClick(item) {
      this.upItem = item

      const durationMs = this.businessDuration * this.minQuantity * 60 * 1000
      const itemTime =
        item.timeStamp > 9999999999 ? item.timeStamp : item.timeStamp * 1000
      const slots = this.timeHostArr[this.day_index] || []
      const currentDate = this.timeArr[this.day_index]

      // 1. 判断当前时间是否在任何已预约时间段的服务时长范围内
      let inReservedRange = false
      for (let slot of slots) {
        if (slot.hasReservation === 1) {
          const reservedTime =
            slot.timeStamp > 9999999999 ? slot.timeStamp : slot.timeStamp * 1000
          const start = reservedTime - durationMs
          const end = reservedTime + durationMs
          if (itemTime >= start && itemTime < end) {
            inReservedRange = true
            break
          }
        }
      }
      if (inReservedRange) {
        uni.showToast({ title: '服务时长不足，请选择其他时间段', icon: 'none' })
        return false
      }

      // 2. 判断当前点击时间与所有已选时间段的服务时长有无重叠（多选判断）
      const selectedArr = this.selectedTimeSlots[currentDate] || []
      if (!item.checked) {
        // 只在选中时判断
        for (let t of selectedArr) {
          if (t === item.timeStamp) continue // 跳过自己
          const tStart = t > 9999999999 ? t : t * 1000
          const tEnd = tStart + durationMs
          if (
            (itemTime >= tStart && itemTime < tEnd) ||
            (itemTime < tStart && itemTime + durationMs > tStart)
          ) {
            uni.showToast({ title: '时间段不在服务范围内', icon: 'none' })
            return false
          }
        }
      }

      // 3. 检查当前时间到结束是否有足够的时间段
      const seconds = this.businessDuration * this.minQuantity * 60
      const endTimestamp = item.timeStamp + seconds

      // 找出当前时间到服务结束时间之间的所有时间段
      const filteredSlots = this.timeHostArr[this.day_index].filter((i) => {
        return i.timeStamp > item.timeStamp && i.timeStamp <= endTimestamp
      })
      this.filteredSlots = filteredSlots

      // 检查这些时间段中是否有已预约的时间
      const hasReservedSlot = filteredSlots.some(
        (slot) => slot.hasReservation === 1
      )
      if (hasReservedSlot) {
        uni.showToast({
          title: '所选时间段内有已预约时间，请选择其他时间',
          icon: 'none',
        })
        return false
      }

      // 时间差值(数组中的最后一项 - 当前点击项)
      const timestampDifferenceValue = filteredSlots.length
        ? (filteredSlots[filteredSlots.length - 1].timeStamp - item.timeStamp) *
          1000
        : 0

      // 选择时间，后续服务时间是否充足，不充足结束逻辑执行 timeStamp
      if (timestampDifferenceValue < durationMs) {
        // 所选时间差值 小于 服务时间值 结束执行
        uni.showToast({ title: '所选时间的服务时间不充足！', icon: 'none' })
        return false
      }

      if (!item.checked) {
        filteredSlots.forEach((v) => {
          v.disabled = true
        })
        item.checked = true
        if (!this.selectedTimeSlots[currentDate]) {
          this.selectedTimeSlots[currentDate] = []
        }
        this.selectedTimeSlots[currentDate].push(item.timeStamp)
      } else {
        filteredSlots.forEach((v) => {
          if (v.hasReservation !== 1) v.disabled = false
        })
        item.checked = false
        if (this.selectedTimeSlots[currentDate]) {
          const index = this.selectedTimeSlots[currentDate].indexOf(
            item.timeStamp
          )
          if (index > -1) {
            this.selectedTimeSlots[currentDate].splice(index, 1)
          }
        }
      }
      this.hosts(item)
    },

    async handleTimeClick2() {
      if (!this.upItem) return

      let item = this.upItem
      const currentDate = this.timeArr[this.day_index]
      const durationMs = this.businessDuration * this.minQuantity * 60 * 1000
      const itemTime =
        item.timeStamp > 9999999999 ? item.timeStamp : item.timeStamp * 1000
      const slots = this.timeHostArr[this.day_index] || []

      // 保留之前的选择状态，只重置disabled状态
      this.timeHostArr[this.day_index].forEach((s) => {
        if (s.hasReservation !== 1 && !s.checked) {
          s.disabled = false
        }
      })

      // 1. 检查是否与已预约时间冲突
      let inReservedRange = false
      for (let slot of slots) {
        if (slot.hasReservation === 1) {
          const reservedTime =
            slot.timeStamp > 9999999999 ? slot.timeStamp : slot.timeStamp * 1000
          const start = reservedTime - durationMs
          const end = reservedTime + durationMs
          if (itemTime >= start && itemTime < end) {
            inReservedRange = true
            break
          }
        }
      }
      if (inReservedRange) {
        uni.showToast({ title: '服务时长不足，请选择其他时间段', icon: 'none' })
        return false
      }

      // 2. 检查是否有足够的后续时间段
      const seconds = this.businessDuration * this.minQuantity * 60
      const endTimestamp = item.timeStamp + seconds

      // 找出从当前时间到结束时间之间的所有时间段
      const filteredSlots = this.timeHostArr[this.day_index].filter((i) => {
        return i.timeStamp > item.timeStamp && i.timeStamp <= endTimestamp
      })
      this.filteredSlots = filteredSlots

      // 检查这些时间段中是否有已预约的时间
      const hasReservedSlot = filteredSlots.some(
        (slot) => slot.hasReservation === 1
      )
      if (hasReservedSlot) {
        uni.showToast({
          title: '所选时间段内有已预约时间，请选择其他时间',
          icon: 'none',
        })
        return false
      }

      // 检查时间是否足够
      const timestampDifferenceValue = filteredSlots.length
        ? (filteredSlots[filteredSlots.length - 1].timeStamp - item.timeStamp) *
          1000
        : 0
      if (timestampDifferenceValue < durationMs) {
        uni.showToast({ title: '所选时间的服务时间不充足！', icon: 'none' })
        return false
      }

      // 所有检查通过，更新disabled状态
      // filteredSlots.forEach(v => {
      // 	if (v.hasReservation !== 1 && !v.checked) {
      // 		v.disabled = true;
      // 	}
      // });

      this.hosts(item)
    },

    // 点击日期
    dayList(e, index) {
      this.day_index = index
      this.$emit('getByDate', this.timeArr[index])
    },
    // 转换时间戳为毫秒
    ensureMillisecond(timestamp) {
      return timestamp > 9999999999 ? timestamp : timestamp * 1000
    },

    shouldDisable(item) {
      if (!item) return true

      // 已预约
      if (item.hasReservation === 1) return true

      const itemTime = this.ensureMillisecond(item.timeStamp)

      // 过去时间
      if (this.nowTimes > itemTime) return true

      return false
    },
    hosts(item) {
      const itemTime = this.ensureMillisecond(item.timeStamp)

      this.host_index = item.timeStamp // 显示用原始值
      this.selectedTime = itemTime
      this.disableAfterTime =
        itemTime + this.businessDuration * this.minQuantity * 60 * 1000
      this.$emit('getByTime', {
        ...item,
        timeStamp: itemTime, // 传递转换后的值
      })
    },

    // 点击立即预约
    sub() {
      if (this.host_index == '') {
        this.$tool.toast('请选择时间')
      } else {
        let day = this.dayArr[this.day_index]
        let time = this.times(this.host_index)
        let comTime = {
          days: day.days,
          weeks: day.weeks,
          hours: this.host_All.hours,
          timeStamp: this.host_All.timeStamp,
          time: time,
        }
        this.$emit('getTime', comTime)
      }
    },

    // 格式化时间
    times(data) {
      let date = new Date(data * 1000)
      let h = date.getHours()
      h = h < 10 ? '0' + h : h // 小时补0
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m // 分钟补0
      return h + ':' + m
    },
    time(data, type) {
      let date = new Date(data * 1000)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM // 月补0
      let d = date.getDate()
      d = d < 10 ? '0' + d : d // 天补0
      let h = date.getHours()
      h = h < 10 ? '0' + h : h // 小时补0
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m // 分钟补0
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s // 秒补0
      if (type == 'yymmdd') {
        return y + '-' + MM + '-' + d
      } else if (type == 'hhmmss') {
        return h + ':' + m + ':' + s
      } else {
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      }
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.calendar {
  width: 710rpx;
  height: 460rpx;
  background-color: #ffffff;
  margin: 20rpx auto 10rpx;
  border-radius: 8rpx;
}

.calendar_day_scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }
}

.calendar_day {
  display: flex;
  flex-direction: row;
  width: max-content;
  height: 120rpx;
}

.day_x {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100rpx;
  height: 100%;
  font-size: 30rpx;
  color: #333333;
  flex-shrink: 0;
  margin-right: 10rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  cursor: pointer;
}

.day_x_a {
  font-weight: bold;
  margin-bottom: 8rpx;
}

.day_x_b {
  font-size: 28rpx;
  color: #666;
}

.calendar_time_scroll {
  width: 100%;
  height: 380rpx;
  overflow-y: auto;
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.calendar_time {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 20rpx 0;
  overflow-y: auto;
}

.time_x {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 54rpx;
  border-radius: 26rpx;
  margin: 10rpx 0;
  font-size: 30rpx;
  color: #333333;

  display: flex;
  flex-direction: column;

  .hasRe-text {
    font-size: 20rpx;
    color: #999999;
  }
}

.time_x_sty {
  background-color: #ffe97b;
  color: #000000 !important;
}

.sub {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 710rpx;
  height: 100rpx;
  border-radius: 50rpx;
  margin: 30rpx auto;
  color: #ffffff;
  font-size: 36rpx;
  background-color: #fe3b3c;
}

.time_x {
  /* 正常状态样式 */
  &.disabled-time {
    background-color: #f2f2f2;
    color: #999999;
    pointer-events: none;
  }

  &.time_x_sty {
    background-color: #ffe97b;
    color: #000000;
  }
}

.calendar_footer {
  width: 100%;
  background: #fff;
  border-radius: 12rpx;
  margin: 0 auto 20rpx auto;
  padding: 24rpx 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  min-height: 60rpx;
  white-space: pre-line;
  font-size: 26rpx;
  color: #333;
  line-height: 1.8;
  border-left: 6rpx solid #FE3B3C;
}

.selected-time-info {
  color: #333;
  word-break: break-all;
  flex: 1;
  font-weight: 500;
  padding-left: 15rpx;
  line-height: 48rpx;
}

.selected-time-info .business-name {
  color: #FE3B3C;
  font-weight: bold;
}
</style>