eep_page/src/views/book/courseware/preview/components/article/components/Freewrite.vue

<!--  -->
<template>
  <div class="freewrite">
    <div class="strockred" :class="wordNum ? '' : 'strockred_single'">
      <div :class="wordNum ? 'character-target-div_more' : 'character-target-div_single'" class="character-target-div">
        <FreeWriteQP
          id="esign"
          ref="esign"
          :bg-color.sync="bgColor"
          :height="height"
          :is-crop="isCrop"
          :line-color="lineColor"
          :line-width="lineWidth"
          :width="width"
          class="vueEsign"
        />
      </div>
    </div>

    <div class="imgsave">
      <div class="image">
        <div
          v-for="(item, i) in imgarr"
          :key="'img' + i"
          :class="['character-target-div', i == imgIndex ? 'select' : '']"
          @click="play(i)"
        >
          <img class="img" :src="item.strokes_image_url" alt="" />
        </div>
      </div>

      <div v-if="TaskModel != 'ANSWER'" style="display: flex">
        <div v-if="imgarr.length > 0" class="xj" style="margin-right: 8px" @click="removeImage">
          <img src="@/assets/word-remove.png" alt="" />
        </div>
        <!--
                  @mouseover="saveShow = true"
          @mouseout="saveShow = false"
         -->
        <div :class="['xj', saveShow ? 'click' : '']">
          <img
            :src="saveShow ? require('@/assets/xj-xz.png') : require('@/assets/xj.png')"
            alt=""
            @click="handleGenerate"
          />
        </div>
      </div>
    </div>
    <div v-if="isNotice" class="record-notice">最多保存5条记录</div>
  </div>
</template>

