更新记录

1.0.0（2025-12-15） 下载此版本

在微信小程序测试没问题，其他端需要自测。

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.15)

HCNL-TimeSlot

<template>
  <view class="content">
    <AppointmentTimeSlot
      ref="appointmentTimeSlot"
      @selectDate="selectDate"
      @selectTime="selectTime"
      @confirmSelection="confirmSelection"
    />
  </view>
</template>
<script>
import AppointmentTimeSlot from "@/components/AppointmentTimeSlot/index.vue";
export default {
  components: {
    AppointmentTimeSlot,
  },
  data() {
    return {};
  },
  onReady() {
    /** 
     * 配置日期 传空对象从今天起后七天
     * startDate: '2023-10-01', // 可选，开始日期，格式 "YYYY-MM-DD"
     * endDate: '2023-10-31',   // 可选，结束日期，格式 "YYYY-MM-DD"
     */
    /* this.$refs.appointmentTimeSlot.configDate({
      startDate: '2023-10-01',
      endDate: '2023-10-31',
    }); */
    this.$refs.appointmentTimeSlot.configDate({});

    /** 
     * 设置已约满时间列表
     * 传入约满时间字符串数组，格式 "YYYY-MM-DD HH:mm:ss"
     * 也可在selectDate方法中动态设置
     */
    this.$refs.appointmentTimeSlot.setBookedTimes(['2025-12-15 18:30:00', '2025-12-15 09:30:00']);
    /** 
     * 配置时间 传空对象使用默认时间配置
     * startTime: '08:30',      // 可选，开始时间，格式 "HH:mm" 默认为 '09:30'
     * endTime: '23:30',        // 可选，结束时间，格式 "HH:mm" 默认为 '23:30'
     * interval: 30,            // 可选，时间间隔，单位分钟 默认为30
     * nightStartTime: '18:00', // 可选，夜间开始时间，格式 "HH:mm" 默认为 '18:00'
     */
    this.$refs.appointmentTimeSlot.configTime({
      startTime: "08:30",
      endTime: "23:30",
      interval: 30,
      nightStartTime: "18:00",
    });
  },
  methods: {
    // 选择日期
    selectDate(dateData, index) {
      this.$refs.appointmentTimeSlot.setBookedTimes(['2025-12-16 18:30:00', '2025-12-16 09:30:00']);
      console.log(dateData, index, "选择的时间和下标");
    },
    // 选择时间
    selectTime(index, time) {
      console.log(index, time, "选择的时间和下标");
    },
    // 确认选择
    confirmSelection(affirmData) {
      console.log(affirmData, "确认选择");
    },
  },
};
</script>
<style>
page {
  width: 100%;
  height: 100%;
}
</style>