汉字题 听说预览

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -86,26 +86,34 @@
               </div>
             </div>
           </div>
-          <div class="card-box" v-else>
-            <div class="words-info">
-              <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-              <span class="pinyin">{{ item.pinyin }}</span>
+        </template>
+        <div class="card-box" v-if="data.property.learn_type === 'dictation'">
+          <div class="words-info">
+            <span>{{ computeOptionMethods[data.option_number_show_mode](index) }}. </span>
+            <span class="pinyin">{{ item.pinyin }}</span>
+            <AudioPlay :file-id="item.audio_file_id" theme-color="white" />
+          </div>
+          <div class="words-dic-box">
+            <div class="words-dic-item" v-for="(itemc, indexc) in item.imgArr" :key="indexc">
+              <span class="pinyin">{{ item.pinyin_arr[indexc].pinyin_item }}</span>
+              <div :class="['strockplay-newWord']" @click="freeWrite(itemc, index, indexc)">
+                <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+                <img
+                  v-if="!play_status && itemc && itemc.strokes_image_url"
+                  class="hanzi-writer-img"
+                  :src="itemc.strokes_image_url"
+                  alt=""
+                />
+              </div>
             </div>
-            <Strockplayredline
-              :play-storkes="true"
-              :book-text="item.content"
-              :target-div="'pre' + item.content + index"
-              :book-strokes="item.strokes"
-              class="strock-chinese"
-            />
           </div>
-        </template>
+        </div>
       </div>
     </div>
     <div v-if="if_free_show" class="practiceBox practice-box-strock">
       <FreewriteLettle
         ref="freePaint"
-        :current-tree-i-d="'1234'"
+        :current-tree-i-d="'1234456'"
         :current-hz="current_hz"
         :curren-hz-data="current_hz_data"
         :row-index="active_index"
@@ -120,6 +128,7 @@
 </template>
 
 <script>
+import { computeOptionMethods } from '@/views/exercise_questions/data/common';
 import PreviewMixin from './components/PreviewMixin';
 import Strockplayredline from './components/common/Strockplayredline.vue';
 import Strockred from './components/common/Strockred.vue';
@@ -136,6 +145,7 @@ export default {
   mixins: [PreviewMixin],
   data() {
     return {
+      computeOptionMethods,
       hanzi_color: '#404040', // 描红汉字底色
       writer_number_yuan: 19,
       writer_number: null, // 书写个数
@@ -149,6 +159,45 @@ export default {
       current_hz: '', // 当前汉字
       current_hz_data: null, // 当前汉字数据
       play_status: false, // 播放状态
+      hz_data: [
+        '你',
+        '最',
+        '近',
+        '怎',
+        '么',
+        '样',
+        '我',
+        '很',
+        '好',
+        '再',
+        '见',
+        '吃',
+        '饭',
+        '天',
+        '启',
+        '扫',
+        '描',
+        '以',
+        '平',
+        '太',
+        '效',
+        '国',
+        '是',
+        '称',
+        '需',
+        '值',
+        '复',
+        '包',
+        '头',
+        '条',
+        '够',
+        '关',
+        '放',
+        '发',
+        '补',
+        '快',
+        '素',
+      ],
     };
   },
   watch: {
@@ -185,21 +234,36 @@ export default {
         (document.getElementsByClassName('preview-content')[0].clientWidth - 128) / 64,
       );
       this.writer_number = this.data.property.tian_number ? this.data.property.tian_number * 1 : 8;
-      this.data.option_list.forEach((item) => {
-        if (item.content.trim()) {
-          let arr = [];
-          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
-          let data = {
-            hz: item.content.trim(),
-          };
-          GetStaticResources(MethodName, data).then((res) => {
-            this.$set(item, 'strokes', res);
-          });
-          for (let i = 0; i < this.writer_number; i++) {
+      this.data.option_list.forEach((item, index) => {
+        let arr = [];
+        if (this.data.property.learn_type === 'dictation') {
+          item.pinyin_arr = [];
+          let pinyin_arr = item.pinyin.trim().split(' ');
+          pinyin_arr.forEach((itemp) => {
+            let obj = {
+              pinyin_item: itemp,
+            };
             arr.push(null);
-          }
+            item.pinyin_arr.push(obj);
+          });
           item.imgArr = arr;
-          this.answer_list.write_model[item.content] = arr;
+          this.answer_list.write_model[this.hz_data[index]] = arr;
+        } else {
+          if (item.content.trim()) {
+            let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+            let data = {
+              hz: item.content.trim(),
+            };
+            GetStaticResources(MethodName, data).then((res) => {
+              this.$set(item, 'strokes', res);
+            });
+
+            for (let i = 0; i < this.writer_number; i++) {
+              arr.push(null);
+            }
+            item.imgArr = arr;
+            this.answer_list.write_model[item.content] = arr;
+          }
         }
       });
     },
@@ -216,7 +280,11 @@ export default {
       this.if_free_show = true;
       this.active_index = index;
       this.active_col_index = indexs;
-      this.current_hz = this.data.option_list[index].content;
+      if (this.data.property.learn_type === 'dictation') {
+        this.current_hz = this.hz_data[index];
+      } else {
+        this.current_hz = this.data.option_list[index].content;
+      }
       this.current_hz_data = imgUrl;
     },
     // 删除记录
@@ -307,7 +375,29 @@ export default {
       column-gap: 4px;
       align-items: center;
       justify-content: center;
-      margin-bottom: 9px;
+      width: max-content;
+      padding: 5px 16px;
+      margin: 0 auto 8px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #fff;
+      background: #165dff;
+      border-radius: 20px;
+
+      .pinyin {
+        font-size: 14px;
+        color: #fff;
+      }
+
+      .audio-wrapper {
+        :deep .audio-play {
+          color: #fff;
+        }
+
+        :deep .audio-play.not-url {
+          color: #a1a1a1;
+        }
+      }
     }
 
     .card-box {
@@ -369,6 +459,37 @@ export default {
     }
   }
 
+  .words-box-dictation {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 24px;
+
+    .card-box {
+      display: block;
+    }
+
+    .words-dic-box {
+      display: flex;
+      column-gap: 6px;
+      width: max-content;
+      margin: 0 auto;
+    }
+
+    .words-dic-item {
+      text-align: center;
+
+      .pinyin {
+        line-height: 30px;
+      }
+    }
+  }
+
+  .words-dic-item {
+    .strockplay-newWord {
+      border-top: 1px solid #e81b1b;
+    }
+  }
+
   .practiceBox {
     position: fixed;
     top: 0;