更新记录

2.0.1（2025-12-11） 下载此版本

添加调用方法

2.0.0（2025-12-11） 下载此版本

修改样式，完善时间选择逻辑

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

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

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.15)

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 {Object} startColor - 开始时间的色块（未选中或表示起始时间的默认样式）。
       * @property {Object} endColor - 结束时间的色块（未选中或表示结束时间的默认样式）。
       * @property {Object} disableColor - 不可选时间的色块（禁用、不可交互的时间单元颜色）。
       * @property {Object} enableColor - 可选时间的色块（可交互但未被选中的时间单元颜色）。
       * @property {Object} selectColor - 选中区间的色块（处于已选择区间中间的时间单元颜色）。
       * @property {Object} selectStartColor - 已选中的开始时间的色块（选中区间的起点样式）。
       * @property {Object} selectEndColor - 已选中的结束时间的色块（选中区间的终点样式）。
       */
      colorDate: {
        startColor: {
          background: "#FFE8CC",
          border: "1px solid #FFD9B3",
          color: "#b8743d",
        },
        endColor: {
          background: "#B8E6BC",
          border: "1px solid #EFEFEF",
          color: "#666",
        },
        disableColor: {
          background: "#EFEFEF",
          border: "1px solid #EFEFEF",
          color: "#D1D1D6",
          cursor: "not-allowed",
        },
        othersColor: {
          background: "#FFE8CC",
          border: "1px solid #FFD9B3",
          color: "#b8743d",
        },
        enableColor: {
          background: "#B8E6BC",
          border: "1px solid #EFEFEF",
          color: "#666",
        },
        selectColor: {
          background: "#A8DAFF",
          border: "1px solid #8CCBF5",
          color: "#2563a8",
          fontWeight: 600,
        },
        selectStartColor: {
          background: "#A8DAFF",
          border: "1px solid #8CCBF5",
          color: "#2563a8",
          fontWeight: 600,
        },
        selectEndColor: {
          background: "#A8DAFF",
          border: "1px solid #8CCBF5",
          color: "#2563a8",
          fontWeight: 600,
        },
      },
      // 预约点列表
      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) {
            // 重置已选数据
            this.$refs.appointmentSelection.resetSelection();
          }
        },
      });
    },
    // 模拟请求数据列表
    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 必须包含 年月日 时分秒 
        * 如果不是整分整秒会被进取到下一个时间点，时间点进取是半个小时，可以在logic.js中修改normalizeToInterval这个函数
        */
        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%;
}

::v-deep .btn-confirm {
  color: #b8743d !important;
  background-color: #ffb366 !important;
}

::v-deep .btn-reset {
  color: #666 !important;
  background-color: #e0e0e0 !important;
}

::v-deep .top_box_pitch {
  color: #b8743d !important;
  background-color: #ffe8cc !important;
  border: 2rpx solid #ffb366 !important;
}

::v-deep .service-card.active {
  color: #b8743d !important;
  background-color: #ffe8cc !important;
  border: 2rpx solid #ffb366 !important;
}
</style>