mteacher/src/views/audition/CourseEvaluation.vue

<template>
  <div>
    <van-cell-group>
      <van-cell title="课程班名称" :value="classGroupName" />
    </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>
      <van-field
        required
        rows="4"
        class="textarea"
        :disabled="isReset"
        maxlength="255"
        v-model="homeWork"
        autosize
        label="布置作业"
        type="textarea"
        placeholder="请输入（1-255字）"
      />
    </van-cell-group>
    <van-cell-group>
      <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>
    <div class="button-group">
      <van-button type="primary" v-if="!reviewId" round size="large" @click="submitReview">提交评价</van-button>
      <van-button type="primary" v-if="reviewId" round size="large" @click="submitReview">修改评价</van-button>
    </div>
  </div>
</template>
<script>
import {
  getCourseInfoHead,
  courseReviewAdd,
  getReviewInfo,
  updateReviewInfo
} from "@/api/teacher";
import { browser } from "@/common/common";
import MHeader from "@/components/MHeader";
export default {
  name: "teacherList",
  data() {
    return {
      radio: 1,
      voice: 0,
      courseId: null,
      reviewId: null,
      classTimer: null,
      classGroupName: null,
      teachingMaterial: null, //教材
      song: null, // 曲目
      pronunciation: null, // 发音
      tempo: null, //节奏
      musicTheory: null, // 乐理
      memo: null, // 备注
      homeWork: null, // 作业
      hasLiaison: null,
      subjectNames: null,
      isReset: false,
      isInside: false
    };
  },
  created() {
    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() {
    // 获取头部信息
    if (this.reviewId) {
      // 获取老评价
      this.isReset = true;
      getReviewInfo({ id: this.reviewId }).then(res => {
        if (res.data.code == 200) {
          this.classTimer =
            res.data.data.teacherClassHeadInfo.classDate +
            res.data.data.teacherClassHeadInfo.startClassTime +
            "-" +
            res.data.data.teacherClassHeadInfo.endClassTime;
          this.subjectNames = res.data.data.teacherClassHeadInfo.subjectNames;
          this.classGroupName =
            res.data.data.teacherClassHeadInfo.classGroupName;

          // 评价内容
          this.teachingMaterial =
            res.data.data.courseScheduleReview.teachingMaterial;
          this.song = res.data.data.courseScheduleReview.song;
          this.pronunciation = res.data.data.courseScheduleReview.pronunciation;
          this.tempo = res.data.data.courseScheduleReview.tempo;
          this.musicTheory = res.data.data.courseScheduleReview.musicTheory;
          this.memo = res.data.data.courseScheduleReview.memo;
          this.homeWork = res.data.data.courseScheduleReview.homeWork;
          this.hasLiaison = res.data.data.courseScheduleReview.hasLiaison.toString();
        }
      });
    } else {
      getCourseInfoHead({ courseId: this.courseId }).then(res => {
        if (res.data.code == 200) {
          this.classTimer =
            res.data.data.classDate +
            res.data.data.startClassTime +
            "-" +
            res.data.data.endClassTime;
          this.subjectNames = res.data.data.subjectNames;
          this.classGroupName = res.data.data.classGroupName;
        }
      });
    }
  },
  methods: {
    submitReview() {
      if (!this.teachingMaterial) {
        this.$toast("请填写教材");
        return;
      }
      if (!this.song) {
        this.$toast("请填写曲目");
        return;
      }
      if (!this.pronunciation) {
        this.$toast("请给发音打分");
        return;
      }
      if (!this.tempo) {
        this.$toast("请给节奏打分");
        return;
      }
      if (!this.musicTheory) {
        this.$toast("请给乐理打分");
        return;
      }
      if (!this.memo) {
        this.$toast("请输入备注");
        return;
      }
      if (!this.homeWork) {
        this.$toast("请布置作业");
        return;
      }
      if (!this.hasLiaison) {
        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,
        courseScheduleId: this.courseId
      };
      if (this.reviewId) {
        obj.id = this.reviewId;
        updateReviewInfo(obj).then(res => {
          this.$toast("修改成功");
          setTimeout(res => {
            if (this.isInside) {
              this.$router.push({ 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);
          }
        });
      }
    },
    onAppBack() {
      if (browser().android) {
        DAYA.postMessage(JSON.stringify({ api: "back" }));
      } else if (browser().iPhone) {
        window.webkit.messageHandlers.DAYA.postMessage(
          JSON.stringify({ api: "back" })
        );
      }
    }
  }
};
</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;
  }
}

.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;
}
/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;
  /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;
  }
}
</style>