jiaoyu_mp/jiaoyu_mp/unpackage/dist/dev/mp-weixin/pagesA/course/reservation.js

"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
  props: {
    isQuantum: {
      type: Boolean,
      default: false
    },
    isMultiple: {
      //是否多选
      type: Boolean,
      default: false
    },
    isSection: {
      //预约时间段
      type: Boolean,
      default: false
    },
    disableText: {
      //禁用显示的文本
      type: String,
      default: "已预约"
    },
    disableSumText: {
      type: String,
      default: "已约满"
    },
    undisableText: {
      //未禁用显示的文本
      type: String,
      default: "可预约"
    },
    timeInterval: {
      // 时间间隔，小时为单位
      type: Number,
      default: 1
    },
    selectedTabColor: {
      // 日期栏选中的颜色
      type: String,
      default: "#51bf81"
    },
    selectedItemColor: {
      // 时间选中的颜色
      type: String,
      default: "#51bf81"
    },
    beginTime: {
      type: String,
      default: "08:30"
    },
    endTime: {
      type: String,
      default: "19:30"
    },
    appointTime: {
      // 预约的时间
      type: Array,
      default() {
        return [];
      }
    },
    disableTimeSlot: {
      // 预约开始和结束时间，来禁用时间段
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    appointTime: {
      handler(val) {
        if (val && val.length) {
          this.initOnload();
        }
      }
    },
    disableTimeSlot: {
      handler(val) {
        if (val && val.length) {
          this.initOnload();
        }
      }
    }
  },
  data() {
    return {
      data: [
        {
          "teacher_id": 6,
          "teacher_name": "张老师",
          "list": {
            "id": 6,
            "course_id": 1,
            "teacher_id": 6,
            "start_time": 1731823931,
            "end_time": 1731324931,
            "duration": 60,
            "course_number": 30,
            "reservation_number": 0,
            "teacher_name": "张老师",
            "teacher_desc": "擅长舞蹈",
            "course_name": "拳击初级课",
            "course_image": "../../static/logo2.jpg",
            "course_desc": "拳击讲解",
            "address": "一方天地"
          }
        },
        {
          "teacher_id": 7,
          "teacher_name": "王老师",
          "list": {
            "id": 7,
            "course_id": 1,
            "teacher_id": 7,
            "start_time": 1731324931,
            "end_time": 1731823931,
            "duration": 60,
            "course_number": 30,
            "reservation_number": 0,
            "teacher_name": "王老师",
            "teacher_desc": "从业20年，资深老教室",
            "course_name": "拳击初级课",
            "course_image": "../../static/logo2.jpg",
            "course_desc": "拳击讲解",
            "address": "一方天地"
          }
        }
      ],
      course_number: 30,
      reservation_number: 0,
      teacher_desc: "",
      course_name: "",
      course_image: "",
      start_time: 1731823931,
      //开始时间戳
      end_time: 1731324931,
      //结束时间戳
      orders_product_id: 0,
      //商品id
      course_id: 0,
      //课程id
      schedule_id: 0,
      //排课id
      teacherActive: -1,
      orderDateTime: "暂无选择",
      // 选中时间
      orderTimeArr: {},
      //多选的时间
      dateArr: [],
      //日期数据
      timeArr: [],
      //时间数据
      nowDate: "",
      // 当前日期
      dateActive: -1,
      //选中的日期索引
      timeActive: 0,
      //选中的时间索引
      timeQuanBeginIndex: 0,
      //时间段开始的下标
      selectDate: "",
      //选择的日期
      timeQuanBegin: "",
      //时间段开始时间
      timeQuanEnd: ""
      //时间段结束时间
      // isTime:[],
      // teacherList: ['王老师', '崔老师','王老师', '崔老师'],
      // days: ['周一', '周二', '周三', '周四', '周五'],
    };
  },
  onLoad(e) {
    let { orders_product_id, course_id } = e;
    this.orders_product_id = orders_product_id;
    this.course_id = course_id;
  },
  onShow() {
    this.defaultTeacherDesc();
    this.initOnload();
    if (this.orders_product_id > 0 && this.course_id > 0) {
      this.$http.request("api/course/get_schedule_list", { orders_product_id: this.orders_product_id, course_id: this.course_id }, "post").then((res) => {
        if (res.code === "success") {
          this.data = res.data;
        }
      });
    }
  },
  methods: {
    //老师选择事件
    selectTeacher(index, item) {
      if (this.teacherActive == index)
        return;
      this.teacherActive = index;
      if (!this.isMultiple) {
        this.orderDateTime = "暂无选择";
      }
      if (this.data.length > 0) {
        if (this.teacherActive == index) {
          this.course_number = this.data[index]["list"].course_number;
          this.reservation_number = this.data[index]["list"].reservation_number;
          this.teacher_desc = this.data[index]["list"].teacher_desc;
          this.course_name = this.data[index]["list"].course_name;
          this.course_image = this.data[index]["list"].course_image;
          this.start_time = this.data[index]["list"].start_time;
          this.selectDate = this.schedule_id = this.data[index]["list"].id;
          this.initOnload();
        }
      }
    },
    //默认选项
    defaultTeacherDesc() {
      if (this.data.length > 0) {
        this.course_number = this.data[0]["list"].course_number;
        this.reservation_number = this.data[0]["list"].reservation_number;
        this.teacher_desc = this.data[0]["list"].teacher_desc;
        this.course_name = this.data[0]["list"].course_name;
        this.course_image = this.data[0]["list"].course_image;
        this.teacherActive = 0;
        this.start_time = this.data[0]["list"].start_time;
        this.schedule_id = this.data[0]["list"].id;
      }
    },
    //预约课程事件
    reservationPopup() {
      if (this.schedule_id === 0) {
        common_vendor.index.showToast({
          title: "请选择老师",
          icon: "none"
        });
        return;
      }
      if (this.dateActive < 0) {
        common_vendor.index.showToast({
          title: "请选择预约日期",
          icon: "none"
        });
        return;
      }
      if (this.orderDateTime === "暂无选择") {
        common_vendor.index.showToast({
          title: "请选择预约时间",
          icon: "none"
        });
        return;
      }
      this.$http.request("api/course/reservation/", { orders_product_id: this.orders_product_id, schedule_id: this.schedule_id }, "post").then((res) => {
        if (res.code === "success") {
          if (this.reservation_number < this.course_number) {
            this.reservation_number++;
          }
          this.handleSubmit();
          this.initOnload();
          this.$refs.outcomePopup.open("center");
        } else {
          common_vendor.index.showToast({
            title: `${res.msg}`,
            icon: "error"
          });
          return;
        }
      });
    },
    outcomeButton() {
      this.orderDateTime = "暂无选择";
      this.$refs.outcomePopup.close();
    },
    initOnload() {
      this.dateArr = this.initData();
      this.timeArr = this.initTime(this.beginTime, this.endTime, this.timeInterval, this.isQuantum);
      this.timeQuanBegin = this.timeQuanEnd = "";
      console.log(this.orderTimeArr);
      this.timeArr.forEach((item, index) => {
        if (this.isQuantum) {
          const cur_be_time = `${this.selectDate} ${item.begin}:00`;
          const cur_end_time = `${this.selectDate} ${item.end}:00`;
          for (let time of this.disableTimeSlot) {
            const [begin_time = "", end_time = ""] = time;
            if (begin_time && end_time && (begin_time <= cur_be_time && cur_end_time <= end_time)) {
              item.disable = true;
            }
          }
          if (this.selectDate == this.nowDate && this.currentTime().time > `${item.begin}:00`) {
            item.disable = true;
          }
          if (this.orderTimeArr[this.selectDate]) {
            for (let items of this.orderTimeArr[this.selectDate]) {
              if (items[0].split(" ")[1] === `${item.begin}:00` && items[1].split(" ")[1] === `${item.end}:00`) {
                item.isActive = true;
              }
            }
          }
        } else {
          if (this.reservation_number === this.course_number) {
            item.disableSum = true;
          }
          this.appointTime.forEach((t) => {
            let [date, time] = t.split(" ");
            if (date == this.selectDate && item.time == time) {
              item.disable = true;
            }
          });
          const cur_time = `${this.selectDate} ${item.time}`;
          for (let time of this.disableTimeSlot) {
            const [begin_time = "", end_time = ""] = time;
            if (begin_time && end_time && (begin_time <= cur_time && cur_time <= end_time)) {
              item.disable = true;
            }
          }
          if (!item.disable)
            ;
          this.isSection && (item.isInclude = false);
          if (this.isMultiple && (this.orderTimeArr[this.selectDate] || []).includes(item.time)) {
            item.isActive = true;
          }
        }
      });
      this.timeActive = -1;
    },
    // 日期选择事件
    selectDateEvent(index, item) {
      if (this.dateActive == index)
        return;
      this.dateActive = index;
      this.selectDate = item.date;
      if (!this.isMultiple) {
        this.orderDateTime = "暂无选择";
      }
      this.initOnload();
    },
    // 时间选择事件
    selectTimeEvent(index, item) {
      if (this.isQuantum) {
        return this.handleSelectQuantum(index, item);
      }
      if (item.disable)
        return;
      if (item.disableSum)
        return;
      if (this.isMultiple) {
        item.isActive = !item.isActive;
        this.timeArr = this.timeArr.slice();
        this.orderTimeArr[this.selectDate] = this.timeArr.reduce((prev, cur) => {
          cur.isActive && prev.push(cur.time);
          return prev;
        }, []);
      } else {
        console.log("hhh");
        this.timeActive = index;
        this.orderDateTime = `${this.selectDate} ${item.time}`;
      }
    },
    // 选择时间段
    handleSection(index, item) {
      if (item.disable)
        return;
      function clearTime() {
        this.timeQuanBeginIndex = index;
        this.timeQuanBegin = item.time;
        this.timeQuanEnd = "";
      }
      if (!this.timeQuanBegin) {
        clearTime.call(this);
        return;
      }
      if (!this.timeQuanEnd && this.timeQuanBegin) {
        let isDisble = false;
        let start = this.timeQuanBeginIndex;
        let end = index;
        start > end && ([start, end] = [end, start]);
        for (let i = start + 1; i < end; i++) {
          if (this.timeArr[i].disable) {
            isDisble = true;
            clearTime.call(this);
            return;
          }
        }
        if (!isDisble) {
          for (let i = start + 1; i < end; i++) {
            this.timeArr[i].isInclude = true;
          }
        }
        this.timeQuanEnd = item.time;
        return;
      }
      if (this.timeQuanBegin && this.timeQuanEnd) {
        this.timeArr.forEach((t) => {
          t.isInclude = false;
        });
        clearTime.call(this);
      }
    },
    handleSelectQuantum(index, item) {
      if (item.disable)
        return;
      if (this.isMultiple) {
        item.isActive = !item.isActive;
        this.timeArr = this.timeArr.slice();
        this.orderTimeArr[this.selectDate] = this.timeArr.reduce((prev, cur) => {
          const cur_be_time = `${this.selectDate} ${cur.begin}:00`;
          const cur_end_time = `${this.selectDate} ${cur.end}:00`;
          cur.isActive && prev.push([cur_be_time, cur_end_time]);
          return prev;
        }, []);
      } else {
        this.timeActive = index;
        this.orderDateTime = {
          begin: `${this.selectDate} ${item.begin}:00`,
          end: `${this.selectDate} ${item.end}:00`
        };
      }
      console.log(this.orderTimeArr);
    },
    handleChange() {
      this.timeQuanBegin > this.timeQuanEnd && ([this.timeQuanBegin, this.timeQuanEnd] = [
        this.timeQuanEnd,
        this.timeQuanBegin
      ]);
    },
    handleSubmit() {
      if (this.isMultiple) {
        if (this.isQuantum) {
          this.$emit("change", this.orderTimeArr);
          return;
        }
        for (let date in this.orderTimeArr) {
          this.orderTimeArr[date].forEach((item) => {
          });
        }
      } else {
        this.appointTime.push(this.orderDateTime);
      }
    },
    //字符串拼接
    strFormat(str) {
      return str < 10 ? `0${str}` : str;
    },
    // 获取当前时间
    currentTime() {
      const myDate = /* @__PURE__ */ new Date();
      const y = myDate.getFullYear();
      const m = myDate.getMonth() + 1;
      const d = myDate.getDate();
      const date = y + "-" + this.strFormat(m) + "-" + this.strFormat(d);
      const hour = myDate.getHours();
      const min = myDate.getMinutes();
      const secon = myDate.getSeconds();
      const time = this.strFormat(hour) + ":" + this.strFormat(min) + ":" + this.strFormat(secon);
      return {
        date,
        time
      };
    },
    //时间戳转日期
    timeStamp(time, isQuantum) {
      const dates = new Date(time);
      const year = dates.getFullYear();
      const month = dates.getMonth() + 1;
      const date = dates.getDate();
      const day = dates.getDay();
      const hour = dates.getHours();
      const min = dates.getMinutes();
      const days = ["日", "一", "二", "三", "四", "五", "六"];
      return {
        allDate: `${year}/${this.strFormat(month)}/${this.strFormat(date)}`,
        date: `${this.strFormat(year)}-${this.strFormat(month)}-${this.strFormat(date)}`,
        //返回的日期 07-01
        day: `周${days[day]}`,
        //返回的礼拜天数  星期一
        hour: this.strFormat(hour) + ":" + this.strFormat(min) + (isQuantum ? "" : "")
        //返回的时钟 08:00
      };
    },
    //获取最近7天的日期和礼拜天数
    initData() {
      const time = [];
      const now = this.start_time * 1e3;
      let timeStr = 3600 * 24 * 1e3;
      let obj = {
        0: "今天"
        // 1: "明天",
        // 2: "后天"
      };
      for (let i = 0; i < 7; i++) {
        time.push({
          date: this.timeStamp(now + timeStr * i).date,
          //保存日期
          timeStamp: now + timeStr * i,
          //保存时间戳
          week: obj[i] ?? this.timeStamp(now + timeStr * i).day
        });
      }
      return time;
    },
    //时间数组
    initTime(startTime = "10:00:00", endTime = "21:00:00", timeInterval = 1, isQuantum = false) {
      const time = [];
      const date = this.timeStamp(Date.now()).allDate;
      const startDate = `${date} ${startTime}`;
      const endDate = `${date} ${endTime}`;
      const startTimeStamp = new Date(startDate).getTime();
      const endTimeStamp = new Date(endDate).getTime();
      const timeStr = 3600 * 1e3 * timeInterval;
      const sum = (endTimeStamp - startTimeStamp) / timeStr;
      const count = sum % 2 == 0 ? sum : sum - 1;
      for (let i = startTimeStamp; i <= endTimeStamp; i = i + timeStr) {
        if (isQuantum) {
          num++;
          time.push({
            begin: this.timeStamp(i, isQuantum).hour,
            end: this.timeStamp(i + timeStr, isQuantum).hour,
            disable: false
          });
        } else {
          time.push({
            time: this.timeStamp(i).hour,
            sum: `${this.reservation_number}/${this.course_number}`,
            disableSum: false,
            disable: false
          });
        }
        if (isQuantum && num >= count)
          return time;
      }
      return time;
    }
  }
};
if (!Array) {
  const _easycom_uni_popup2 = common_vendor.resolveComponent("uni-popup");
  _easycom_uni_popup2();
}
const _easycom_uni_popup = () => "../../uni_modules/uni-popup/components/uni-popup/uni-popup.js";
if (!Math) {
  _easycom_uni_popup();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return {
    a: common_vendor.t($data.course_name),
    b: common_vendor.t($data.teacher_desc),
    c: $data.course_image,
    d: common_vendor.f($data.data, (item, index, i0) => {
      return {
        a: common_vendor.t(item.teacher_name),
        b: index,
        c: common_vendor.o(($event) => $options.selectTeacher(index, item), index),
        d: common_vendor.n(index === $data.teacherActive ? "active" : "")
      };
    }),
    e: common_vendor.f($data.dateArr, (item, index, i0) => {
      return {
        a: common_vendor.t(item.week),
        b: common_vendor.t(item.date),
        c: index,
        d: common_vendor.o(($event) => $options.selectDateEvent(index, item), index),
        e: index == $data.dateActive ? 1 : "",
        f: index == $data.dateActive ? $props.selectedTabColor : "#333"
      };
    }),
    f: common_vendor.f($data.timeArr, (item, _index, i0) => {
      return {
        a: common_vendor.t(item.disable ? $props.disableText : $props.undisableText),
        b: common_vendor.t(item.time),
        c: common_vendor.t(item.sum),
        d: _index,
        e: item.disable ? 1 : "",
        f: ($props.isMultiple ? item.isActive : _index == $data.timeActive) ? 1 : "",
        g: $props.isMultiple ? item.isActive ? "#fff" : "#333" : _index == $data.timeActive ? "#fff" : "#333",
        h: $props.isMultiple ? item.isActive ? $props.selectedItemColor : "" : _index == $data.timeActive ? $props.selectedItemColor : "",
        i: common_vendor.o(($event) => $options.selectTimeEvent(_index, item), _index)
      };
    }),
    g: common_vendor.t($data.orderDateTime),
    h: common_vendor.o(($event) => $options.reservationPopup()),
    i: common_vendor.t($data.orderDateTime),
    j: common_vendor.o(($event) => $options.outcomeButton()),
    k: common_vendor.sr("outcomePopup", "46f39ab6-0"),
    l: common_vendor.p({
      ["is-mask-click"]: false
    })
  };
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createPage(MiniProgramPage);