保存笔顺

src/components/Adult/preview/components/Freewrite.vue

@@ -33,7 +33,7 @@
           :key="'img' + i"
           @click="play(i)"
         >
-          <img class="img" :src="item" alt="" />
+          <img class="img" :src="item.strokes_image_url" alt="" />
         </div>
       </div>
 
@@ -52,15 +52,12 @@
          -->
         <div :class="['xj', saveShow ? 'click' : '']">
           <img
-            v-if="!saveShow"
             @click="handleGenerate"
-            src="../../../../assets/NPC/xj.png"
-            alt=""
-          />
-          <img
-            v-else
-            @click="handleGenerate"
-            src="../../../../assets/NPC/xj-xz.png"
+            :src="
+              saveShow
+                ? require('../../../../assets/NPC/xj-xz.png')
+                : require('../../../../assets/NPC/xj.png')
+            "
             alt=""
           />
         </div>
@@ -71,6 +68,7 @@
 
 <script>
 import FreeWriteQP from "./FreeWriteQP.vue";
+import { LearnWebSI } from "../../../../api/ajax";
 export default {
   components: {
     FreeWriteQP,
@@ -86,6 +84,7 @@ export default {
       imgarr: [],
       imgIndex: null,
       saveShow: false,
+      tabIndex: 0,
     };
   },
   computed: {},
@@ -96,16 +95,44 @@ export default {
   },
   //方法集合
   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: 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;
+        });
+      });
+    },
     removeImage() {
-      this.imgarr.splice(this.imgIndex, 1);
-      this.imgIndex = null;
+      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) {
       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.history[index];
+      let history = this.imgarr[index].history;
       const len = history.length;
       let i = 0;
       const runner = () => {
@@ -119,23 +146,36 @@ export default {
     },
     handelReset() {
       this.$refs.esign.reset();
+      this.imgIndex = null;
     },
     handleGenerate() {
       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,", "");
-          this.history.push(this.$refs.esign.history);
-          this.imgarr.push("data:image/png;base64," + Book_img);
+          let write_img = "data:image/png;base64," + Book_img;
           let data = {
             courseware_id: this.currentTreeID,
-            hz: this.cur.stem[0].con,
+            hz: hz,
             strokes_content: JSON.stringify(this.$refs.esign.history),
             strokes_image_base64: Book_img,
           };
-          this.saveShow = false;
-
+          let MethodName =
+            "teaching-practice_manager-SaveMyHZHandwrittenRecord";
+          LearnWebSI(MethodName, data).then((res) => {
+            this.$message.success("保存成功！");
+            let obj = {
+              hz_handwritten_record_id: res.hz_handwritten_record_id,
+              history: this.$refs.esign.history,
+              strokes_image_url: write_img,
+            };
+            this.imgarr.push(obj);
+            this.saveShow = false;
+            this.handelReset();
+          });
           //console.log(Book_img);
           // this.textOcr(res.replace("data:image/png;base64,", ""));
         })
@@ -150,7 +190,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    //this.getImgList();
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

src/components/Adult/preview/components/Practice.vue

@@ -86,6 +86,7 @@
                     :lineColor="hanzicolor"
                     :lineWidth="hanziweight"
                     :currentTreeID="currentTreeID"
+                    :tabIndex="0"
                     ref="freewrite"
                   />
                   <div class="footer">
@@ -175,6 +176,7 @@
                     :lineColor="hanzicolor"
                     :lineWidth="hanziweight"
                     :currentTreeID="currentTreeID"
+                    :tabIndex="1"
                     ref="freewrite"
                   />
                   <div class="footer">
@@ -234,7 +236,7 @@ export default {
       thickpen: require("../../../../assets/common/thick-pen.png"),
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
       collectFlag: false, // 是否收藏
-      isShow: "0",
+      isShow: 0,
     };
   },
   computed: {},
@@ -242,7 +244,13 @@ export default {
   //方法集合
   methods: {
     changeNav(index) {
-      this.navIndex = index;
+      let _this = this;
+      _this.navIndex = index;
+      if (index == 1) {
+        setTimeout(() => {
+          _this.$refs.freewrite[_this.isShow].getImgList(_this.isShow);
+        }, 100);
+      }
     },
     changeColor(index) {
       let _this = this;
@@ -262,7 +270,13 @@ export default {
       this.$refs.freewrite[index].handelReset();
     },
     handleClick(tab, event) {
-      this.isShow = tab.index;
+      let _this = this;
+      _this.isShow = tab.index;
+      if (_this.navIndex == 1) {
+        setTimeout(() => {
+          _this.$refs.freewrite[_this.isShow].getImgList(_this.isShow);
+        }, 100);
+      }
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）