From 0e579505f189e885aa8e994db87217e087918899 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 25 六月 2024 19:18:18 +0800
Subject: [PATCH] 英语bug修改

---
 src/components/matching/matching.vue |  298 +++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 235 insertions(+), 63 deletions(-)

diff --git a/src/components/matching/matching.vue b/src/components/matching/matching.vue
index 2ceb837..bcc4cc4 100644
--- a/src/components/matching/matching.vue
+++ b/src/components/matching/matching.vue
@@ -1,41 +1,72 @@
 <template>
-  <div class="connect" id="connect" ref="connect"  @mousemove="mousemove" @mouseup="(e) => touchend(e)">
-    <div class="answer"    >
-      <div class="answer-box">
-        <div
-          class="answer-box-item"
-          v-for="(item, index) in leftArr"
-          :key="index"
-          ref="left"
-          @mousedown="(e) => touchstart(e, item, index)"
-          
-        >
-          {{ item.label.txt }}
+  <div class="matching">
+    <div
+      class="connect"
+      id="connect"
+      ref="connect"
+      @mousemove="mousemove"
+      @mouseup="(e) => touchend(e)"
+    >
+      <div class="answer">
+        <div class="answer-box">
+          <div
+            class="answer-box-item"
+            v-for="(item, index) in leftArr"
+            :key="index"
+            ref="left"
+            @mousedown="(e) => touchstart(e, item, index)"
+            :style="{ backgroundColor: primaryColor,border:'1px solid' + bordercolor }"
+            v-html="item.label.txt"
+          ></div>
+        </div>
+        <div class="answer-box">
+          <div
+            class="answer-box-item tl-le"
+            v-for="(item, index) in rightArr"
+            :key="index"
+            ref="right"
+            :style="{ backgroundColor: primaryColor,border:'1px solid' + bordercolor }"
+            v-html="item.label.txt"
+          ></div>
         </div>
       </div>
-      <div class="answer-box">
-        <div
-          class="answer-box-item"
-          v-for="(item, index) in rightArr"
-          :key="index"
-          ref="right"
-        >
-          {{ item.label.txt }}
-        </div>
-      </div>
+      <canvas
+        class="connect-canvasA"
+        :width="clientWidth"
+        :height="clientHeight"
+        ref="canvasA"
+      ></canvas>
+      <canvas
+        class="connect-canvasB"
+        :width="clientWidth"
+        :height="clientHeight"
+        ref="canvasB"
+      ></canvas>
     </div>
-    <canvas
-      class="connect-canvasA"
-      :width="clientWidth"
-      :height="clientHeight"
-      ref="canvasA"
-    ></canvas>
-    <canvas
-      class="connect-canvasB"
-      :width="clientWidth"
-      :height="clientHeight"
-      ref="canvasB"
-    ></canvas>
+    <!-- 鎸夐挳 -->
+    <div class="btn-bottom">
+      <el-button @click="submitData">鎻愪氦</el-button>
+      <el-button @click="saveData" :style="{ borderColor: bordercolor }"
+        >淇濆瓨</el-button
+      >
+      <el-button @click="redo">閲嶅仛</el-button>
+      <el-button @click="handleAnswer" :style="{ borderColor: bordercolor }"
+        >鏌ョ湅绛旀</el-button
+      >
+    </div>
+    <!-- 瑙ｆ瀽 -->
+    <ul class="show-answer" v-if="isShowAnswer">
+      <li v-if="isRight !== null">
+        绛旀缁撴灉锛�<span v-if="isRight" style="color: #83e089">姝ｇ‘</span>
+        <span v-if="isRight == false" style="color: #d81e06">閿欒</span>
+      </li>
+      <li class="show-answer-box">
+        <div>绛旀:</div>
+        <div>
+          <img :src="question.answerImg" alt="" class="w100" />
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -56,7 +87,11 @@
       scrollTop: 0,
       debounce: false,
       checkItem: null,
-      checkItemIndex:null
+      checkItemIndex: null,
+      isShowAnswer: false,
+      isRight: null,
+      value: [],
+      pageNum: null,
     };
   },
   props: {
@@ -69,18 +104,20 @@
         };
       },
     },
