pbl-app/src/views/course/components/commentPanel.vue

<template>
  <div class="cp-container" v-if="panelVisible">
    <div class="cp-title">
      <span class="back" @click="back"></span>
      <span class="title">评课</span>
      <span class="btn" v-if="type == 1" @click="addPz(type)">提交</span>
    </div>
    <div class="cp-box">
      <div class="type-nav">
        <div class="type-nav-box" :class="{ active: type == 1 }" @click="setType(1)">
          <img src="@/assets/images/course/text.png" />
        </div>
        <div class="type-nav-box" :class="{ active: type == 2 }" @click="setType(2)">
          <img src="@/assets/images/course/audio.png" />
        </div>
      </div>
      <div class="cp-conent" v-if="type == 1">
        <van-field v-model="message" rows="20" autosize type="textarea" placeholder="请输入..." />
        <div style="margin: 0 10px;margin-top: 10px;">
          <image-component @getImage="getImage" :imgList.sync="imgList"></image-component>
        </div>
      </div>
      <div class="cp-audio" v-if="type == 2">
        <audio-component @addPz="addPz"></audio-component>
      </div>
    </div>
  </div>
</template>

<script>
import ImageComponent from './ImageComponent.vue'
import AudioComponent from './AudioComponent.vue'
import { addPz2 } from '@/api/course'
import { mapGetters } from 'vuex'

export default {
  props: {
    panelVisible: {
      type: Boolean
    },
    courseid: {
      type: String,
      default: ''
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    }
  },
  components: {
    AudioComponent,
    ImageComponent
  },
  data() {
    return {
      type: 1,
      message: '',
      imgList: []
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    back() {
      this.$emit('setPanelVisible', false)
    },
    setType(type) {
      this.type = type
    },
    getImage(imgList) {
      this.imgList = imgList
      this.$forceUpdate()
    },
    addPz(type, content) {
      var a = ''
      if (type === 1 && this.message === '' && !this.imgList.length) {
        this.$toast({ message: '批注不能为空！', type: 'fail' })
        return
      }
      if (type === 1 && (this.message !== '' || this.imgList.length)) {
        var img = ''
        for (var i = 0; i < this.imgList.length; i++) {
          img += "<img src='" + this.imgList[i] + "' />"
        }
        a = this.message.replaceAll(/%/g, '%25') + img
      }
      const params = [
        {
          cid: this.courseid,
          uid: this.userinfo.userid,
          s: this.courseType,
          t: this.taskCount,
          c: type === 1 ? a : content,
          type: type
        }
      ]

      addPz2(params)
        .then(res => {
          this.$toast({
            message: '添加成功',
            type: 'success'
          })
          this.imgList = []
          this.message = ''
          this.$emit('setPanelVisible', false)
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.cp-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  background: #fff;
  z-index: 2;
  .cp-title {
    height: 1.5rem;
    width: 100%;
    border-bottom: 1px solid #cecece;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    .back {
      width: 0.3rem;
      height: 0.3rem;
      border-top: 2px solid #000000;
      border-left: 2px solid #000000;
      position: absolute;
      transform: rotate(-45deg) translateY(-50%);
      top: 47%;
      left: 0.8rem;
      cursor: pointer;
    }
    .title {
      font-size: 16px;
    }
    .btn {
      font-size: 14px;
      transform: translateY(-50%);
      top: 50%;
      right: 0.8rem;
      position: absolute;
      color: #2274ff;
      cursor: pointer;
    }
  }
  .cp-box {
    width: 100%;
    height: calc(100% - 1.5rem);
    .type-nav {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 0.3rem;
      box-sizing: border-box;

      .type-nav-box {
        height: 100%;
        opacity: 0.5;
        transition: all 0.5s;

        + .type-nav-box {
          margin-left: 0.3rem;
        }

        &.active {
          opacity: 1;
        }
        > img {
          height: 100%;
        }
      }
    }
    .cp-conent {
      height: calc(100% - 60px);
      overflow: auto;
      font-size: 14px;
      width: 100%;
      /deep/ .van-field__control {
        height: 399px !important;
      }
    }
    .cp-audio {
      height: calc(100% - 60px);
      position: relative;
      width: 100%;
    }
  }
}
</style>