Preview.vue

src/components/Adult/Preview.vue

@@ -13,7 +13,13 @@
           :key="index"
           class="NNPE-title-item"
         >
-          <template v-if="item.detail.wordsList.length == 0">
+          <template
+            v-if="
+              item.detail &&
+              item.detail.wordsList &&
+              item.detail.wordsList.length == 0
+            "
+          >
             <p
               v-if="item.detail.sentence"
               :class="[
@@ -21,11 +27,10 @@
                 /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : '',
               ]"
               v-html="item.detail.sentence"
-            >
-            </p>
+            ></p>
           </template>
           <template v-else>
-            <div class="con-box">
+            <div class="con-box" v-if="item.detail && item.detail.resArr">
               <div
                 v-for="(itemCon, indexCon) in item.detail.resArr"
                 v-show="itemCon.isShow"
@@ -34,9 +39,12 @@
               >
                 <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
+                    chsFhList.indexOf(item.detail.wordsList[indexCon + 1].chs) >
+                      -1
                   "
                 >
                   <div class="synthesis-box">
@@ -50,7 +58,10 @@
                       >
                       <span class="hanzi content-con">{{ itemCon.chs }}</span>
                     </div>
-                    <div style="text-align: left">
+                    <div
+                      style="text-align: left"
+                      v-if="item.detail.wordsList[indexCon + 1]"
+                    >
                       <span
                         class="pinyin"
                         :class="[
@@ -105,12 +116,19 @@
     </div>
     <div v-if="cur" class="NNPE-Book-content-inner">
       <div v-for="(item, index) in cur.cur_fn_data" :key="index">
-        <div class="title-box" v-if="item.number||item.z_title||item.f_title">
-            <b v-if="item.number">{{ item.number }}</b>
-            <div class="title-box-right">
-                <h2 v-if="item.z_title" v-html="item.z_title"></h2>
-                <h3 v-if="item.f_title" v-html="item.f_title" :style="{'marginTop':item.z_title?'8px':'0'}"></h3>
-            </div>
+        <div
+          class="title-box"
+          v-if="item.number || item.z_title || item.f_title"
+        >
+          <b v-if="item.number">{{ item.number }}</b>
+          <div class="title-box-right">
+            <h2 v-if="item.z_title" v-html="item.z_title"></h2>
+            <h3
+              v-if="item.f_title"
+              v-html="item.f_title"
+              :style="{ marginTop: item.z_title ? '8px' : '0' }"
+            ></h3>
+          </div>
         </div>
         <div
           :class="['NNPE-tableList', item.is_bg ? 'NNPE-tableList-hasBg' : '']"
@@ -581,6 +599,7 @@ export default {
     },
     initContextData() {
       const _this = this;
+      console.log(_this.context);
       _this.contextData = JSON.parse(JSON.stringify(_this.context));
       _this.queIndex = 0;
       _this.NNPENewWordList = [];
@@ -740,12 +759,12 @@ export default {
         line-height: 18px;
         font-family: "robot";
       }
-      .NNPE-title-item-en{
-          font-weight: normal;
-          line-height: 12px;
-          font-family: "robot";
-          font-size: 12px;
-          margin: 0;
+      .NNPE-title-item-en {
+        font-weight: normal;
+        line-height: 12px;
+        font-family: "robot";
+        font-size: 12px;
+        margin: 0;
       }
       .con-box {
         display: flex;
@@ -826,41 +845,40 @@ export default {
     padding: 0 40px;
     > div {
       padding-top: 32px;
-      .title-box{
-          display: flex;
-          margin-bottom: 24px;
-          b {
-            min-width: 39px;
-            height: 24px;
-            background: #e35454;
-            border-radius: 8px;
-            color: #ffffff;
-            font-family: "robot";
-            display: inline-block;
-            text-align: center;
-            font-size: 16px;
-            line-height: 150%;
-            margin-right: 12px;
-            padding: 0 4px;
-          }
-          h2 {
-            color: #e35454;
-            font-size: 16px;
-            line-height: 150%;
-            font-weight: bold;
-            margin: 0;
+      .title-box {
+        display: flex;
+        margin-bottom: 24px;
+        b {
+          min-width: 39px;
+          height: 24px;
+          background: #e35454;
+          border-radius: 8px;
+          color: #ffffff;
+          font-family: "robot";
+          display: inline-block;
+          text-align: center;
+          font-size: 16px;
+          line-height: 150%;
+          margin-right: 12px;
+          padding: 0 4px;
         }
-          h3 {
-            color: #000000;
-            font-size: 16px;
-            line-height: 150%;
-            font-weight: normal;
-            margin: 0;
-            white-space: pre-wrap;
-            word-break: break-word;
+        h2 {
+          color: #e35454;
+          font-size: 16px;
+          line-height: 150%;
+          font-weight: bold;
+          margin: 0;
+        }
+        h3 {
+          color: #000000;
+          font-size: 16px;
+          line-height: 150%;
+          font-weight: normal;
+          margin: 0;
+          white-space: pre-wrap;
+          word-break: break-word;
         }
       }
-      
     }
     .NNPE-tableList {
       background: #fff;
@@ -926,14 +944,14 @@ export default {
   }
   .NNPE-Book-content-inner {
     > div {
-        .title-box{
-            b {
-                background: #24b99e;
-            }
-            h2 {
-                color: #24b99e;
-            }
+      .title-box {
+        b {
+          background: #24b99e;
         }
+        h2 {
+          color: #24b99e;
+        }
+      }
     }
   }
 }
@@ -964,14 +982,14 @@ export default {
   }
   .NNPE-Book-content-inner {
     > div {
-      .title-box{
-            b {
-                background: #bd8865;
-            }
-            h2 {
-                color: #bd8865;
-            }
+      .title-box {
+        b {
+          background: #bd8865;
         }
+        h2 {
+          color: #bd8865;
+        }
+      }
     }
   }
 }