-    value: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    item: {
+    question: {
       type: Object,
       default: () => {
         return [];
       },
     },
+    primaryColor: {
+      type: String,
+      default: "#fff",
+    },
+    bordercolor:{
+      type:String,
+      default:'#f49a4c'
+    }
   },
   watch: {
     rawData: {
@@ -91,6 +128,8 @@
     },
   },
   mounted() {
+    // 鑾峰彇褰撳墠椤电爜锛岀敤浜庡尮閰嶆湰娆″瓨鍌ㄩ鐩暟鎹�
+    this.pageNum = this.handlePage();
     // 娣诲姞婊氬姩浜嬩欢 鐩戝惉 瑙ｅ喅鍥犱负婊氬姩寮曡捣鐨勬嫋鍔ㄧ嚎涓嶅鐨勯棶棰�
     window.addEventListener(
       "scroll",
@@ -112,6 +151,7 @@
     this.$nextTick(() => {
       this.drawing();
     });
+    this.getAnswer();
   },
   methods: {
     init() {
@@ -150,14 +190,16 @@
     },
     // 瑙︽懜缁撴潫
     touchend(e, index) {
-      console.log("鎶捣", e,this.checkItem);
       this.isDragging = false;
-      if (this.item.showAnswer) {
+      if (this.question.showAnswer) {
         return false;
       }
       // let event = e.changedTouches[0];
       // document.elementFromPoint 閲嶇偣锛屾牴鎹畑,y鍧愭爣 鍙栧綋鍓嶅厓绱� 鎵�鏈夎兘杩愯鐨勯�昏緫 閮戒緷鎵樹簬杩欓噷銆�
-      let dom = document.elementFromPoint(e.pageX, e.pageY);
+      let dom = (this.container ? this.container : document).elementFromPoint(
+        e.pageX,
+        e.pageY
+      );
       // 鍙宠竟鐨刣om鏄摢涓�
       let right = this.rightDom.find((r) => r.bom === dom);
       // 涓嶇鏄摢涓兘娓呴櫎鎺� 搴曢儴鐨勭嚎
@@ -187,16 +229,15 @@
           };
         })
         .filter((r) => r.right !== undefined);
-      // this.$emit("input", model);
-      this.item.userChoise = model;
+      this.$emit("input", model);
+      this.question.userChoise = model;
       // console.log(JSON.stringify(model));
     },
     // 瑙︽懜寮�濮�
