mteacher/src/views/audition/CourseEvaluation.vue

<template>
  <div style="overflow: hidden">
    <m-header v-if="headerStatus" />
    <div class="course-header">
      <div class="title-info">
        <span class="teachMode" v-if="teachMode">
          {{ teachMode == 'ONLINE' ? '线上' : null }}
          {{ teachMode == 'OFFLINE' ? '线下' : null }}
        </span>
        <span :class="['courseType', classType]">{{ classType | coursesType }}</span>
        <span style="font-size: .18rem; font-weight: 500; color: #333;line-height: 18px;vertical-align: middle;">{{ classGroupName }}</span>
      </div>
      <div class="title-time">
        {{ classTimer }}
      </div>
    </div>
    <van-cell-group>
      <div class="dot"></div>
       <!-- v-if="enableAssignHomework" -->
      <van-cell class="input" :is-link="!isAssignHomework ? true : false" title="课后训练" :value='isAssignHomework ? "已布置" : "未布置"' @click="onWork()"></van-cell>
    </van-cell-group>
    <van-cell-group>
       <div class="dot"></div>
      <van-field
        required
        rows="3"
        class="textarea"
        v-model="teachingMaterial"
        maxlength="255"
        autosize
        label="教材内容"
        type="textarea"
        placeholder="请输入本课程学习内容"
        show-word-limit
      />
    </van-cell-group>
    <van-cell-group>
       <div class="dot"></div>
      <van-field
        required
        rows="1"
        label="曲目"
        type="textarea"
        placeholder="请输入曲目名"
        class="textarea"
        v-model="song"
      />
    </van-cell-group>
    <!-- <van-cell-group >

    </van-cell-group> -->
    <!--   label="评价备注" -->
    <van-cell-group>
       <div class="dot"></div>
      <p class="evTitle">评价</p>

      <van-cell class="start">
        <template slot="title">
          <div class="title-item">
            <span class="text">发音</span>
            <van-rate
              v-model="pronunciation"
              :size="25"
              color="#F7B500"
              void-color="#eee"
              void-icon="star"
            />
          </div>
          <div class="title-item">
            <span class="text">节奏</span>
            <van-rate
              :size="25"
              color="#F7B500"
              void-color="#eee"
              v-model="tempo"
              void-icon="star"
            />
          </div>
          <div class="title-item">
            <span class="text">乐理</span>
            <van-rate
              :size="25"
              v-model="musicTheory"
              color="#F7B500"
              void-color="#eee"
              void-icon="star"
            />
          </div>
        </template>
      </van-cell>
      <van-field
        rows="3"
        required
        class="textarea"
        maxlength="255"
        v-model="memo"
        autosize
        type="textarea"
        placeholder="请输入本课程学习内容"
        show-word-limit
      />
    </van-cell-group>
    <van-cell-group v-if="classType != 'VIP'">
         <div class="dot"></div>
      <van-cell title="是否完成双向沟通" value-class="twoConnect" class="talk">
        <template slot="default">
          <van-radio-group required v-model="hasLiaison" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
    </van-cell-group>

    <div class="button-group">
      <van-button type="primary" round size="large" @click="submitReview">
        {{ !reviewId ? '提交评价' : '修改评价' }}
      </van-button>
    </div>

    <!-- <van-popup v-model="showWork">
      <van-icon class="closeable" @click="onClose" name="cross" />
      <div class="popup_container">
        <p class="content">
          评价成功<br />{{
            isAssignHomework
              ? "您课程所在周已经布置作业，是否继续布置?"
              : "是否布置作业？"
          }}
        </p>
        <div class="btn_group">
          <span @click="onClose">取消</span>
          <span @click="onWork(0)">布置作业</span>
        </div>
      </div>
    </van-popup> -->
  </div>
