更新记录

1.0.0（2025-11-14） 下载此版本

2025-11-14 第一次更新，测试了微信小程序和app，其他端请自测。

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

HCNL-Appointment

<template>
  <view class="content">
    <AppointmentSelection
      :colorDate="colorDate"
      ref="appointmentSelection"
      @selectDate="selectDate"
      @selectService="selectService"
      @confirmSelection="confirmSelection"
    />
  </view>
</template>

<script>
import AppointmentSelection from "@/components/AppointmentSelection/index.vue";
export default {
  components: {
    AppointmentSelection,
  },
  data() {
    return {
      /**
       * colorDate 配置对象：用于定义日期/时间选择器中各类时间单元的显示颜色。
       * @typedef {Object} colorDate
       * @property {string} startColor - 开始时间的色块（未选中或表示起始时间的默认样式）。
       * @property {string} endColor - 结束时间的色块（未选中或表示结束时间的默认样式）。
       * @property {string} disableColor - 不可选时间的色块（禁用、不可交互的时间单元颜色）。
       * @property {string} enableColor - 可选时间的色块（可交互但未被选中的时间单元颜色）。
       * @property {string} selectColor - 选中区间的色块（处于已选择区间中间的时间单元颜色）。
       * @property {string} selectStartColor - 已选中的开始时间的色块（选中区间的起点样式）。
       * @property {string} selectEndColor - 已选中的结束时间的色块（选中区间的终点样式）。
       */
      colorDate: {
        startColor: "#F4F9FF",
        endColor: "#F4FFF9",
        disableColor: "#F1F1F1",
        enableColor: "#FFFFFF",
        selectColor: "#E5F0FF",
        selectStartColor: "#7BB7FF",
        selectEndColor: "#7ADEAC",
      },
      // 预约点列表
      venuesList: [
        { id: "100001", name: "足球场" },
        { id: "100002", name: "篮球场" },
        { id: "100003", name: "网球场" },
        { id: "100004", name: "乒乓球场" },
      ],
      // 可选择时间区间 不传默认为06:00:00-19:00:00
      startTime: "06:00:00",
      endTime: "19:00:00",
      // 时间间隔 单位是分钟 不传默认为30
      interval: 30,
      // 选择的时间
      checkedDate: null,
      // 选择的预约点
      checkedSite: null,
    };
  },
  onReady() {
    // 设置预约点
    this.$refs.appointmentSelection.setSite(this.venuesList);
    // 设置可选时间
    this.$refs.appointmentSelection.setTime({
      start: this.startTime,
      end: this.endTime,
      interval: this.interval,
    });
    this.getOrderList();
  },
  methods: {
    // 选择日期触发
    async selectDate(dateData, index) {
      console.log(dateData, index, "选择的时间和下标");
      this.checkedDate = dateData;
      await this.getOrderList();
    },
    // 选择预约点触发
    async selectService(venuesData, index) {
      console.log(venuesData, index, "选择的预约点和下标");
      this.checkedSite = venuesData;
      await this.getOrderList();
    },
    // 确定选择
    confirmSelection(affirmData) {
      console.log(affirmData, "确认选择");
      uni.showModal({
        title: "确认预约",
        content: `场地: ${affirmData.venues?.name}\n预约日期: 星期${affirmData.date?.formatted}\n时间: ${affirmData.startTime} - ${affirmData.endTime}`,
        success: (res) => {
          if (res.confirm) {

          }
        },
      });
    },
    // 模拟请求数据列表
    getOrderList() {
      let timeDate = this.getToday();
      let orderList = [
        {
          id: "100001",
          startTime: `${timeDate} 12:00:00`,
          endTime: `${timeDate} 13:00:00`,
        },
        {
          id: "100002",
          startTime: `${timeDate} 16:00:00`,
          endTime: `${timeDate} 18:00:00`,
        },
      ];

      if (this.checkedDate) {
        let YTD = this.checkedDate.YTD;
        // startTime 和 endTime 必须包含 年月日 时分秒
        orderList = [
          { id: "100001", startTime: `${YTD} 12:00:00`, endTime: `${YTD} 13:00:00` },
          { id: "100002", startTime: `${YTD} 16:00:00`, endTime: `${YTD} 18:00:00` },
        ];
      }

      this.$refs.appointmentSelection.getVenueReservationTime(orderList);
    },

    getToday() {
      const date = new Date();

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份 0-11，所以 +1
      const day = String(date.getDate()).padStart(2, "0");
      const full = `${year}-${month}-${day}`;

      return full;
    },
  },
};
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.content {
  width: 100%;
  height: 100%;
}
</style>