-    touchstart(e, item,index) {
+    touchstart(e, item, index) {
       this.isDragging = true;
-      console.log("鎸変笅", e);
-      this.checkItem = item
-      this.checkItemIndex = index
+      this.checkItem = item;
+      this.checkItemIndex = index;
       e.stopPropagation();
       // let event = e.targetTouches[0];
       item.line = [
@@ -208,7 +249,7 @@
     // touchmove(e, item) {
     //     if(!this.isDragging) return false
     //     console.log('绉诲姩',e);
-    //     if (this.item.showAnswer) {
+    //     if (this.question.showAnswer) {
     //         return false;
     //     }
     //     // let event = e.targetTouches[0];
@@ -220,10 +261,9 @@
     // 绉诲姩涓�
     mousemove(e) {
       if (!this.isDragging) return false;
-      if (this.item.showAnswer) {
+      if (this.question.showAnswer) {
         return false;
       }
-      console.log('绉诲姩',e);
       this.checkItem.line[2] = e.pageX;
       this.checkItem.line[3] =
         e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
@@ -251,8 +291,8 @@
       canvasA.lineWidth = 2;
       for (let i = 0; i < this.leftArr.length; i++) {
         const line = this.leftArr[i].line;
-        console.log(line);
-        console.log(this.leftArr[i]);
+        // console.log(line);
+        // console.log(this.leftArr[i]);
         if (line.length) {
           canvasA.moveTo(line[0], line[1]);
           canvasA.lineTo(line[2], line[3]);
@@ -272,9 +312,103 @@
       let rightY = rightEvent.offsetTop + rightEvent.clientHeight / 2;
       return [leftX, leftY, rightX, rightY];
     },
-    mouseup() {
-      console.log("澶х洅瀛愭姮璧�", this.isDragging);
-      this.isDragging = false;
+    areArraysEqual(array1, array2) {
+      // 濡傛灉涓や釜鏁扮粍闀垮害涓嶅悓锛屽垯瀹冧滑涓嶇瓑
+      if (array1.length !== array2.length) {
+        return false;
+      }
+
+      // 閬嶅巻鏁扮粍骞舵瘮杈冩瘡涓璞＄殑灞炴��
+      for (let i = 0; i < array1.length; i++) {
+        const obj1 = array1[i];
+        const obj2 = array2[i];
+
+        // 濡傛灉瀵硅薄鐨刲eft鎴杛ight灞炴�т笉鐩哥瓑锛屽垯鏁扮粍涓嶇瓑
+        if (obj1.left !== obj2.left || obj1.right !== obj2.right) {
+          return false;
+        }
+      }
+
+      // 濡傛灉鎵�鏈夊璞￠兘鍖归厤锛屽垯鏁扮粍鐩哥瓑
+      return true;
+    },
+    // 鏌ョ湅绛旀
+    handleAnswer() {
+      this.isShowAnswer = !this.isShowAnswer;
+    },
+    // 鎻愪氦
+    submitData() {
+      const answerArr = [];
+      const values = this.question.options.values;
+      for (let index = 0; index < values.length; index++) {
+        const item = values[index];
+        const rightIndex = this.question.options.linkValues.findIndex(
+          (citem) => citem.oldId == item.oldId
+        );
+
+        answerArr.push({
+          left: index,
+          right: rightIndex,
+        });
+      }
+      console.log(this.question.userChoise,answerArr);
+      this.isRight = this.areArraysEqual(this.question.userChoise, answerArr);
+      this.isShowAnswer = true;
+    },
+    // 鑾峰彇褰撳墠椤电爜
+    handlePage() {
+      let pageNum = null;
+      const element = (
+        this.container ? this.container : document
+      ).querySelector("matching");
+      if (element) {
+        pageNum = this.getParentWithClass(element, "page-box").getAttribute(
+          "page"
+        );
+      }
+      return pageNum;
+    },
+    getParentWithClass(element, className) {
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
+      }
+    },
+    // 鑾峰彇鏈湴瀛樺偍棰樼洰绛旀
+    getAnswer() {
+      const data = localStorage.getItem(
+        this.config.activeBook.name + "-matching-" + this.pageNum
+      );
+      if (data) {
+        this.value = JSON.parse(data);
+      }
+    },
+    // 淇濆瓨
+    saveData() {
+      if (this.question.userChoise.length)
+        localStorage.setItem(
+          this.config.activeBook.name + "-matching-" + this.pageNum,
+          JSON.stringify(this.question.userChoise)
+        );
+      // console.log('淇濆瓨鎴愬姛',this.config.activeBook.name,this.pageNum);
+    },
+    // 閲嶅仛
+    redo() {
+      this.question.showAnswer = false;
+      localStorage.removeItem(
+        this.config.activeBook.name + "-matching-" + this.pageNum
+      );
+      this.value = [];
+      for (let index = 0; index < this.leftArr.length; index++) {
+        const item = this.leftArr[index];
+        item.value = [];
+        item.line = [];
+      }
+      this.leftArr;
+      this.drawing();
+      this.isShowAnswer = false;
     },
   },
 };
@@ -313,14 +447,14 @@
     text-align: center;
 
     &-item {
+      cursor: pointer;
       z-index: 2;
-      // display: inline-flex;
       padding: 10px;
       border-radius: 4px;
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       margin-bottom: 20px;
-      line-height: 40px;
-      padding: 20px 0;
+      line-height: 24px;
+      padding: 6px;
     }
 
     &-item:last-child {
@@ -328,11 +462,49 @@
     }
   }
 }
-
+.tl-le {
+  text-align: left;
+}
 .connect {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* 鏍囧噯璇硶 */
 }
+.show-answer {
+  margin: 30px auto;
+  width: 100%;
+  height: min-content;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  li {
+    padding: 10px;
+  }
+}
+.btn-bottom {
+  width: 70%;
+  margin: 70px auto 0 auto;
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  .el-button {
+    margin-top: 10px;
+  }
+}
+.el-button {
+  height: 30px;
+  padding: 7px;
+  min-width: 78px;
+}
+.answer-box-item {
+  /deep/ .un1 {
+    -webkit-text-emphasis-style: dot;
+    -moz-text-emphasis-style: dot;
+    -ms-text-emphasis-style: dot;
+    text-emphasis-style: dot;
+    -webkit-text-emphasis-position: under;
+    -moz-text-emphasis-position: under;
+    -ms-text-emphasis-position: under;
+    text-emphasis-position: under;
+  }
+}
 </style>

--
Gitblit v1.9.1