Merge branch 'master' of http://60.205.254.193:3000/GCLS/GCLS_Page_Exercise

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -278,7 +278,10 @@ export default {
             });
           }
           if (this.isJudgingRightWrong) {
-            item.imgArr = this.answer.answer_list[index].strokes_content_list;
+            item.imgArr =
+              this.answer.answer_list[index] && this.answer.answer_list[index].strokes_content_list
+                ? this.answer.answer_list[index].strokes_content_list
+                : arr;
           } else {
             item.imgArr = arr;
           }
@@ -540,9 +543,9 @@ export default {
 
     .miao-box {
       position: relative;
-      width: 320px;
-      height: 316px;
-      padding: 30px 20px;
+      width: 332px;
+      height: 360px;
+      padding: 30px 16px;
       margin: 0 auto;
       background: #f3f3f3;
       border-radius: 8px;
@@ -561,15 +564,15 @@ export default {
 
       .strockredBox,
       .strockplay-redInner {
-        width: 256px;
-        height: 256px;
+        width: 300px;
+        height: 300px;
         margin: 0 auto;
       }
 
       .strock-red {
         position: absolute;
         top: 30px;
-        left: 32px;
+        left: 16px;
 
         &-zindex {
           z-index: -1;

src/views/exercise_questions/preview/WordDictationPreview.vue

@@ -170,7 +170,10 @@ export default {
           item.pinyin_arr.push(obj);
         });
         if (this.isJudgingRightWrong) {
-          item.imgArr = this.answer.answer_list[index].strokes_content_list;
+          item.imgArr =
+            this.answer.answer_list[index] && this.answer.answer_list[index].strokes_content_list
+              ? this.answer.answer_list[index].strokes_content_list
+              : arr;
         } else {
           item.imgArr = arr;
         }

src/views/exercise_questions/preview/components/common/FreewriteLettle.vue

@@ -7,6 +7,7 @@
         <template v-if="!hasPlay && data && data.strokes_image">
           <img class="img" :src="data.strokes_image" alt="" />
         </template>
+        <div class="zhezhao" v-if="disabled"></div>
         <FreeWriteQP
           id="esign"
           ref="esign"
@@ -23,7 +24,7 @@
         </a>
       </div>
       <ul class="nav-list">
-        <li :class="currenHzData && currenHzData.history ? '' : 'disabled'" @click="play()">播放</li>
+        <li :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'" @click="play()">播放</li>
         <li :class="disabled ? 'disabled' : ''" @click="handleWriteImg">保存</li>
       </ul>
     </div>
@@ -49,7 +50,7 @@ export default {
       type: Object,
       default: () => ({
         strokes_image: '',
-        history: [],
+        strokes_content: '[]',
       }),
     },
     rowIndex: {
@@ -67,8 +68,8 @@ export default {
   },
   data() {
     return {
-      width: 256,
-      height: 256,
+      width: 300,
+      height: 300,
       bgColor: '',
       isCrop: false,
       //   learn_mode: "",
@@ -83,6 +84,7 @@ export default {
       imgOrCans: false,
       hasPlay: false,
       data: null,
+      imgShow: false,
     };
   },
   computed: {},
@@ -111,18 +113,19 @@ export default {
   methods: {
     play() {
       let _this = this;
-      if (this.currenHzData && this.currenHzData.history) {
+      if (this.currenHzData && this.currenHzData.strokes_content) {
         if (this.hasPlay) {
           this.$message.warning('请等待播放完成');
           return;
         }
         if (this.$refs.esign) this.$refs.esign.reset();
         this.hasPlay = true;
+        this.imgShow = true;
         let c = document.getElementById('esign');
         let cxt = document.getElementById('esign').getContext('2d');
         cxt.clearRect(0, 0, c.width, c.height);
         let history = null;
-        history = _this.currenHzData.history;
+        history = JSON.parse(_this.currenHzData.strokes_content);
         const len = history.length;
         let i = 0;
         const runner = () => {
@@ -193,7 +196,8 @@ export default {
         };
         this.$emit('changeCurQue', answer, this.colIndex);
         let obj = {
-          history: this.$refs.esign.history,
+          hz: this.currentHz,
+          strokes_content: JSON.stringify(this.$refs.esign.history),
           strokes_image: write_img,
         };
         this.$emit('closeIfFreeShow', obj, this.rowIndex, this.colIndex);
@@ -236,7 +240,7 @@ export default {
 <style lang="scss" scoped>
 .practice {
   position: relative;
-  width: 320px;
+  width: 332px;
   max-height: 400px;
   margin: 0 auto;
   background: #f3f3f3;
@@ -296,8 +300,9 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: 288px;
-    height: 360px;
+    width: 332px;
+
+    // height: 360px;
     padding: 30px 16px;
     margin: 0 auto;
     background: #f3f3f3;
@@ -314,7 +319,7 @@ export default {
       list-style: none;
 
       > li {
-        width: 124px;
+        width: 140px;
         height: 34px;
         font-size: 14px;
         font-style: normal;
@@ -348,20 +353,23 @@ export default {
       position: absolute;
       top: 30px;
       left: 16px;
-      width: 256px;
-      height: 250px;
+      width: 300px;
+      height: 300px;
       color: #dedede;
     }
 
     .right-strockred {
       position: relative;
-      width: 256px;
-      height: 256px;
+      width: 300px;
+      height: 300px;
       overflow: hidden;
       border-radius: 8px;
 
-      .img {
+      .img,
+      .zhezhao {
         position: absolute;
+        width: 100%;
+        height: 100%;
       }
     }