mteacher/src/views/teacher/PeriodChange.vue

<template>
  <div class="periodchange">
    <div :class="[dataShow ? 'container' : '']">
      <!-- <m-header /> -->
      <m-calendar
        @onSelectDay="onSelectDay"
        :dayList="getMonthDay"
        @onChangeMonth="onChangeMonth"
      />

      <van-radio-group v-if="dataShow" key="data" v-model="radioSelect" class="cellList">
        <van-cell-group v-for="(item, index) in dataList" :key="index">
          <van-cell @click="onCheckRadio(item)" class="titleCell">
            <template slot="default">
              <div class="signImgBox">
                <img
                  class="signImg"
                  :src="getSignInIcon(item.isSignIn)"
                  alt=""
                />
              </div>
            </template>
            <template slot="title">
              <div class="classTitleWrap" style="word-break: break-all">
                <img
                  class="teacherModelImg"
                  :src="getTeacherImg(item.teachMode)"
                  alt=""
                />
                <img class="courseImg" :src="squrtList.squrt2" alt="" />
                {{ item.name }}
              </div>

              <!--  -->
            </template>
          </van-cell>
          <van-cell>
            <template slot="title">
              <p
                class="studentTitle"
                style="word-break: break-all"
                v-if="item.schoolName"
              >
                上课地点 : &nbsp;{{ item.schoolName }}
              </p>
              <p class="studentTitle" style="word-break: break-all">
                上课学生 : &nbsp;{{ item.studentNames }}
              </p>
            </template>
          </van-cell>
          <van-cell
            class="input-cell"
            title-class="title-content"
            value-class="value-content"
            :center="true"
            @click="onCheckRadio(item)"
          >
            <template slot="title">
              <div class="chioseWrap">
                <img class="clockIcon" :src="squrtList.squrt8" alt="" />
                <p class="timer">
                  {{ item.startClassTime | formatDate }}-{{
                    item.endClassTime | formatDate
                  }}
                </p>
              </div>
            </template>
            <template slot="default">
              <van-radio
                ref="radioes"
                :disabled="radioDisabled"
                :name="item.id"
              ></van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <m-empty v-else key="data" />
    </div>
    <van-sticky v-if="dataShow">
      <div class="button-group">
        <van-button type="primary" @click="onChangeClass" size="large"
          >确认交换</van-button
        >
      </div>
    </van-sticky>
  </div>
