文章加录音组件

src/components/Adult/Preview.vue

@@ -9,165 +9,172 @@
     ]"
   >
     <template v-if="isPhone">
-      <div class="NNPE-title NNPE-title-top">
-        <!-- 页眉 -->
-        <div
-          class="NNPE-title-left"
-          :style="{ fontSize: baseSizePhone + 4 + 'px' }"
-        >
+      <div
+        class="NNPE-title-bg"
+        :style="{ background: themeColorPhone[themeColorPhoneIndex] }"
+      >
+        <div class="NNPE-title NNPE-title-top">
+          <!-- 页眉 -->
           <div
-            v-for="(item, index) in cur.detailList"
-            :key="index"
-            class="NNPE-title-item"
+            class="NNPE-title-left"
+            :style="{ fontSize: baseSizePhone + 4 + 'px' }"
           >
-            <template
-              v-if="
-                item.detail &&
-                  item.detail.wordsList &&
-                  item.detail.wordsList.length == 0
-              "
+            <div
+              v-for="(item, index) in cur.detailList"
+              :key="index"
+              class="NNPE-title-item"
             >
-              <p
-                v-if="item.detail.sentence"
-                :class="[
-                  'content-con',
-                  /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : ''
-                ]"
-                v-html="item.detail.sentence"
-              />
-            </template>
-            <template v-else>
-              <div v-if="item.detail && item.detail.resArr" class="con-box">
-                <div
-                  v-for="(itemCon, indexCon) in item.detail.resArr"
-                  v-show="itemCon.isShow"
-                  :key="indexCon"
-                  :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
-                >
-                  <template
-                    v-if="
-                      item.detail &&
-                        item.detail.wordsList &&
-                        item.detail.wordsList[indexCon + 1] &&
-                        item.detail.wordsList[indexCon + 1].chs &&
-                        chsFhList.indexOf(
-                          item.detail.wordsList[indexCon + 1].chs
-                        ) > -1
-                    "
+              <template
+                v-if="
+                  item.detail &&
+                    item.detail.wordsList &&
+                    item.detail.wordsList.length == 0
+                "
+              >
+                <p
+                  v-if="item.detail.sentence"
+                  :class="[
+                    'content-con',
+                    /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : ''
+                  ]"
+                  v-html="item.detail.sentence"
+                />
+              </template>
+              <template v-else>
+                <div v-if="item.detail && item.detail.resArr" class="con-box">
+                  <div
+                    v-for="(itemCon, indexCon) in item.detail.resArr"
+                    v-show="itemCon.isShow"
+                    :key="indexCon"
+                    :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
                   >
-                    <div class="synthesis-box">
-                      <div>
-                        <span
-                          v-if="itemCon.pinyin"
-                          class="pinyin"
-                          :class="[
-                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
-                          ]"
-                          >{{ itemCon.pinyin }}</span
-                        >
-                        <span
-                          class="content-con"
-                          :class="
-                            [/^[0-9]*$/.test(itemCon.chs)]
-                              ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
-                                ? 'hanzi'
-                                : 'en'
-                              : ''
-                          "
-                          >{{ itemCon.chs }}</span
+                    <template
+                      v-if="
+                        item.detail &&
+                          item.detail.wordsList &&
+                          item.detail.wordsList[indexCon + 1] &&
+                          item.detail.wordsList[indexCon + 1].chs &&
+                          chsFhList.indexOf(
+                            item.detail.wordsList[indexCon + 1].chs
+                          ) > -1
+                      "
+                    >
+                      <div class="synthesis-box">
+                        <div>
+                          <span
+                            v-if="itemCon.pinyin"
+                            class="pinyin"
+                            :class="[
+                              noFont.indexOf(itemCon.pinyin) > -1
+                                ? 'noFont'
+                                : ''
+                            ]"
+                            >{{ itemCon.pinyin }}</span
+                          >
+                          <span
+                            class="content-con"
+                            :class="
+                              [/^[0-9]*$/.test(itemCon.chs)]
+                                ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
+                                  ? 'hanzi'
+                                  : 'en'
+                                : ''
+                            "
+                            >{{ itemCon.chs }}</span
+                          >
+                        </div>
+                        <div
+                          v-if="item.detail.wordsList[indexCon + 1]"
+                          style="text-align: left"
                         >
