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: true
    },
    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 [];
      }
    }
  },
  watch: {
    //监控appointTime变化，去控制预约时间的状态
    appointTime: {
      handler(val) {
        if (val && val.length) {
          this.initOnload();
        }
      }
    },
    //监控排课列表的里面的属性reservation_status的值，从而保持前后端预约时间状态的一致性。
    shcedule_list: {
      handler(val) {
        if (val && val.length) {
          this.initOnload();
        }
      }
    }
  },
  data() {
    return {
      data: [
        {
          "teacher_id": 6,
          "teacher_name": "张老师",
          "list": [
            {
              "id": 4,
              "course_id": 1,
              "teacher_id": 6,
              "start_time": 1732060800,
              "end_time": 1732063500,
              "duration": 45,
              "course_number": 0,
              "reservation_number": 0,
              "teacher_name": "张老师",
              "teacher_desc": "擅长舞蹈",
              "course_name": "拳击初级课",
              "course_image": "../../static/logo2.jpg",
              "course_desc": "拳击讲解",
              "address": "一方天地",
              "reservation_status": 0
            },
            {
              "id": 6,
              "course_id": 1,
              "teacher_id": 6,
              "start_time": 1732064400,
              "end_time": 1732068e3,
              "duration": 60,
              "course_number": 30,
              "reservation_number": 0,
              "teacher_name": "张老师",
              "teacher_desc": "擅长舞蹈",
              "course_name": "拳击初级课",
              "course_image": "../../static/logo2.jpg",
              "course_desc": "拳击讲解",
              "address": "一方天地",
              "reservation_status": 1
            }
          ]
        },
        {
          "teacher_id": 7,
          "teacher_name": "王老师",
          "list": [
            {
              "id": 7,
              "course_id": 1,
              "teacher_id": 7,
              "start_time": 1732520086,
              "end_time": 1732520086,
              "duration": 60,
              "course_number": 30,
              "reservation_number": 0,
              "teacher_name": "王老师",
              "teacher_desc": "从业20年，资深老教室",
              "course_name": "拳击初级课",
              "course_image": "../../static/logo2.jpg",
              "course_desc": "拳击讲解",
              "address": "一方天地",
              "reservation_status": 1
            }
          ]
        }
      ],
      shcedule_list: [],
      //排课列表
      teacher_desc: "",
      //当前老师的一个介绍
      course_name: "",
      //当前老师的名字
      course_image: "",
      //当前老师的图片
      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: ""
      //时间段结束时间
    };
  },
  onLoad(e) {
    let { orders_product_id, course_id } = e;
    this.orders_product_id = orders_product_id;
    this.course_id = course_id;
  },
  onShow() {
    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;
          this.defaultTeacherDesc();
          this.initOnload();
        }
      });
    }
  },
  methods: {
    //老师选择事件
    selectTeacher(index, item) {
      if (this.teacherActive == index)
        return;
      this.teacherActive = index;
      if (this.data.length > 0) {
        if (this.teacherActive == index) {
          this.shcedule_list = this.data[index]["list"];
          this.schedule_id = this.data[index].teacher_id;
          this.course_name = this.shcedule_list[0].course_name;
          this.teacher_desc = this.shcedule_list[0].teacher_desc;
          this.course_image = this.shcedule_list[0].course_image;
          this.initOnload();
        }
      }
    },
    //默认选项
    defaultTeacherDesc() {
      this.teacherActive = 0;
      if (this.data.length > 0) {
        this.schedule_id = this.data[0].teacher_id;
        this.shcedule_list = this.data[0]["list"];
        this.course_name = this.shcedule_list[0].course_name;
        this.teacher_desc = this.shcedule_list[0].teacher_desc;
        this.course_image = this.shcedule_list[0].course_image;
        console.log(this.shcedule_list);
      }
    },
    //预约课程事件
    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.timeActive < 0) {
        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") {
          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.isQuantum);
      console.log(this.timeArr);
      this.timeQuanBegin = this.timeQuanEnd = "";
      console.log(this.orderTimeArr);
      this.timeArr.forEach((item, index) => {
        if (this.isQuantum) {
          if (this.shcedule_list[index].reservation_status === 1) {
            item.disable = true;
          }
          this.appointTime.forEach((t) => {
            let [date, time] = t.split(" ");
            if (date == this.selectDate && item.begin == time) {
              item.disable = true;
            }
          });
        }
      });
      this.timeActive = -1;
    },
    // 日期选择事件
    selectDateEvent(index, item) {
      if (this.dateActive == index)
        return;
      this.dateActive = index;
      this.selectDate = item.date;
      this.initOnload();
    },
    // 时间选择事件
    selectTimeEvent(index, item) {
      if (item.disable)
        return;
      if (item.disableSum)
        return;
      if (this.isQuantum) {
        return this.handleSelectQuantum(index, item);
      }
    },
    handleSelectQuantum(index, item) {
      if (item.disable)
        return;
      this.timeActive = index;
      this.orderDateTime = {
        begin: `${this.selectDate} ${item.begin}`,
        end: `${this.selectDate} ${item.end}`
      };
    },
    handleSubmit() {
      this.appointTime.push(this.orderDateTime.begin);
      console.log(this.appointTime);
    },
    //字符串拼接
    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 date = /* @__PURE__ */ new Date();
      const now = date.getTime();
      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(isQuantum) {
      const time = [];
      this.shcedule_list.forEach((cruTiem) => {
        let starTimeStamp = cruTiem.start_time * 1e3;
        let endTimeStamp = cruTiem.end_time * 1e3;
        60 * 1e3 * cruTiem.duration;
        console.log(starTimeStamp, endTimeStamp);
        if (isQuantum) {
          time.push({
            begin: this.timeStamp(starTimeStamp, isQuantum).hour,
            end: this.timeStamp(endTimeStamp, isQuantum).hour,
            reservationSum: `${cruTiem.reservation_number}/${cruTiem.course_number}`,
            disable: false
          });
        }
      });
      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.begin),
        c: common_vendor.t(item.end),
        d: common_vendor.t(item.reservationSum),
        e: _index,
        f: item.disable ? 1 : "",
        g: ($props.isMultiple ? item.isActive : _index == $data.timeActive) ? 1 : "",
        h: $props.isMultiple ? item.isActive ? "#fff" : "#333" : _index == $data.timeActive ? "#fff" : "#333",
        i: $props.isMultiple ? item.isActive ? $props.selectedItemColor : "" : _index == $data.timeActive ? $props.selectedItemColor : "",
        j: common_vendor.o(($event) => $options.selectTimeEvent(_index, item), _index)
      };
    }),
    g: common_vendor.o(($event) => $options.reservationPopup()),
    h: common_vendor.t($data.orderDateTime.begin),
    i: common_vendor.o(($event) => $options.outcomeButton()),
    j: common_vendor.sr("outcomePopup", "46f39ab6-0"),
    k: common_vendor.p({
      ["is-mask-click"]: false
    })
  };
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createPage(MiniProgramPage);