</template>
<script>
/* eslint-disable */
// import MHeader from '@/components/MHeader'
import MCalendar from "@/components/MCalendar";
import MEmpty from "@/components/MEmpty";
import dayjs from "dayjs";
import { browser } from "@/common/common";
import {
  getCourseSchedulesWithDate,
  getCourseScheduleDateByMonth,
  courseSwap,
} from "@/api/teacher";
import setLoading from "@/utils/loading";
export default {
  name: "periodchange",
  components: { MCalendar, MEmpty },
  data() {
    return {
      dataShow: true,
      dataList: [],
      radioSelect: null,
      radioSelectList: [], // 选中的列表
      radioDisabled: true, // 今天或今天之前的数据禁用
      getMonthDay: [],
      squrtList: {
        squrt2: require("@/assets/images/squrt2.png"),
        squrt3: require("@/assets/images/squrt3.png"),
        squrt4: require("@/assets/images/squrt4.png"),
        squrt5: require("@/assets/images/squrt5.png"),
        squrt6: require("@/assets/images/squrt6.png"),
        squrt7: require("@/assets/images/squrt7.png"),
        squrt8: require("@/assets/images/squrt8.png"),
      },
    };
  },
  created() {
    // let toDay = this.getFormartDate(new Date())
    // this.getCourseDate(toDay)
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    document.title = "课程交换";
    let toDay = this.getFormartDate(new Date());
    this.getCourseMonth(toDay);
    this.getCourseDate(toDay);
  },
  methods: {
    onSelectDay(value) {
      if (
        new Date(this.getFormartDate(new Date())) >=
        new Date(this.getFormartDate(value))
      ) {
        this.radioDisabled = true;
      } else {
        this.radioDisabled = false;
      }
      this.getCourseDate(this.getFormartDate(value));
    },
    onChangeMonth(value) {
      this.getCourseMonth(dayjs(value).format("YYYY-MM-DD"));
    },
    async getCourseMonth(month) {
      setLoading(true);
      try {
        await getCourseScheduleDateByMonth({ month: month, type: "VIP" }).then(
          (res) => {
            let result = res.data;
            if (result.code == 200) {
              this.getMonthDay = [];
              result.data.forEach((item) => {
                this.getMonthDay.push(dayjs(item).format("DD"));
              });
              this.isCalendar = true;
            }
          }
        );
        setLoading(false);
      } catch (err) {
        setLoading(false);
      }
    },
    onCheckRadio(item) {
      // 单选按钮选中
      if (this.radioDisabled) return;
      this.radioSelect = item.id;
      this.radioSelectList = item;
    },
    async getCourseDate(date) {
      setLoading(true);
      try {
        await getCourseSchedulesWithDate({ date: date, type: "VIP" }).then(
          (res) => {
            let result = res.data;
            if (result.code == 200 && result.data) {
              this.dataList = result.data.rows;
              this.dataShow = result.data.rows.length > 0 ? true : false;
            }
          }
        );
        setLoading(false);
      } catch (err) {
        setLoading(false);
      }
    },
    getFormartDate(date) {
      let checkDate = new Date(date);
      let checkDay =
        checkDate.getFullYear() +
        "-" +
        (checkDate.getMonth() + 1) +
        "-" +
        checkDate.getDate();
      return checkDay;
    },
    onChangeClass() {
      let item = this.radioSelectList,
        params = this.$route.query,
        classTime = item.classDate.split(" ")[0],
        startTime = item.startClassTime.split(" ")[1];
      let firstClass =
        params.classDate +
        " " +
        params.name +
        " " +
        params.startTime +
        "<br/>与";
      let lastClass =
        classTime + " " + item.name + " " + startTime + "<br/>上课时间互换";
      this.$dialog
        .confirm({
          message: firstClass + lastClass,
        })
        .then(() => {
          courseSwap({
            courseScheduleId1: params.checkId,
            courseScheduleId2: item.id,
          }).then((res) => {
            let result = res.data;
            if (result.code == 200) {
              this.$toast("交换成功");
              setTimeout(() => {
                if (browser().iPhone) {
                  window.webkit.messageHandlers.DAYA.postMessage(
                    JSON.stringify({ api: "back" })
                  );
                } else if (browser().android) {
                  DAYA.postMessage(JSON.stringify({ api: "back" }));
                } else {
                  this.$router.push("/business");
                }
              }, 500);
            } else {
              this.$toast(result.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    getSignInIcon(status) {
      if (status == 1) {
        return this.squrtList.squrt3;
      } else if (status == 0) {
        return this.squrtList.squrt5;
      } else {
        return this.squrtList.squrt4;
      }
    },
    getTeacherImg(mode) {
      if (mode == "ONLINE") {
        return this.squrtList.squrt6;
      } else {
        return this.squrtList.squrt7;
      }
    },
  },
};
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.periodchange {
  // height: 100vh;
  // position: relative;
  // .container {
  //     // height: 100%;
  //     height: calc(100vh - 50px);
  //     overflow-y: auto;
  //     overflow-x: hidden;
  // }

  // .button-group {
  //     width: 100%;
  //     // position: absolute;
  //     // bottom: 0;
  //     // left: 0;
  //     // z-index: 99;
  //     .van-button--primary {
  //         background: @mColor;
  //         border: @mColor;
  //     }
  // }

  min-height: 100vh;
//   height: 100vh;
  position: relative;
  background-color: #f3f4f8;
  .container {
    min-height: calc(100vh - 0.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }
  .button-group {
    width: 100%;
    // position: absolute;
    // bottom: 0;
    // left: 0;
    // z-index: 99;
    .van-button {
      font-size: 0.16rem;
      width: 100%;
      height: 0.5rem;
      line-height: 0.48rem;
    }
    .van-button--primary {
      background: @mColor;
      border-color: @mColor;
    }
  }
}
/deep/.van-cell {
  line-height: inherit;
}
/deep/.van-cell__title {
  font-size: 0.16rem;
  color: @mFontColor;
}
/deep/.van-cell-group {
  margin-top: 0.05rem;
  border-radius: 0.1rem;
  margin: 0.1rem 0.12rem 0;
  overflow: hidden;
}
.title-content {
  font-weight: bold;
  .van-cell__label {
    font-weight: 400;
    margin-top: 0.06rem;
    display: flex;
    align-items: center;
  }
  .van-icon-location {
    margin-right: 0.05rem;
  }
}
/deep/.van-cell__value,
/deep/.van-cell__label {
  color: @tFontColor;
  span {
    padding-right: 0.1rem;
  }
}

.input-cell {
  padding: 0.12rem 0.16rem 0.2rem;
  .van-radio {
    justify-content: flex-end;
  }
}
/deep/.van-radio__icon .van-icon {
  border-color: @sFontColor;
}
/deep/.van-radio__icon--checked .van-icon {
  background: @mColor;
  border-color: @mColor;
}
/deep/.icon {
  margin-top: 0.2rem;
}

.signImgBox {
  .signImg {
    margin-top: 0.04rem;
    width: 0.48rem;
    height: 0.22rem;
  }
}
.teacherModelImg {
  width: 0.35rem;
  height: 0.2rem;
  margin-right: 0.05rem;
  position: absolute;
  left: 0;
  top: 0.04rem;
}
.courseImg {
  width: 0.42rem;
  height: 0.18rem;
  position: absolute;
  left: 0.4rem;
  top: 0.05rem;
}
.classTitleWrap {
  position: relative;
  text-indent: 0.88rem;
  line-height: 0.28rem;
  // align-items: center;
}
.titleCell {
  padding-bottom: 0 !important;
  &:after {
    border-bottom: none;
  }
}

.chioseWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  img {
    position: relative;
    top: -0.02rem;
    margin-right: 0.08rem;
  }
}
.cellList {
    margin-bottom: 20px;
}
</style>