-                      </div>
-                      <div
-                        v-if="item.detail.wordsList[indexCon + 1]"
-                        style="text-align: left"
-                      >
-                        <span
-                          v-if="item.detail.wordsList[indexCon + 1].pinyin"
-                          class="pinyin"
-                          :class="[
-                            noFont.indexOf(
+                          <span
+                            v-if="item.detail.wordsList[indexCon + 1].pinyin"
+                            class="pinyin"
+                            :class="[
+                              noFont.indexOf(
+                                item.detail.wordsList[indexCon + 1].pinyin
+                              ) > -1
+                                ? 'noFont'
+                                : ''
+                            ]"
+                            >{{
                               item.detail.wordsList[indexCon + 1].pinyin
-                            ) > -1
-                              ? 'noFont'
-                              : ''
-                          ]"
-                          >{{
-                            item.detail.wordsList[indexCon + 1].pinyin
-                          }}</span
-                        >
-                        <span
-                          class="content-con"
-                          :class="
-                            [
-                              /^[0-9]*$/.test(
-                                item.detail.wordsList[indexCon + 1].chs
-                              )
-                            ]
-                              ? /^[\u4e00-\u9fa5]/.test(
+                            }}</span
+                          >
+                          <span
+                            class="content-con"
+                            :class="
+                              [
+                                /^[0-9]*$/.test(
                                   item.detail.wordsList[indexCon + 1].chs
                                 )
-                                ? 'hanzi'
-                                : 'en'
-                              : ''
-                          "
-                          >{{ item.detail.wordsList[indexCon + 1].chs }}</span
-                        >
+                              ]
+                                ? /^[\u4e00-\u9fa5]/.test(
+                                    item.detail.wordsList[indexCon + 1].chs
+                                  )
+                                  ? 'hanzi'
+                                  : 'en'
+                                : ''
+                            "
+                            >{{ item.detail.wordsList[indexCon + 1].chs }}</span
+                          >
+                        </div>
                       </div>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <span
-                      v-if="
-                        item.detail &&
-                          !(
-                            item.detail.wordsList &&
-                            item.detail.wordsList[indexCon - 1] &&
-                            item.detail.wordsList[indexCon - 1].chs &&
-                            chsFhList.indexOf(
-                              item.detail.wordsList[indexCon - 1].chs
-                            ) == -1 &&
-                            chsFhList.indexOf(itemCon.chs) > -1
-                          ) &&
-                          itemCon.pinyin
-                      "
-                      class="pinyin"
-                      :class="[
-                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
-                      ]"
-                      >{{ itemCon.pinyin }}</span
-                    >
-                    <span
-                      v-if="
-                        item.detail &&
-                          !(
-                            item.detail.wordsList &&
-                            item.detail.wordsList[indexCon - 1] &&
-                            item.detail.wordsList[indexCon - 1].chs &&
-                            chsFhList.indexOf(
-                              item.detail.wordsList[indexCon - 1].chs
-                            ) == -1 &&
-                            chsFhList.indexOf(itemCon.chs) > -1
-                          )
-                      "
-                      class="content-con"
-                      :class="
-                        [/^[0-9]*$/.test(itemCon.chs)]
-                          ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
-                            ? 'hanzi'
-                            : 'en'
-                          : ''
-                      "
-                      >{{ itemCon.chs }}</span
-                    >
-                  </template>
+                    </template>
+                    <template v-else>
+                      <span
+                        v-if="
+                          item.detail &&
+                            !(
+                              item.detail.wordsList &&
+                              item.detail.wordsList[indexCon - 1] &&
+                              item.detail.wordsList[indexCon - 1].chs &&
+                              chsFhList.indexOf(
+                                item.detail.wordsList[indexCon - 1].chs
+                              ) == -1 &&
+                              chsFhList.indexOf(itemCon.chs) > -1
+                            ) &&
+                            itemCon.pinyin
+                        "
+                        class="pinyin"
+                        :class="[
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
+                        ]"
+                        >{{ itemCon.pinyin }}</span
+                      >
+                      <span
+                        v-if="
+                          item.detail &&
+                            !(
+                              item.detail.wordsList &&
+                              item.detail.wordsList[indexCon - 1] &&
+                              item.detail.wordsList[indexCon - 1].chs &&
+                              chsFhList.indexOf(
+                                item.detail.wordsList[indexCon - 1].chs
+                              ) == -1 &&
+                              chsFhList.indexOf(itemCon.chs) > -1
+                            )
+                        "
+                        class="content-con"
+                        :class="
+                          [/^[0-9]*$/.test(itemCon.chs)]
+                            ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
+                              ? 'hanzi'
+                              : 'en'
+                            : ''
+                        "
+                        >{{ itemCon.chs }}</span
+                      >
+                    </template>
+                  </div>
                 </div>
