修改汉字播放的存在的问题

src/components/Adult/preview/NewWordShow.vue

@@ -209,8 +209,8 @@ export default {
     changePraShow() {
       this.isPraShow = false;
       this.ifFreeShow = false;
-      this.freeImg[this.activeIndex][this.activeColIndex] =
-        this.$refs.freePaint.imgSrc;
+      // this.freeImg[this.activeIndex][this.activeColIndex] =
+      //   this.$refs.freePaint.imgSrc;
     },
     async writeWord(words, pinyin) {
       this.activeIndex = null;

src/components/Adult/preview/components/FreewriteLettle.vue

@@ -24,6 +24,7 @@
           ref="freewrite"
         /> -->
         <div
+          v-if="data.history"
           @click.stop="play"
           :class="[
             'strock-play-box',
@@ -35,10 +36,9 @@
               ? 'brown-border'
               : 'red-border',
           ]"
-        >
-        </div>
-        <template v-if="!hasPlay && currenHzData.strokes_image_url">
-          <img class="img" :src="currenHzData.strokes_image_url" alt="" />
+        ></div>
+        <template v-if="!hasPlay && data.strokes_image_url">
+          <img class="img" :src="data.strokes_image_url" alt="" />
         </template>
         <FreeWriteQP
           :bgColor.sync="bgColor"
@@ -67,6 +67,7 @@ import FreeWriteQP from "./FreeWriteQP.vue";
 // import ChinaDict from "./ChinaDict";
 // import Audio from "./AudioRed.vue";
 import { LearnWebSI } from "@/api/ajax";
+import { set } from "js-cookie";
 export default {
   components: {
     Strockplayredline,
@@ -109,6 +110,7 @@ export default {
       imgarr: [],
       imgOrCans: false,
       hasPlay: false,
+      data: null,
     };
   },
   computed: {},
@@ -116,6 +118,7 @@ export default {
   //方法集合
   methods: {
     play(index) {
+      let _this = this;
       if (this.hasPlay) {
         this.$message.warning("请等待播放完成");
         return;
@@ -125,17 +128,22 @@ export default {
       let c = document.getElementById("esign");
       let cxt = document.getElementById("esign").getContext("2d");
       cxt.clearRect(0, 0, c.width, c.height);
-      let history = this.currenHzData.history;
+      let history = null;
+      console.log(_this.$refs.esign.history);
+      history =
+        _this.$refs.esign.history.length > 0
+          ? _this.$refs.esign.history
+          : _this.currenHzData.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]);
+          _this.$refs.esign.draw(null, history[i][0], history[i][1]);
           requestAnimationFrame(runner);
         } else {
           console.log("播放完成");
-          this.hasPlay = false;
+          _this.hasPlay = false;
         }
       };
       requestAnimationFrame(runner);
@@ -165,7 +173,7 @@ export default {
       }
       this.imgOrCans = false;
       this.$refs.esign.reset();
-      this.currenHzData.strokes_image_url = "";
+      this.data.strokes_image_url = "";
     },
     handleWriteImg() {
       this.$refs.esign
@@ -209,6 +217,7 @@ export default {
     if (this.currenHzData.strokes_image_url) {
       this.imgOrCans = true;
     }
+    this.data = JSON.parse(JSON.stringify(this.currenHzData));
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -329,7 +338,8 @@ export default {
         position: absolute;
         width: 32px;
         height: 32px;
-        background: #fff url("../../../../assets/NPC/strock-play-red-click-big.png") center
+        background: #fff
+          url("../../../../assets/NPC/strock-play-red-click-big.png") center
           no-repeat;
         background-size: 100% 100%;
         cursor: pointer;