<script>
import vueEsign from 'vue-esign';
import FreeWriteQP from './FreeWriteQP.vue';
import { LearnWebSI } from '@/api/app';
export default {
  components: {
    FreeWriteQP,
    vueEsign,
  },
  props: ['lineColor', 'lineWidth', 'cur', 'wordNum', 'currentTreeID', 'TaskModel', 'writeList'],
  data() {
    return {
      width: this.wordNum != '2' ? 256 : 256,
      height: 256,
      bgColor: '',
      isCrop: false,
      history: [],
      imgarr: [],
      imgIndex: null,
      saveShow: false,
      tabIndex: 0,
      hasPlay: false,
      isNotice: false,
    };
  },
  computed: {},
  watch: {
    lineColor(newVal, oldVal) {
      this.updateColor(newVal);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getImgList();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getImgList(tabIndex) {
      this.tabIndex = tabIndex;
      this.imgarr = [];
      let MethodName = 'teaching-practice_manager-GetMyHZHandwrittenRecordList';
      let hz = this.tabIndex == 0 ? this.cur.stem[0].con : this.cur.stem[0].TChinese;
      let data = {
        courseware_id: this.currentTreeID,
        hz,
        search_scope: 1,
        count_limit: 5,
      };
      LearnWebSI(MethodName, data).then((res) => {
        let imgarr = res.hz_handwritten_record_list;
        this.imgarr = imgarr.map((item) => {
          item.history = JSON.parse(item.strokes_content);
          return item;
        });
      });
    },
    getStuImgList(tabIndex) {
      this.tabIndex = tabIndex;
      this.imgarr = [];
      let hz = this.tabIndex == 0 ? this.cur.stem[0].con : this.cur.stem[0].TChinese;
      let imgarr = JSON.parse(JSON.stringify(this.writeList));
      this.imgarr = imgarr[hz].map((item) => {
        item.history = JSON.parse(item.strokes_content);
        return item;
      });
    },
    removeImage() {
      if (this.hasPlay) {
        this.$message.warning('正在播放，不能删除');
        return;
      }
      if (this.imgIndex === null) return;
      let MethodName = 'teaching-practice_manager-DeleteMyHZHandwrittenRecord';
      let data = {
        hz_handwritten_record_id: this.imgarr[this.imgIndex].hz_handwritten_record_id,
      };
      LearnWebSI(MethodName, data).then((res) => {
        this.$message.success('删除成功');
        this.imgarr.splice(this.imgIndex, 1);
        this.handelReset();
      });
    },
    play(index) {
      if (this.hasPlay) {
        this.$message.warning('请等待播放完成');
        return;
      }
      this.$refs.esign.reset();
      this.hasPlay = true;
      this.imgIndex = index;
      let c = document.getElementById('esign');
      let cxt = document.getElementById('esign').getContext('2d');
      cxt.clearRect(0, 0, c.width, c.height);
      let history = this.imgarr[index].history;
      const len = history.length;
      let i = 0;
      const runner = () => {
        i++;
        if (i < len) {
          this.$refs.esign.draw(null, history[i][0], history[i][1]);
          requestAnimationFrame(runner);
        } else {
          console.log('播放完成');
          this.hasPlay = false;
        }
      };
      requestAnimationFrame(runner);
    },
    handelReset() {
      this.$refs.esign.reset();
      this.imgIndex = null;
    },
    handleGenerate() {
      let _this = this;

      if (_this.imgarr.length >= 5) {
        _this.isNotice = true;
        setTimeout(() => {
          _this.isNotice = false;
        }, 2000);
        return;
      }
      this.saveShow = true;
      let hz = this.tabIndex == 0 ? this.cur.stem[0].con : this.cur.stem[0].TChinese;
      this.$refs.esign
        .generate()
        .then((res) => {
          let Book_img = res.replace('data:image/png;base64,', '');
          let write_img = `data:image/png;base64,${  Book_img}`;
          let answer = {};
          answer = {
            hz,
            strokes_content: JSON.stringify(this.$refs.esign.history),
            strokes_image_url: write_img,
          };
          this.$emit('saveWriteAnswer', answer);
          let obj = {
            hz_handwritten_record_id: '',
            history: this.$refs.esign.history,
            strokes_image_url: write_img,
          };
          let data = {
            courseware_id: this.currentTreeID,
            hz,
            strokes_content: JSON.stringify(this.$refs.esign.history),
            strokes_image_base64: Book_img,
          };
          let MethodName = 'teaching-practice_manager-SaveMyHZHandwrittenRecord';
          LearnWebSI(MethodName, data)
            .then((res) => {
              if (res.status === 1) {
                this.$message.success('保存成功！');
                obj.hz_handwritten_record_id = res.hz_handwritten_record_id;
              }
              this.imgarr.push(obj);
              this.saveShow = false;
              this.handelReset();
            })
            .catch((res) => {
              console.log(res);
              this.imgarr.push(obj);
              this.saveShow = false;
              this.handelReset();
            });
          // console.log(Book_img);
          // this.textOcr(res.replace("data:image/png;base64,", ""));
        })
        .catch((err) => {
          this.saveShow = false;

          console.log(err);
          this.$message.warning('请先书写在保存');
        });
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.freewrite {
  position: relative;
  width: 100%;

  .record-notice {
    position: absolute;
    top: 106px;
    left: 56px;
    z-index: 999999;
    box-sizing: border-box;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 38px;
    color: #fff;
    background: rgba(0, 0, 0, 80%);
    border: 1px solid rgba(0, 0, 0, 100%);
    border-radius: 4px;
  }

  .imgsave {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;

    .image {
      display: flex;

      > div {
        width: 28px;
        height: 28px;
        margin-right: 8px;
        background: #fff url('@/assets/chinaTianRed.png') center no-repeat;
        background-size: 100% 100%;
        border-radius: 4px;
      }

      .select {
        background: rgba(222, 68, 68, 10%);
        border: 1px solid #f26c6c;
      }

      .img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .xj {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      cursor: pointer;
      background: rgba(0, 0, 0, 4%);
      border-radius: 4px;

      img {
        width: 16px;
        height: 16px;
      }
    }

    .click {
      background: rgba(222, 68, 68, 10%);
    }
  }

  .strockred {
    position: relative;
    width: 100%;
    height: 256px;
    margin: 0 auto;

    .character-target-div {
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 256px;
      background: #fff url('@/assets/chinaTianRed.png') center no-repeat;
      background-size: 100% 100%;
      border-radius: 24px;

      &_more {
        width: 100%;
        background: 0 0;
        background-size: 100% 100%;
      }

      .vueEsign {
        width: 256px;
        height: 256px;
      }
    }
  }
}
</style>