</template>
<script>
/* eslint-disable */
import {
  getCourseInfoHead,
  courseReviewAdd,
  getReviewInfo,
  updateReviewInfo,
  checkeIsAssignHomework
} from "@/api/teacher";
import { browser } from "@/common/common";
import MHeader from "@/components/MHeader";
export default {
  name: "teacherList",
  components: { MHeader },
  data() {
    return {
      headerStatus: true,
      // showWork: false, // 是否布置作业
      radio: 1,
      voice: 0,
      courseId: null,
      reviewId: null,
      classTimer: null,
      classGroupName: null,
      teachMode: null,
      classType: null, // 课程类型
      teachingMaterial: '', //教材
      song: null, // 曲目
      pronunciation: null, // 发音
      tempo: null, //节奏
      musicTheory: null, // 乐理
      memo: '', // 备注
      homeWork: null, // 作业
      hasLiaison: null,
      subjectNames: null,
      // isReset: false,
      isInside: false,
      isAssignHomework: 0, // 是否有布置作业,0 => 否 1 => 是
      enableAssignHomework: 0, // 是否要布置作业  0 否  1 是
      memberStatus: 0, // 是否有学生或者乐团是会员
    };
  },
  async mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    console.log(params)
    this.courseId = params.id;
    this.reviewId = parseInt(params.reviewId);
    this.isInside = params.isInside;
    if (!this.courseId) {
      this.$toast("课程信息错误");
    }
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }
    this.$toast.loading({
      message: "加载中...",
      duration: 10000,
      forbidClick: true,
      loadingType: "spinner",
    });
    await checkeIsAssignHomework({ courseScheduleId: this.courseId }).then((res) => {
      let result = res.data;
      if (result.code == 200) {
        let tempData = result.data || {}
        this.isAssignHomework = tempData.isAssignHomework;
        this.enableAssignHomework = tempData.enableAssignHomework;
        const memberNum = tempData.memberNum;
        const courseStudentNum = tempData.courseStudentNum;
        if(courseStudentNum == memberNum) {
          this.memberStatus = 1
        }
      } else {
        this.$toast(result.msg);
      }
    });

    // 获取头部信息
    if (this.reviewId) {
      // 获取老评价
      await getReviewInfo({ id: this.reviewId }).then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data;
          let teacherClassHeadInfo = result.teacherClassHeadInfo;
          this.classTimer =
            teacherClassHeadInfo.classDate +
            teacherClassHeadInfo.startClassTime +
            "-" +
            teacherClassHeadInfo.endClassTime;
          this.subjectNames = teacherClassHeadInfo.subjectNames;
          this.classGroupName = teacherClassHeadInfo.classGroupName;
          this.teachMode = teacherClassHeadInfo.teachMode
          this.classType = teacherClassHeadInfo.courseScheduleType;

          // 评价内容
          let courseScheduleReview = result.courseScheduleReview;
          this.teachingMaterial = courseScheduleReview.teachingMaterial;
          this.song = courseScheduleReview.song;
          this.pronunciation = courseScheduleReview.pronunciation;
          this.tempo = courseScheduleReview.tempo;
          this.musicTheory = courseScheduleReview.musicTheory;
          this.memo = courseScheduleReview.memo;
          this.homeWork = courseScheduleReview.homeWork;
          this.hasLiaison = courseScheduleReview.hasLiaison.toString();
        }
      });
    } else {
      await getCourseInfoHead({ courseId: this.courseId }).then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data;
          this.classTimer =
            result.classDate +
            result.startClassTime +
            "-" +
            result.endClassTime;
          this.subjectNames = result.subjectNames;
          this.classGroupName = result.classGroupName;
          this.teachMode = result.teachMode
          this.classType = result.courseScheduleType;
        }
      });

      // 只有添加的时候才会有缓存数据
      let courseEvaluationObj = sessionStorage.getItem('courseEvaluationObj')
      courseEvaluationObj = courseEvaluationObj ? JSON.parse(courseEvaluationObj) : null
      sessionStorage.removeItem('courseEvaluationObj')
      if(courseEvaluationObj) {
        this.teachingMaterial = courseEvaluationObj.teachingMaterial
        this.song = courseEvaluationObj.song
        this.pronunciation = courseEvaluationObj.pronunciation
        this.tempo = courseEvaluationObj.tempo
        this.musicTheory = courseEvaluationObj.musicTheory
        this.memo = courseEvaluationObj.memo
        this.hasLiaison = courseEvaluationObj.hasLiaison
        this.courseId = courseEvaluationObj.courseScheduleId
      }
    }
    this.$toast.clear();
  },
  methods: {
    submitReview() {
      if(!this.isAssignHomework && this.enableAssignHomework) {
        this.$toast('请布置课后训练')
        return
      }
      if (!this.teachingMaterial) {
        this.$toast("请填写教材");
        return;
      }
      if (!this.song) {
        this.$toast("请填写曲目");
        return;
      }
      if (!this.memo) {
        this.$toast("请输入本课程学习内容");
        return;
      }
      // VIP课程是没有双向沟通的
      if (!this.hasLiaison && this.classType != "VIP") {
        this.$toast("请勾选双向沟通");
        return;
      }
      let obj = {
        teachingMaterial: this.teachingMaterial, //教材
        song: this.song, // 曲目
        pronunciation: this.pronunciation, // 发音
        tempo: this.tempo, //节奏
        musicTheory: this.musicTheory, // 乐理
        memo: this.memo, // 备注
        hasLiaison: this.hasLiaison,
        courseScheduleId: this.courseId,
      };
      if (this.reviewId) {
        obj.id = this.reviewId;
        updateReviewInfo(obj).then((res) => {
          this.$toast("修改成功");
          setTimeout((res) => {
            if (this.isInside) {
              this.$router.replace({ path: "/manageEvaluation" });
            } else {
              this.onAppBack();
            }
          }, 1000);
        });
      } else {
        courseReviewAdd(obj).then((res) => {
          if (res.data.code == 200) {
            this.$toast("提交成功");
            setTimeout((res) => {
              if (this.isInside) {
                this.$router.push({ path: "/manageEvaluation" });
              } else {
                this.onAppBack();
              }
            }, 1000);
          } else {
            this.$toast(res.data.msg)
          }
        });
      }
    },
    onWork() {
      const obj = {
        teachingMaterial: this.teachingMaterial, //教材
        song: this.song, // 曲目
        pronunciation: this.pronunciation, // 发音
        tempo: this.tempo, //节奏
        musicTheory: this.musicTheory, // 乐理
        memo: this.memo, // 备注
        hasLiaison: this.hasLiaison,
        handHomework: this.handHomework,
        courseScheduleId: this.courseId,
      }
      if(this.isAssignHomework == 1) {
        return
      }
      sessionStorage.setItem('courseEvaluationObj', JSON.stringify(obj))
      this.$router.push({
        path: "/arrangeWork",
        query: {
          courseId: this.courseId,
          memberNum: this.memberStatus,
          classGroupName: this.classGroupName,
          ...this.$route.query
        },
      });
      // if (this.enableAssignHomework == 1) {
      //   this.$dialog
      //     .confirm({
      //       message: "您课程所在周已经布置作业，是否继续布置?",
      //       confirmButtonText: "布置作业",
      //       confirmButtonColor: '#01C1B5'
      //     })
      //     .then(() => {
      //       // on confirm
      //       sessionStorage.setItem('courseEvaluationObj', JSON.stringify(obj))
      //       this.$router.push({
      //         path: "/arrangeWork",
      //         query: {
      //           courseId: this.courseId,
      //           memberNum: this.memberStatus,
      //           classGroupName: this.classGroupName,
      //           ...this.$route.query
      //         }
      //       });
      //     })
      //     .catch(() => {
      //       // on cancel
      //     });
      // } else {
      //   sessionStorage.setItem('courseEvaluationObj', JSON.stringify(obj))
      //   this.$router.push({
      //     path: "/arrangeWork",
      //     query: {
      //       courseId: this.courseId,
      //       memberNum: this.memberStatus,
      //       classGroupName: this.classGroupName,
      //       ...this.$route.query
      //     },
      //   });
      // }
    },
    onClose() {
      // 关闭弹窗
      if (this.isInside) {
        this.$router.replace({ path: "/manageEvaluation" });
      } else {
        this.onAppBack();
      }
    },
    onAppBack() {
      if (browser().android) {
        DAYA.postMessage(JSON.stringify({ api: "back" }));
      } else if (browser().iPhone) {
        window.webkit.messageHandlers.DAYA.postMessage(
          JSON.stringify({ api: "back" })
        );
      }
    },
  },
  destroyed() {
    this.$toast.clear();
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

/deep/.van-cell-group {
  margin-top: 0.1rem;
}
/deep/.van-cell {
  padding: 16px 16px;
  font-size: 16px;
  line-height: 0.24rem;
}

.title-item {
  display: flex;
  padding: 0.05rem 0;
  .text {
    margin-right: 0.15rem;
    font-size: 16px;
    color: #1a1a1a;
  }
  /deep/.van-rate {
    line-height: 0;
  }
}

/deep/.van-cell__title {
  font-size: 16px;
  color: #1a1a1a;
  flex: auto 1;
  width: 1.2rem;
}
/deep/.van-field__control,
/deep/.van-cell__value {
  font-size: 16px;
  color: #1A1A1A !important;
  width: 70%;
  flex: auto;
}
.textarea {
  flex-direction: column;
  padding:16px .21rem;
  /deep/.van-cell__value {
    margin-top: 0.1rem;
    width: 100%;
  }
}
.input {
  padding:16px .21rem;
}
.twoConnect {
  width: 55%;
}
/deep/.van-radio-group {
  display: flex;
  justify-content: flex-end;
  height: 0.24rem;
  /deep/.van-radio {
    margin-left: 0.18rem;
  }
}
/deep/.van-radio__icon .van-icon {
  border-color:#d3d3d3;
}
/deep/.van-radio__icon--checked {
  .van-icon {
    border-color: @mColor;
    background: @mColor;
  }
}
.button-group {
  margin: 0.3rem .16rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
    height: 0.5rem;
    line-height: 0.48rem;
  }
  &.btn-operation {
    margin: 0.3rem .16rem 0.2rem;
    display: flex;
    justify-content: space-around;
    button {
      width: 48%;
    }
  }
  .btn-plain {
    color:  @mColor;
    background: #f3f4f8;
    width: 3.2rem;
  }
}

