eep_page/src/views/book/courseware/preview/components/write_base/WriteBasePreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="write-base-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div v-if="width" class="main">
      <h2>{{ convertText('书写区') }}</h2>
      <template v-if="isJudgingRightWrong">
        <img
          v-if="data.write_base64[0]"
          style="background-color: #f7f8fa"
          :src="data.write_base64[0]"
          alt="write-show"
        />
        <div class="esign-box" v-else :style="{ width: width + 'px', height: '150px' }"></div>
      </template>
      <div class="esign-box" v-else>
        <vue-esign
          ref="esign"
          class="esign-canvas"
          :width="width"
          :height="150"
          :is-crop="isCrop"
          :line-width="lineWidth"
          :line-color="lineColor"
          :bg-color.sync="bgColor"
        />
        <div class="btn-box">
          <SvgIcon icon-class="clear" size="24" title="清除" @click="handleReset" />
          <SvgIcon icon-class="camera" size="24" title="保存" @click="handleGenerate" />
        </div>
      </div>
      <!-- <template v-if="data.write_base64[0]">
        <h2>{{ convertText('展示区') }}</h2>
        <img style="background-color: #f7f8fa" :src="data.write_base64[0]" alt="write-show" />
      </template> -->
    </div>
  </div>
</template>

<script>
import { getWriteBaseData } from '@/views/book/courseware/data/writeBase';

import PreviewMixin from '../common/PreviewMixin';
import vueEsign from 'vue-esign';

export default {
  name: 'WriteBasePreview',
  components: { vueEsign },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getWriteBaseData(),
      lineWidth: 2,
      lineColor: '#000000',
      bgColor: '#f7f8fa',
      isCrop: false,
      width: 0,
    };
  },
  computed: {},
  watch: {
    isJudgingRightWrong(val) {
      if (!val) return;
      this.data.write_base64 = this.answer.answer_list;
    },
  },
  mounted() {
    this.width = document.getElementsByClassName('write-base-preview')[0].clientWidth;
    if (!this.isJudgingRightWrong) {
      this.answer.answer_list = this.data.write_base64;
    }
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset();
      this.$nextTick(() => {
        this.bgColor = '#f7f8fa';
      });
    },
    handleGenerate() {
      this.$refs.esign
        .generate({ format: 'png', quality: 0.8 })
        .then((res) => {
          this.data.write_base64[0] = res;
          this.$forceUpdate();
          this.$message.success('保存成功');
        })
        .catch((err) => {
          console.error(err);
          // alert('生成图片失败：' + err.message);
        });
    },

    /**
     * 获取无文本内容的数据结构，用于保存为个人模板时的样式模板
     */
    getNoTextContentData() {
      let noTextContentData = JSON.parse(JSON.stringify(this.data));
      const resetFieldMap = {
        write_base64: [''],
        answer_list: [], // 答案列表
        analysis_list: [], // 解析列表
      };

      Object.assign(noTextContentData, resetFieldMap);

      if (noTextContentData.answer) {
        noTextContentData.answer.answer_list = [];
        noTextContentData.answer.reference_answer = '';
      }

      return noTextContentData;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.write-base-preview {
  @include preview-base;

  display: block;

  .main {
    h2 {
      margin: 5px 0;
      font-size: 14px;
    }

    .esign-box {
      position: relative;
      background-color: #f7f8fa;
      border-radius: 4px;

      .btn-box {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: flex;
        gap: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>