mteacher/src/views/audition/CourseEvaluation.vue

<template>
  <div>
    <m-header v-if="headerStatus" />
    <van-cell-group>
      <van-cell title="课程班名称" :value="classGroupName" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="课程类型" >
        <template #default>
          {{ classType | coursesType }}
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="上课时间" :value="classTimer" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="乐器" :value="subjectNames" />
    </van-cell-group>
    <van-cell-group>
      <van-field
        required
        rows="4"
        class="textarea"
        v-model="teachingMaterial"
        maxlength="255"
        autosize
        label=" 教材内容"
        type="textarea"
        placeholder="请输入（1-255字）"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field required label="曲目" input-align="right" placeholder="请输入曲目名" v-model="song" />
    </van-cell-group>
    <van-cell-group>
      <van-cell>
        <template slot="title">
          <div class="title-item">
            <span class="text">发音</span>
            <van-rate v-model="pronunciation" :size="25" void-color="#eee" void-icon="star" />
          </div>
          <div class="title-item">
            <span class="text">节奏</span>
            <van-rate :size="25" 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" void-color="#eee" void-icon="star" />
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-field
        rows="4"
        required
        class="textarea"
        maxlength="255"
        v-model="memo"
        autosize
        label="评价备注"
        type="textarea"
        placeholder="请输入（1-255字）"
      />
    </van-cell-group>
    <!-- <van-cell-group v-if="!isReset || (isReset && homeWork)">
      <van-field
        rows="4"
        class="textarea"
        :disabled="isReset"
        maxlength="255"
        v-model="homeWork"
        autosize
        label="布置作业"
        type="textarea"
        placeholder="请输入（1-255字）"
      />
    </van-cell-group> -->
    <van-cell-group v-if="classType != 'VIP'">
      <van-cell title="是否完成双向沟通" value-class="twoConnect">
        <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>
<!--
    <van-cell-group v-if="isReset">
      <van-cell title="是否完成作业" value-class="twoConnect">
        <template slot="default">
          <van-radio-group required v-model="handHomework" 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" v-if="!reviewId">
      <van-button type="primary"  round size="large" @click="submitReview">提交评价</van-button>
    </div>
    <div class="button-group btn-operation" v-if="reviewId">
      <van-button type="primary" :disabled="homeWork?true: false" round @click="onWork(isAssignHomework)">{{ homeWork ? '已布置作业' : '布置作业' }}</van-button>
      <van-button type="primary" round class="btn-plain" @click="submitReview">修改评价</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,
      classType: null, // 课程类型
      teachingMaterial: null, //教材
      song: null, // 曲目
      pronunciation: null, // 发音
      tempo: null, //节奏
      musicTheory: null, // 乐理
      memo: null, // 备注
      homeWork: null, // 作业
      handHomework: null, // 是否完成作业
      hasLiaison: null,
      subjectNames: null,
      // isReset: false,
      isInside: false,
      isAssignHomework: 0, // 是否有布置作业,0 => 否 1 => 是
    };
  },
  created() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    this.courseId = this.$route.query.id;
    this.reviewId = parseInt(this.$route.query.reviewId);
    this.isInside = this.$route.query.isInside;
    if (!this.courseId) {
      this.$toast("课程信息错误");
    }
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    if(browser().android || browser().iPhone) {
      this.headerStatus = false
    }
    // 获取头部信息
    if (this.reviewId) {
      // 获取老评价
      this.$toast.loading({
        message: '加载中...',
        duration: 10000,
        forbidClick: true,
        loadingType: 'spinner',
      })
      getReviewInfo({ id: this.reviewId }).then(res => {
        this.$toast.clear()
        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.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();
          this.handHomework = courseScheduleReview.handHomework.toString();
        }
      });
    } else {
      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.classType = result.courseScheduleType
        }
      });
    }
    checkeIsAssignHomework({ courseScheduleId: this.courseId }).then(res => {
      let result = res.data
      if(result.code == 200) {
        this.isAssignHomework = result.data.isAssignHomework
      } else {
        this.$toast(result.msg)
      }
    })
  },
  methods: {
    submitReview() {
      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, // 备注
        // homeWork: this.homeWork,
        hasLiaison: this.hasLiaison,
        handHomework: this.handHomework,
        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("提交成功");
            this.showWork = true
            // setTimeout(res => {
            //   if (this.isInside) {
            //     this.$router.push({ path: "/manageEvaluation" });
            //   } else {
            //     this.onAppBack();
            //   }
            // }, 1000);
          }
        });
      }
    },
    onWork(isAssignHomework) {
      if(isAssignHomework == 1) {
        this.$dialog.confirm({
          message: '您课程所在周已经布置作业，是否继续布置?',
          confirmButtonText: '布置作业'
        })
        .then(() => {
          // on confirm
          this.$router.replace({
            path: '/arrangeWork',
            query: {
              courseId: this.courseId
            }
          })
        })
        .catch(() => {
          // on cancel
        })
      } else {
        this.$router.replace({
          path: '/arrangeWork',
          query: {
            courseId: this.courseId
          }
        })
      }
    },
    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.15rem;
  /deep/.van-cell {
    padding: 0.14rem 0.16rem;
    font-size: .17rem;
    line-height: .24rem;
  }
}

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

/deep/.van-cell__title {
  font-size: 0.17rem;
  color: #1a1a1a;
  flex: auto 1;
  width: 1.2rem;
}
/deep/.van-field__control,
/deep/.van-cell__value {
  font-size: 0.17rem;
  color: #666;
  width: 70%;
  flex: auto;
}
.textarea {
  flex-direction: column;
  /deep/.van-cell__value {
    margin-top: 0.1rem;
    width: 100%;
  }
}
.twoConnect {
  width: 55%;
}
/deep/.van-radio-group {
  display: flex;
  justify-content: flex-end;
  height: .24rem;
  /deep/.van-radio {
    margin-left: 0.18rem;
  }
}
/deep/.van-radio__icon .van-icon {
  border-color: @sFontColor;
}
/deep/.van-radio__icon--checked {
  .van-icon {
    border-color: #14928a;
    background: #14928a;
  }
}
.button-group {
  margin: 0.3rem 0.26rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
    height: .5rem;
    line-height: .48rem;
  }
  &.btn-operation {
    margin: 0.3rem 0.16rem 0.2rem;
    display: flex;
    justify-content: space-between;
    button {
      width: 48%;
    }
  }
  .btn-plain {
    color: #14928A;
    background: #F3F4F8;
  }
}

.van-popup {
  width: 90%;
  border-radius: .05rem;
}
/deep/.van-popup__close-icon {
  color: #888;
  font-size: 24px;
}
.closeable {
  font-size: 24px;
  color: #888;
  position: absolute;
  right: .1rem;
  top: .1rem;
}
.popup_container {
  .content {
    text-align: center;
    font-size: .15rem;
    color: #000;
    padding-top: .5rem;
    padding-bottom: .35rem;
  }
  .btn_group {
    font-size: .14rem;
    color: #009688;
    padding: .03rem .25rem .2rem;
    display: flex;
    justify-content: space-between;
    span {
      width: .8rem;
      text-align: center;
    }
  }
}


</style>