标注声调预览

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -25,6 +25,22 @@
               {{ itemc }}
             </span>
           </template>
+          <template v-else>
+            <span v-for="(itemc, indexc) in con_preview[i].item_con" :key="indexc" class="items-box">
+              <span
+                v-for="(itemi, indexi) in itemc"
+                :key="indexi"
+                :class="['items-con', active_index_str === i + '-' + indexc + '-' + indexi ? 'active' : '']"
+                @click="
+                  con_preview[i].item_active_index = indexc;
+                  active_index_str = i + '-' + indexc + '-' + indexi;
+                  active_letter = itemi;
+                  active_letter_index = indexi;
+                "
+                >{{ itemi }}</span
+              >
+            </span>
+          </template>
         </div>
         <span
           v-for="({ img, value }, j) in toneList"
@@ -75,6 +91,8 @@ export default {
       ],
       final_con: '',
       active_index_str: '',
+      active_letter: '',
+      active_letter_index: 0,
     };
   },
   created() {
@@ -87,14 +105,24 @@ export default {
     chooseTone(item, value, i) {
       item.user_answer[item.item_active_index].select_tone = value;
       if (this.data.property.tone_type === 'dimension') {
-        item.user_answer[item.item_active_index].select_letter = item.user_answer[item.item_active_index].active_letter;
+        item.user_answer[item.item_active_index].select_letter = this.active_letter;
+        this.active_index_str = `${i}-${item.item_active_index}-${this.active_letter_index}`;
+        this.handleReplaceTone(this.active_letter + value);
+        setTimeout(() => {
+          // item.item_con[item.item_active_index][this.active_letter_index] = this.final_con;
+          let new_con = item.item_con_yuan[item.item_active_index].split(this.active_letter);
+          item.item_con[item.item_active_index] = new_con[0] + this.final_con + new_con[1];
+          this.active_letter = this.final_con;
+          this.$forceUpdate();
+        }, 100);
+      } else {
+        this.active_index_str = `${i}-${item.item_active_index}`;
+        this.handleReplaceTone(item.item_con_yuan[item.item_active_index] + value);
+        setTimeout(() => {
+          item.item_con[item.item_active_index] = this.final_con;
+          this.$forceUpdate();
+        }, 100);
       }
-      this.active_index_str = `${i}-${item.item_active_index}`;
-      this.handleReplaceTone(item.item_con_yuan[item.item_active_index] + value);
-      setTimeout(() => {
-        item.item_con[item.item_active_index] = this.final_con;
-        this.$forceUpdate();
-      }, 100);
     },
     // 处理数据
     handleData() {
@@ -244,7 +272,9 @@ export default {
         border-radius: 40px;
       }
 
-      .item-con {
+      .item-con,
+      .items-con {
+        color: #000;
         cursor: pointer;
 
         &.active {
@@ -252,6 +282,10 @@ export default {
         }
       }
 
+      .items-box {
+        margin-right: 3px;
+      }
+
       .tone {
         width: 32px;
         height: 32px;