-              </div>
-            </template>
-            <p
-              class="NNPE-title-item-en"
-              v-html="item.en"
-              :style="{ fontSize: baseSizePhone - 2 + 'px' }"
-            />
+              </template>
+              <p
+                class="NNPE-title-item-en"
+                v-html="item.en"
+                :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -180,13 +187,13 @@
             class="btn-prev"
             :class="[preClick ? '' : 'btn-prev-disabled']"
             @click="handleNNPEprev"
-            :style="{ top: 84 + (baseSizePhone - 14) + 'px' }"
+            :style="{ top: 71 + (baseSizePhone - 14) + 'px' }"
           />
           <a
             class="btn-next"
             :class="[nextClick ? '' : 'btn-next-disabled']"
             @click="handleNNPEnext"
-            :style="{ top: 84 + (baseSizePhone - 14) + 'px' }"
+            :style="{ top: 71 + (baseSizePhone - 14) + 'px' }"
           />
         </div>
         <div
@@ -2765,8 +2772,6 @@ export default {
             JSON.stringify(item.table_list).match(/\[JUDGE##F##JUDGE\]/g)
           );
         });
-
-        console.log(this.cur.cur_fn_data);
       }
       this.$forceUpdate();
     },
@@ -3331,19 +3336,23 @@ export default {
     .classTopic-box {
       width: 100%;
       border-radius: 0 0 20px 20px;
-      margin-top: 15px;
+      margin-top: 0px;
 
       position: fixed;
       left: 0;
-      top: 64px;
+      top: 66px;
       z-index: 2;
     }
-    .NNPE-title-top {
+    .NNPE-title-bg {
+      padding-bottom: 2px;
+      height: 66px;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
-      z-index: 1;
+      z-index: 2;
+    }
+    .NNPE-title-top {
     }
     .NNPE-Book-content-inner {
       padding: 0 15px;
@@ -3360,7 +3369,7 @@ export default {
       .btn-prev,
       .btn-next {
         position: fixed;
-        top: 84px;
+        top: 71px;
         left: 0;
         z-index: 3;
         width: 30px;

src/components/Adult/phonePreview/ArticleViewChs/NormalModelChs.vue

@@ -1141,6 +1141,16 @@
         <Notecard :item="curNoteCon" :changeCard="changeCard" />
       </div>
     </template>
+    <div class="dia-article-record">
+      <Soundrecord
+        type="promax"
+        class="luyin-box"
+        :TaskModel="TaskModel"
+        :answerRecordList="curQue.Bookanswer.normalModel.recordList"
+        @handleWav="handleWav"
+        :baseSizePhone="baseSizePhone"
+      />
+    </div>
   </div>
 </template>
 
@@ -1148,6 +1158,7 @@
 import { timeStrToSen } from "../../../../utils/index";
 import AudioLine from "../AudioLine.vue";
 import Notecard from "../components/Notecard.vue";
+import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "NormalModelChs",
   props: [
@@ -1162,7 +1173,8 @@ export default {
   ],
   components: {
     AudioLine,
-    Notecard
+    Notecard,
+    Soundrecord
   },
   data() {
     return {
@@ -1560,6 +1572,10 @@ export default {
       _this.isNoteShow = isShow;
       _this.oldNoteNum = "";
       _this.noteNum = "";
+    },
+    handleWav(list, tmIndex) {
+      tmIndex = tmIndex ? tmIndex : 0;
+      this.$set(this.curQue.Bookanswer.normalModel, "recordList", list);
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -1787,6 +1803,17 @@ export default {
       background: rgba(222, 68, 68, 0.15);
     }
   }
+  .dia-article-record {
+    width: 100%;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    .luyin-box {
+      justify-content: start;
+      padding: 8px 12px;
+      height: 40px;
+      width: 280px;
+      justify-content: flex-start;
+    }
+  }
   .NNPE-details {
     clear: both;
     overflow: hidden;

src/components/Adult/phonePreview/ArticleViewChs/WordModelChs.vue

@@ -699,6 +699,16 @@
         />
       </div>
     </template>
+    <div class="dia-article-record">
+      <Soundrecord
+        @handleWav="handleWav"
+        :TaskModel="TaskModel"
+        :answerRecordList="curQue.Bookanswer.wordModel.recordList"
+        type="promax"
+        class="luyin-box"
+        :baseSizePhone="baseSizePhone"
+      />
+    </div>
   </div>
 </template>
 
@@ -706,6 +716,7 @@
 import { timeStrToSen } from "../../../../utils/index";
 import AudioLine from "../AudioLine.vue";
 import Wordcard from "../components/Wordcard.vue"; // 卡片
+import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "WordModelChs",
   props: [
@@ -722,7 +733,8 @@ export default {
   ],
   components: {
     AudioLine,
-    Wordcard
+    Wordcard,
+    Soundrecord
   },
   data() {
     return {
@@ -1100,6 +1112,10 @@ export default {
           writeModel[hz] = [answer];
         }
       }
+    },
+    handleWav(list, tmIndex) {
+      tmIndex = tmIndex ? tmIndex : 0;
+      this.$set(this.curQue.Bookanswer.wordModel, "recordList", list);
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -1280,6 +1296,17 @@ export default {
       }
     }
   }
+  .dia-article-record {
+    width: 100%;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    .luyin-box {
+      justify-content: start;
+      padding: 8px 12px;
+      height: 40px;
+      width: 150px;
+      justify-content: flex-start;
+    }
+  }
 }
 .NNPE-wordDetail {
   position: fixed;

src/components/Adult/phonePreview/ArticleViewChs/index.vue

@@ -224,7 +224,10 @@ export default {
           recordList: []
         },
         writeModel: {}, //生词/取词模式
-        practiceModel: {} //练习模式
+        practiceModel: {}, //练习模式
+        wordModel: {
+          recordList: []
+        }
       },
       tokenData: null,
       mathNum: Math.random()
@@ -604,6 +607,10 @@ export default {
     if (!this.curQue.Bookanswer) {
       let userAnswer = JSON.parse(JSON.stringify(_this.userAnswer));
       _this.$set(this.curQue, "Bookanswer", userAnswer);
+    } else {
+      if (!this.curQue.Bookanswer.hasOwnProperty("wordModel")) {
+        this.$set(this.curQue.Bookanswer, "wordModel", { recordList: [] });
+      }
     }
     _this.$nextTick(() => {
       _this.bodyLeft = _this.$refs.ArticleViewbody.getBoundingClientRect().left;