字词卡片去掉星级 增加搭配

src/views/exercise_questions/create/components/exercises/WordCardQuestion.vue

@@ -57,8 +57,8 @@
                   >
                 </div>
                 <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
-                <span class="rate-box"><el-rate v-model="item.rate" /></span>
                 <el-input v-model="item.definition" placeholder="输入释义" type="textarea" :rows="1" />
+                <el-input v-model="item.collocation" placeholder="输入搭配" />
               </div>
               <SvgIcon
                 icon-class="delete"
@@ -73,7 +73,11 @@
                   {{ computedQuestionNumber(indexs, data.option_number_show_mode) }}
                 </span>
                 <el-input v-model="item.example_sentence[indexs]" placeholder="输入例句" />
+                <SvgIcon icon-class="delete" class="delete pointer" @click="deleteSentence(item, indexs)" />
               </div>
+              <span class="add-option" @click="addSentence(item)">
+                <SvgIcon icon-class="add-circle" size="14" /> <span>增加例句</span>
+              </span>
             </div>
           </li>
         </ul>
@@ -237,7 +241,7 @@ export default {
     },
     // 删除小题
     deleteOption(i, file_id, pic_id) {
-      this.$confirm('是否删除？', '提示', {
+      this.$confirm('是否删除该条内容？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
@@ -252,7 +256,7 @@ export default {
     },
     // 删除
     delectOptions(i, id) {
-      this.$confirm('是否删除？', '提示', {
+      this.$confirm('是否删除该图片？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
@@ -265,6 +269,18 @@ export default {
         })
         .catch(() => {});
     },
+    // 删除例句
+    deleteSentence(item, index) {
+      this.$confirm('是否删除该条例句？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          item.example_sentence.splice(index, 1);
+        })
+        .catch(() => {});
+    },
     // 自动生成音频
     handleMatically(item, i) {
       if (item.pinyin.trim()) {
@@ -322,6 +338,10 @@ export default {
         item.hz_strokes_list = content_arr_strokes;
       }
     },
+    // 增加例句
+    addSentence(item) {
+      item.example_sentence.push('');
+    },
   },
 };
 </script>
@@ -375,15 +395,6 @@ export default {
       .el-input {
         flex: 1;
       }
-
-      .rate-box {
-        width: 128px;
-        height: 32px;
-        padding: 6px 0;
-        text-align: center;
-        background: #f2f3f5;
-        border-radius: 2px;
-      }
     }
 
     .example-sentence-box {

src/views/exercise_questions/data/wordCard.js

@@ -8,7 +8,7 @@ export function getOption(content = '') {
     audio_file_id: '',
     pinyin: '',
     definition: '',
-    rate: null,
+    collocation: '',
     example_sentence: ['', ''],
     picture_file_id: '',
     hz_strokes_list: [],

src/views/exercise_questions/preview/WordCardPreview.vue

@@ -19,62 +19,47 @@
         fit="contain"
       />
       <div class="words-right">
-        <div :class="['words-item']">
-          <label
-            v-for="(item, index) in option_list"
-            :key="index"
-            :class="[active_index === index ? 'active' : '']"
-            @click="active_index = index"
-            >{{ item.content }}</label
-          >
-        </div>
         <template v-for="(item, index) in option_list">
-          <div class="strock-box" :key="index" v-if="index === active_index">
-            <div class="strock-left" v-if="item.hz_strokes_list && item.hz_strokes_list.length > 0">
+          <div v-if="index === active_index" :key="index" class="strock-box">
+            <div class="pinyin-box">
+              <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
+              <span class="pinyin">{{ item.pinyin }}</span>
+            </div>
+            <div v-if="item.hz_strokes_list && item.hz_strokes_list.length > 0" class="strock-left">
               <template v-for="(items, indexs) in item.hz_strokes_list">
                 <Strockplayredline
+                  v-if="items"
+                  :key="indexs"
                   :play-storkes="true"
                   :book-text="items.hz"
                   :target-div="'pre' + items.hz + indexs + active_index"
                   :book-strokes="items.strokes"
                   :class="['strock-chinese', indexs !== item.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
-                  :key="indexs"
-                  v-if="items"
                 />
               </template>
             </div>
-            <div class="strock-right">
-              <el-rate v-model="item.rate" disabled text-color="#ff9900"> </el-rate>
-              <div class="pinyin-box">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="white" v-if="item.audio_file_id" />
-                <span class="pinyin">{{ item.pinyin }}</span>
-              </div>
-            </div>
           </div>
         </template>
-        <el-divider></el-divider>
-        <div class="content-box" v-if="option_list[active_index]">
-          <p class="definition" v-for="(itemd, indexd) in option_list[active_index].definition_preview" :key="indexd">
+        <el-divider />
+        <div v-if="option_list[active_index]" class="content-box">
+          <span v-if="option_list[active_index].definition_preview.length > 0" class="tips">释义：</span>
+          <p v-for="(itemd, indexd) in option_list[active_index].definition_preview" :key="indexd" class="definition">
             {{ itemd }}
           </p>
-          <span
-            class="tips"
-            v-if="
-              option_list[active_index].example_sentence &&
-              (option_list[active_index].example_sentence[0].trim() ||
-                option_list[active_index].example_sentence[1].trim())
-            "
-            >例句：</span
-          >
+          <span v-if="option_list[active_index].collocation" class="tips">搭配：</span>
+          <p v-if="option_list[active_index].collocation" class="definition">
+            {{ option_list[active_index].collocation }}
+          </p>
+          <span v-if="option_list[active_index].example_sentence.length > 0" class="tips">例句：</span>
           <template v-for="(iteme, indexe) in option_list[active_index].example_sentence">
-            <p class="example-sentence" :key="indexe + iteme.trim()" v-if="iteme.trim()">
+            <p v-if="iteme.trim()" :key="indexe + iteme.trim()" class="example-sentence">
               <span>{{ computeOptionMethods[data.option_number_show_mode](indexe) }} </span>
               <span>{{ iteme }}</span>
             </p>
           </template>
         </div>
-        <el-divider></el-divider>
-        <div class="sound-box" v-if="answer.answer_list[active_index]">
+        <el-divider />
+        <div v-if="answer.answer_list[active_index]" class="sound-box">
           <SoundRecordPreview
             :wav-blob.sync="answer.answer_list[active_index].audio_file_id"
             :type="'small'"
@@ -82,6 +67,16 @@
           />
         </div>
       </div>
+
+      <div v-if="option_list.length > 1" :class="['words-item']">
+        <label
+          v-for="(item, index) in option_list"
+          :key="index"
+          :class="[active_index === index ? 'active' : '']"
+          @click="active_index = index"
+          >{{ item.content }}</label
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -164,25 +159,25 @@ export default {
 
     .words-right {
       flex: 1;
+    }
 
-      .words-item {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
+    .words-item {
+      width: 120px;
 
-        label {
-          padding: 8px 16px;
-          font-size: 16px;
-          font-weight: 400;
-          line-height: 24px;
-          color: #fff;
-          cursor: pointer;
-          background: rgba(48, 110, 255, 30%);
-          border-radius: 20px;
+      label {
+        display: block;
+        padding: 4px 16px;
+        margin-bottom: 4px;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: rgba(0, 0, 0, 30%);
+        cursor: pointer;
+        border-radius: 20px;
 
-          &.active {
-            background: rgba(48, 110, 255, 100%);
-          }
+        &.active {
+          color: #fff;
+          background: rgba(48, 110, 255, 100%);
         }
       }
     }
@@ -203,12 +198,6 @@ export default {
     }
   }
 
-  .strock-box {
-    display: flex;
-    column-gap: 16px;
-    margin-top: 24px;
-  }
-
   .strock-left {
     display: flex;
   }
@@ -219,7 +208,7 @@ export default {
     align-items: center;
     width: max-content;
     padding: 4px 8px;
-    margin-top: 10px;
+    margin-bottom: 10px;
     background: rgba(47, 111, 236, 100%);
     border-radius: 40px;