.course-header {
  margin-top: .1rem;
  background: #fff;
  padding: 16px 0.21rem 16px .12rem;
  .title-info {
    padding-bottom: 10px;
  }
  .title-time {
    color: #a1a1a1;
  }
}

.van-popup {
  width: 90%;
  border-radius: 0.05rem;
}
/deep/.van-popup__close-icon {
  color: #888;
  font-size: 24px;
}
.closeable {
  font-size: 24px;
  color: #888;
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
}
.popup_container {
  .content {
    text-align: center;
    font-size: 0.15rem;
    color: #000;
    padding-top: 0.5rem;
    padding-bottom: 0.35rem;
  }
  .btn_group {
    font-size: 0.14rem;
    color: #009688;
    padding: 0.03rem 0.25rem 0.2rem;
    display: flex;
    justify-content: space-between;
    span {
      width: 0.8rem;
      text-align: center;
    }
  }
}
.start.van-cell {
   padding:16px .21rem 0;
  &:not(:last-child) {
    &:after {
      border-bottom: 1px solid transparent
    }
  }
}
.talk {
  padding:16px .21rem;
}
.evTitle {
  padding: 16px .21rem 0;
  color: #333;
  font-weight: 500;
}
.dot {
  width: 4px;
  height: 0.17rem;
  background: #01c1b5;
  border-radius: 3px;
  position: absolute;
  z-index: 98;
  top: 19px;
  left: 0.12rem;
}
.van-cell--required{
  &:before {
    color:transparent;
  }
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #777 !important;
  font-size: .14rem;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #777 !important;
  font-size: .14rem;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #777 !important;
  font-size: .14rem;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #777 !important;
  font-size: .14rem;
}

.teachMode {
    background: #F2FFFC;
    border-radius: .03rem;
    border: 1px solid #01C1B5;
    font-size: 12px;
    color: #01C1B5;
    display: inline-block;
    // height: 16px;
    line-height: 16px;
    padding: 0 5px;
}
</style>