修改收藏字词一系列问题-完成

src/components/Personalcenter/Mycollect.vue

@@ -11,93 +11,40 @@
       :listCount="listCount"
       :delCount="delCount"
     />
-    <div style="width: fit-content; padding: 0 32px">
-      <el-menu
-        :default-active="activeIndex"
-        class="el-menu-demo"
-        mode="horizontal"
-        @select="handleSelect"
-      >
-        <!-- <el-menu-item index="all">全部</el-menu-item> -->
-        <el-menu-item index="book">{{ $t("Key44") }}</el-menu-item>
-        <el-menu-item index="teaching">{{ $t("Key62") }}</el-menu-item>
-        <el-menu-item index="video" v-if="userType != 'STUDENT'">{{
-          $t("Key74")
-        }}</el-menu-item>
-        <el-menu-item index="live" v-if="userType != 'STUDENT'">{{
-          $t("Key75")
-        }}</el-menu-item>
-        <el-menu-item index="jiaoyan" v-if="userType != 'STUDENT'">{{
-          $t("Key214")
-        }}</el-menu-item>
-        <!-- 字词 -->
-        <el-menu-item index="hanzi">{{ $t("Key476") }}</el-menu-item>
-        <!-- 句子 -->
-        <el-menu-item index="sentence">{{ $t("Key477") }}</el-menu-item>
-      </el-menu>
-    </div>
-    <div class="list" v-loading="loading">
-      <template v-if="!isEmpty">
-        <div class="main" v-for="(item, index) in list" :key="'order' + index">
-          <div class="main-content" v-if="item.goods_type == 501">
-            <div
-              v-if="isShowCheckBox"
-              class="checkBox"
-              @click.stop="selecedGoods(item, index)"
-            >
-              <img
-                :src="item.checked ? checked_img : check_img"
-                class="check-img"
-              />
-            </div>
-            <template v-if="/^[\u4e00-\u9fa5]/.test(item.new_word.new_word)">
-              <Hanzi
-                :item="item"
-                :index="index"
-                @getMyCollectionList="getMyCollectionList"
-              />
-            </template>
-            <template v-else>
-              <Enword
-                :item="item"
-                :index="index"
-                @getMyCollectionList="getMyCollectionList"
-              />
-            </template>
-          </div>
-          <div class="main-content" v-else-if="item.goods_type == 502">
-            <div
-              v-if="isShowCheckBox"
-              class="checkBox"
-              @click.stop="selecedGoods(item, index)"
-              style="height: 22px; margin-top: 5px"
-            >
-              <img
-                :src="item.checked ? checked_img : check_img"
-                class="check-img"
-              />
-            </div>
-            <template
-              v-if="/^[\u4e00-\u9fa5]/.test(item.sentence.sentence_text)"
-            >
-              <Sentence
-                :key="item.id"
-                :sItem="item"
-                :index="index"
-                @getMyCollectionList="getMyCollectionList"
-              />
-            </template>
-            <template v-else>
-              <SentenceEn
-                :key="item.id"
-                :sItem="item"
-                :index="index"
-                @getMyCollectionList="getMyCollectionList"
-              />
-            </template>
-          </div>
-          <div class="main-content" v-else>
-            <div class="main-content-left" @click.stop="jump(item)">
+    <div v-loading="loading">
+      <div style="width: fit-content; padding: 0 32px">
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="handleSelect"
+        >
+          <!-- <el-menu-item index="all">全部</el-menu-item> -->
+          <el-menu-item index="book">{{ $t("Key44") }}</el-menu-item>
+          <el-menu-item index="teaching">{{ $t("Key62") }}</el-menu-item>
+          <el-menu-item index="video" v-if="userType != 'STUDENT'">{{
+            $t("Key74")
+          }}</el-menu-item>
+          <el-menu-item index="live" v-if="userType != 'STUDENT'">{{
+            $t("Key75")
+          }}</el-menu-item>
+          <el-menu-item index="jiaoyan" v-if="userType != 'STUDENT'">{{
+            $t("Key214")
+          }}</el-menu-item>
+          <!-- 字词 -->
+          <el-menu-item index="hanzi">{{ $t("Key476") }}</el-menu-item>
+          <!-- 句子 -->
+          <el-menu-item index="sentence">{{ $t("Key477") }}</el-menu-item>
+        </el-menu>
+      </div>
+      <div class="list">
+        <template v-if="!isEmpty">
+          <div
+            class="main"
+            v-for="(item, index) in list"
+            :key="'order' + index"
+          >
+            <div class="main-content" v-if="item.goods_type == 501">
               <div
                 v-if="isShowCheckBox"
                 class="checkBox"
@@ -108,99 +55,161 @@
                   class="check-img"
                 />
               </div>
+              <template v-if="/^[\u4e00-\u9fa5]/.test(item.new_word.new_word)">
+                <Hanzi
+                  :item="item"
+                  :index="index"
+                  @getMyCollectionList="getMyCollectionList"
+                />
+              </template>
+              <template v-else>
+                <Enword
+                  :item="item"
+                  :index="index"
+                  @getMyCollectionList="getMyCollectionList"
+                />
+              </template>
+            </div>
+            <div class="main-content" v-else-if="item.goods_type == 502">
               <div
-                :class="[
-                  'coverUrl',
-                  item.goods_type != 401 ? 'coverUrl-border' : '',
-                ]"
+                v-if="isShowCheckBox"
+                class="checkBox"
+                @click.stop="selecedGoods(item, index)"
+                style="height: 22px; margin-top: 5px"
               >
-                <template v-if="item.goods_type != 401">
-                  <img :src="item.goods_picture_url" />
-                </template>
-                <template v-else>
-                  <template
-                    v-if="
-                      item.goods_detail_type == 'doc' ||
-                      item.goods_detail_type == 'docx'
-                    "
-                  >
-                    <img src="../../assets/doc-Q.png" />
-                  </template>
-                  <template
-                    v-if="
-                      item.goods_detail_type == 'xls' ||
-                      item.goods_detail_type == 'xlsx'
-                    "
-                  >
-                    <img src="../../assets/xls-Q.png" />
-                  </template>
-                  <template v-if="item.goods_detail_type == 'pdf'">
-                    <img src="../../assets/pdf-Q.png" />
+                <img
+                  :src="item.checked ? checked_img : check_img"
+                  class="check-img"
+                />
+              </div>
+              <template
+                v-if="/^[\u4e00-\u9fa5]/.test(item.sentence.sentence_text)"
+              >
+                <Sentence
+                  :key="item.id"
+                  :sItem="item"
+                  :index="index"
+                  @getMyCollectionList="getMyCollectionList"
+                />
+              </template>
+              <template v-else>
+                <SentenceEn
+                  :key="item.id"
+                  :sItem="item"
+                  :index="index"
+                  @getMyCollectionList="getMyCollectionList"
+                />
+              </template>
+            </div>
+            <div class="main-content" v-else>
+              <div class="main-content-left" @click.stop="jump(item)">
+                <div
+                  v-if="isShowCheckBox"
+                  class="checkBox"
+                  @click.stop="selecedGoods(item, index)"
+                >
+                  <img
+                    :src="item.checked ? checked_img : check_img"
+                    class="check-img"
+                  />
+                </div>
+                <div
+                  :class="[
+                    'coverUrl',
+                    item.goods_type != 401 ? 'coverUrl-border' : '',
+                  ]"
+                >
+                  <template v-if="item.goods_type != 401">
+                    <img :src="item.goods_picture_url" />
                   </template>
+                  <template v-else>
+                    <template
+                      v-if="
+                        item.goods_detail_type == 'doc' ||
+                        item.goods_detail_type == 'docx'
+                      "
+                    >
+                      <img src="../../assets/doc-Q.png" />
+                    </template>
+                    <template
+                      v-if="
+                        item.goods_detail_type == 'xls' ||
+                        item.goods_detail_type == 'xlsx'
+                      "
+                    >
+                      <img src="../../assets/xls-Q.png" />
+                    </template>
+                    <template v-if="item.goods_detail_type == 'pdf'">
+                      <img src="../../assets/pdf-Q.png" />
+                    </template>
 
-                  <template
-                    v-if="
-                      item.goods_detail_type == 'ppt' ||
-                      item.goods_detail_type == 'pptx'
-                    "
-                  >
-                    <img src="../../assets/ppt-Q.png" />
+                    <template
+                      v-if="
+                        item.goods_detail_type == 'ppt' ||
+                        item.goods_detail_type == 'pptx'
+                      "
+                    >
+                      <img src="../../assets/ppt-Q.png" />
+                    </template>
                   </template>
-                </template>
-              </div>
-              <div class="order-infor">
-                <p class="name">{{ item.goods_name }}</p>
-                <Goodstype :item="item" />
-                <p class="author">{{ item.creator_name }}</p>
+                </div>
+                <div class="order-infor">
+                  <p class="name">{{ item.goods_name }}</p>
+                  <Goodstype :item="item" />
+                  <p class="author">{{ item.creator_name }}</p>
+                </div>
               </div>
-            </div>
-            <div class="main-content-right">
-              <p
-                :class="[
-                  'collectTime',
-                  language_type == 'AR' ? 'textLeft' : '',
-                ]"
-              >
-                {{ item.create_time }}
-              </p>
+              <div class="main-content-right">
+                <p
+                  :class="[
+                    'collectTime',
+                    language_type == 'AR' ? 'textLeft' : '',
+                  ]"
+                >
+                  {{ item.create_time }}
+                </p>
 
-              <div class="order-btn">
-                <div class="price">
-                  ¥<span
-                    class="price_num"
-                    v-html="changePrice(item.goods_price, 24, 16)"
-                  ></span>
+                <div class="order-btn">
+                  <div class="price">
+                    ¥<span
+                      class="price_num"
+                      v-html="changePrice(item.goods_price, 24, 16)"
+                    ></span>
+                  </div>
+                  <!-- 购买 -->
+                  <button
+                    class="goPay"
+                    v-if="item.goods_is_buy == 'false'"
+                    @click="reOrder(item)"
+                  >
+                    {{ item.goods_type == 201 ? "加入课程" : $t("Key72") }}
+                  </button>
+                  <!-- 已购买 -->
+                  <button
+                    class="goPay hasPay"
+                    v-if="item.goods_is_buy == 'true'"
+                  >
+                    {{ $t("Key73") }}
+                  </button>
                 </div>
-                <!-- 购买 -->
-                <button
-                  class="goPay"
-                  v-if="item.goods_is_buy == 'false'"
-                  @click="reOrder(item)"
-                >
-                  {{ item.goods_type == 201 ? "加入课程" : $t("Key72") }}
-                </button>
-                <!-- 已购买 -->
-                <button class="goPay hasPay" v-if="item.goods_is_buy == 'true'">
-                  {{ $t("Key73") }}
-                </button>
               </div>
             </div>
           </div>
-        </div>
-        <div class="paging">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :current-page="pageNum"
-            :total="total"
-            :page-size="pageSize"
-            @current-change="changecurrentPage"
-          />
-        </div>
-      </template>
-      <template v-else>
-        <Empty :navType="navType" />
-      </template>
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :current-page="pageNum"
+              :total="total"
+              :page-size="pageSize"
+              @current-change="changecurrentPage"
+            />
+          </div>
+        </template>
+        <template v-else>
+          <Empty :navType="navType" />
+        </template>
+      </div>
     </div>
     <el-dialog
       class="orderDialog"
@@ -404,6 +413,7 @@ export default {
     },
     handleSelect(val) {
       let _this = this;
+
       _this.activeIndex = val;
       _this.pageNum = 1;
       _this.goods_name = "";

src/components/common/AudioRed.vue

@@ -36,7 +36,7 @@ export default {
       : _this.voicePauseSrc;
 
     _this.audio.addEventListener("play", function () {
-      _this.voiceSrc = _this.voicePauseSrc;
+      _this.voiceSrc = _this.voicePlaySrc;
     });
     _this.audio.addEventListener("pause", function () {
       _this.voiceSrc = _this.voicePauseSrc;

src/components/common/Enword.vue

@@ -5,33 +5,91 @@
       <span class="word">{{ item.new_word.new_word }}</span>
       <div
         class="enword-main"
-        v-if="item.new_word.pinyin || item.new_word.audio_file_url"
+        v-if="
+          item.new_word.pinyin || item.new_word.audio_file_url || dictDetail
+        "
       >
         <span class="pron" v-if="item.new_word.pinyin"
           >/{{ item.new_word.pinyin }}/</span
         >
-        <Audio :mp3="item.new_word.audio_file_url" class="enword-voice" />
+        <div class="mp3-btn" v-if="item.new_word.audio_file_url">
+          <AudioLineSentence
+            :key="'Hanzi' + item.id"
+            :mp3="item.new_word.audio_file_url"
+            :getCurTime="getCurTime"
+            ref="audioLineSent"
+            :audioId="'HanziAudioId' + item.id"
+            :stopAudio="stopAudio"
+            :width="120"
+            :hideSlider="true"
+            :bg="item.new_word.audio_begin_time"
+            :ed="item.new_word.audio_end_time"
+          />
+        </div>
+        <template v-else-if="dictDetail">
+          <div class="yinpin">
+            <div class="yinpin-box">
+              <!-- 英 -->
+              <span>{{ $t("Key671") }}</span>
+              <span class="pron" v-if="dictDetail['uk-phonetic']">
+                /{{ dictDetail["uk-phonetic"] }}/</span
+              >
+              <div class="mp3-btn" v-if="dictDetail['uk-sound']">
+                <Audio :mp3="dictDetail['uk-sound']" class="enword-voice" />
+              </div>
+            </div>
+            <div>
+              <!-- 美 -->
+              <span>{{ $t("Key672") }}</span>
+              <span class="pron" v-if="dictDetail['us-phonetic']">
+                /{{ dictDetail["us-phonetic"] }}/</span
+              >
+              <div class="mp3-btn" v-if="dictDetail['us-sound']">
+                <Audio :mp3="dictDetail['us-sound']" class="enword-voice" />
+              </div>
+            </div>
+          </div>
+        </template>
       </div>
-      <div
-        class="enword-inpt"
-        v-for="(fy, i) in item.new_word.definition_list"
-        :key="i"
+      <template
+        v-if="
+          item.new_word.definition_list &&
+          item.new_word.definition_list.length > 0
+        "
       >
-        <i v-if="fy.indexOf('. ') > -1">
-          {{
-            fy.substring(0, fy.indexOf(". ") > -1 ? fy.indexOf(". ") + 2 : 0)
-          }}
-        </i>
-        <div>
-          {{
-            fy.substring(
-              fy.indexOf(". ") > -1 ? fy.indexOf(". ") + 2 : 0,
-              fy.length
-            )
-          }}
+        <div
+          class="enword-inpt"
+          v-for="(fy, i) in item.new_word.definition_list"
+          :key="i"
+        >
+          <i v-if="fy.indexOf('. ') > -1">
+            {{
+              fy.substring(0, fy.indexOf(". ") > -1 ? fy.indexOf(". ") + 2 : 0)
+            }}
+          </i>
+          <div>
+            {{
+              fy.substring(
+                fy.indexOf(". ") > -1 ? fy.indexOf(". ") + 2 : 0,
+                fy.length
+              )
+            }}
+          </div>
         </div>
+      </template>
+      <template v-else-if="dictDetail && dictDetail.part">
+        <div class="enword-inpt">
+          <i>
+            {{ dictDetail.part[0].part }}
+          </i>
+          <div>
+            {{ dictDetail.part[0].exp }}
+          </div>
+        </div>
+      </template>
+      <div class="resource" v-if="item.new_word.source_courseware_name_path">
+        {{ item.new_word.source_courseware_name_path }}
       </div>
-      <div class="resource" v-if="item.resource">{{ item.resource }}</div>
       <div class="create_time" v-if="item.create_time">
         {{ item.create_time }}
       </div>
@@ -56,15 +114,46 @@
 </template>
 
 <script>
+import AudioLineSentence from "./AudioLineSentence.vue";
 import Audio from "./AudioRed.vue";
 import WordPhraseDetailEn from "./WordPhraseDetailEn.vue";
 import { getLearnWebContent } from "@/api/ajax";
 export default {
-  components: { Audio, WordPhraseDetailEn },
+  components: { Audio, WordPhraseDetailEn, AudioLineSentence },
   props: ["item", "themeColor"],
   data() {
     return {
       isIntpShow: false,
+      stopAudio: false,
+      curTime: 0,
+      dictDetail: null,
+      cixingList: [
+        "n.",
+        "pron.",
+        "art.",
+        "num.",
+        "adj.",
+        "a.",
+        "v.",
+        "conj.",
+        "prep.",
+        "int.",
+        "vt.",
+        "vi.",
+        "abbr.",
+        "vi. & vt.",
+        "n. & vt.",
+        "( pl. shelves) n.",
+        "ad.",
+        "n.&a.",
+        "n. & a.",
+        "n.&v.",
+        "n. & v.",
+        "npl.",
+        "v. & n.",
+        "a. & ad.",
+        "adv.",
+      ],
     };
   },
   computed: {},
@@ -88,11 +177,51 @@ export default {
     changeIntpShow() {
       this.isIntpShow = false;
     },
+    getCurTime(curTime) {
+      let _this = this;
+      _this.curTime = curTime * 1000;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    let _this = this;
+    if (_this.item) {
+      let dict = _this.item.new_word.definition_dictionary_json
+        ? JSON.parse(_this.item.new_word.definition_dictionary_json)
+        : null;
+      _this.dictDetail = dict.data;
+      let arr = [];
+      if (this.dictDetail && this.dictDetail.explains) {
+        this.dictDetail.explains.forEach((it) => {
+          let obj = {
+            part: it.substring(
+              0,
+              it.indexOf(". ") > -1 &&
+                this.cixingList.indexOf(
+                  it.substring(0, it.lastIndexOf(". ") + 1)
+                ) > -1
+                ? it.lastIndexOf(". ") + 2
+                : 0
+            ),
+            exp: it.substring(
+              it.indexOf(". ") > -1 &&
+                this.cixingList.indexOf(
+                  it.substring(0, it.lastIndexOf(". ") + 1)
+                ) > -1
+                ? it.lastIndexOf(". ") + 2
+                : 0,
+              it.length
+            ),
+          };
+          arr.push(obj);
+        });
+        this.dictDetail.part = arr;
+        console.log(this.dictDetail);
+      }
+    }
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -107,6 +236,7 @@ export default {
 .enword {
   width: 100%;
   display: flex;
+  align-items: stretch;
   .practiceBox {
     position: fixed;
     width: 100%;
@@ -138,12 +268,12 @@ export default {
   }
   .enword-main {
     display: flex;
+    align-items: center;
     margin-bottom: 8px;
     .pron {
       font-size: 16px;
       line-height: 24px;
       color: rgba(0, 0, 0, 0.85);
-      margin-right: 12px;
     }
     .enword-voice {
       width: 16px;
@@ -170,10 +300,14 @@ export default {
     line-height: 22px;
     margin-bottom: 8px;
   }
+  .create_time {
+    margin-bottom: 0;
+  }
 }
 .enword-top {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   text-align: center;
 }
@@ -188,7 +322,6 @@ export default {
   border: 1px solid rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   border-radius: 4px;
-  margin-bottom: 38px;
   > .coll-icon {
     width: 16px;
     height: 16px;
@@ -210,4 +343,19 @@ export default {
   opacity: 0.5;
   cursor: pointer;
 }
+.yinpin {
+  display: flex;
+  align-items: center;
+  > div {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    .pron {
+      margin-left: 12px;
+    }
+  }
+}
+.mp3-btn {
+  margin-left: 12px;
+}
 </style>

src/components/common/Hanzi.vue

@@ -39,22 +39,45 @@
           <span class="pinyin" v-if="item.new_word.pinyin">{{
             item.new_word.pinyin
           }}</span>
-          <template>
-            <Audio
+          <template v-if="item.new_word.audio_file_url">
+            <AudioLineSentence
+              :key="'Hanzi' + index"
               :mp3="item.new_word.audio_file_url"
-              :themeColor="themeColor"
+              :getCurTime="getCurTime"
+              ref="audioLineSent"
+              :audioId="'HanziAudioId' + index"
+              :stopAudio="stopAudio"
+              :width="120"
+              :hideSlider="true"
+              :bg="item.new_word.audio_begin_time"
+              :ed="item.new_word.audio_end_time"
             />
           </template>
+
+          <template v-else-if="mp3Url">
+            <Audio :mp3="mp3Url" :themeColor="themeColor" />
+          </template>
         </div>
       </div>
-      <div
-        class="def-chs"
-        v-for="(defItem, defIndex) in item.new_word.definition_list"
-        :key="'defIndex' + defIndex"
+      <template
+        v-if="
+          item.new_word.definition_list &&
+          item.new_word.definition_list.length > 0
+        "
       >
-        {{ defItem }}
+        <div
+          class="def-chs"
+          v-for="(defItem, defIndex) in item.new_word.definition_list"
+          :key="'defIndex' + defIndex"
+          v-html="defItem"
+        ></div>
+      </template>
+      <template v-else-if="def_result">
+        <div class="def-chs">{{ def_result }}</div>
+      </template>
+      <div class="resource" v-if="item.new_word.source_courseware_name_path">
+        {{ item.new_word.source_courseware_name_path }}
       </div>
-      <div class="resource" v-if="item.resource">{{ item.resource }}</div>
       <div class="create_time" v-if="item.create_time">
         {{ item.create_time }}
       </div>
@@ -82,18 +105,26 @@
 </template>
 
 <script>
+import AudioLineSentence from "./AudioLineSentence.vue";
 import Strockplayredline from "./Strockplayredline.vue";
 import Audio from "./AudioRed.vue";
 import { getLearnWebContent } from "@/api/ajax";
 import WordPhraseDetail from "./WordPhraseDetail.vue";
 export default {
   name: "Hanzi",
-  components: { Strockplayredline, Audio, WordPhraseDetail },
+  components: { Strockplayredline, Audio, WordPhraseDetail, AudioLineSentence },
   props: ["item", "index"],
   data() {
     return {
       themeColor: "red",
       isIntpShow: false,
+      stopAudio: false,
+      curTime: 0,
+      mp3Url: "",
+      paraphrase: [],
+      isHasValue2: "",
+      dataDetail: null,
+      def_result: "",
     };
   },
   computed: {},
@@ -118,11 +149,87 @@ export default {
     changeIntpShow() {
       this.isIntpShow = false;
     },
+    getCurTime(curTime) {
+      let _this = this;
+      _this.curTime = curTime * 1000;
+    },
+    // 处理数据
+    handleChineseDetail() {
+      let _this = this;
+      _this.paraphrase = [];
+      _this.isHasValue2 = "";
+      _this.def_result = "";
+      _this.dataDetail.forEach((item) => {
+        if (item.request.queryType == "entity") {
+          // 读音
+          item.response.entity.forEach((items) => {
+            items.attrs.forEach((itemss) => {
+              if (itemss.key == "pronunciation") {
+                // 音频
+
+                _this.mp3Url = itemss.objects[0]["@value"]
+                  ? itemss.objects[0]["@value"]
+                  : "";
+              } else if (itemss.key == "definition") {
+                // 释义
+                _this.paraphrase = itemss.objects;
+                for (let i = 0; i < _this.paraphrase.length; i++) {
+                  if (_this.paraphrase[i]["@definitionWithSpell"]) {
+                    _this.isHasValue2 = "definitionWithSpell";
+                    //遍历一个对象
+                    for (let key in _this.paraphrase[i][
+                      "@definitionWithSpell"
+                    ]) {
+                      //遍历key
+                      let def_arr =
+                        _this.paraphrase[i]["@definitionWithSpell"][key];
+                      for (let j = 0; j < def_arr.length; j++) {
+                        if (def_arr[j]) {
+                          _this.def_result = def_arr[j];
+                          return false;
+                        }
+                      }
+                    }
+                  } else if (_this.paraphrase[i]["@definitions"]) {
+                    _this.isHasValue2 = "definitions";
+                    for (
+                      let m = 0;
+                      m < _this.paraphrase[i]["@definitions"].length;
+                      m++
+                    ) {
+                      if (_this.paraphrase[i]["@definitions"][m]) {
+                        _this.def_result =
+                          _this.paraphrase[i]["@definitions"][m];
+                        return false;
+                      }
+                    }
+                  } else {
+                    _this.def_result = _this.paraphrase[i]["@value"];
+                  }
+                }
+              }
+            });
+          });
+        }
+      });
+      console.log(_this.isHasValue2);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    let _this = this;
+    if (_this.item) {
+      let dict = _this.item.new_word.definition_dictionary_json
+        ? JSON.parse(_this.item.new_word.definition_dictionary_json)
+        : null;
+      _this.dataDetail = dict.data.result;
+      if (_this.dataDetail) {
+        _this.handleChineseDetail();
+      }
+    }
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -138,7 +245,7 @@ export default {
   width: 100%;
   display: flex;
   justify-content: flex-start;
-  align-items: center;
+  align-items: stretch;
   .practiceBox {
     position: fixed;
     width: 100%;
@@ -213,6 +320,7 @@ export default {
       color: rgba(0, 0, 0, 0.85);
       margin-bottom: 8px;
       opacity: 0.5;
+      max-width: 560px;
     }
     .def-en {
       font-size: 14px;
@@ -238,7 +346,7 @@ export default {
   .right {
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     height: 100%;
     .cancle-coll {
@@ -252,7 +360,6 @@ export default {
       border: 1px solid rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
       border-radius: 4px;
-      margin-bottom: 38px;
       > .coll-icon {
         width: 16px;
         height: 16px;

src/components/common/Intp.vue

@@ -73,7 +73,7 @@
     <template v-if="activeIndex == '2'">
       <div class="bwc-intp">
         <!-- 近义词 -->
-        <h1 v-if="synonymList.length > 0">{{$t("Key683")}}</h1>
+        <h1 v-if="synonymList.length > 0">{{ $t("Key683") }}</h1>
         <ul class="synonym">
           <li
             v-for="(itemss, indexss) in synonymList"
@@ -84,7 +84,7 @@
           </li>
         </ul>
         <!-- 反义词 -->
-        <h1 v-if="antonymList.length > 0">{{$t("Key684")}}</h1>
+        <h1 v-if="antonymList.length > 0">{{ $t("Key684") }}</h1>
         <ul class="synonym">
           <li
             v-for="(itemss, indexss) in antonymList"
@@ -182,7 +182,6 @@ export default {
             items.attrs.forEach((itemss) => {
               if (itemss.key == "pronunciation") {
                 // 音频
-
                 _this.mp3Url = itemss.objects[0]["@value"]
                   ? itemss.objects[0]["@value"]
                   : "";

src/components/common/WordPhraseDetail.vue

@@ -69,20 +69,28 @@
               <span class="pinyintext">
                 {{ detail.new_word.pinyin.toLowerCase() }}</span
               >
-              <template
-                v-if="
-                  detail.new_word.mp3_list &&
-                  detail.new_word.mp3_list[0] &&
-                  detail.new_word.mp3_list[0].id
-                "
-              >
+              <!-- <template v-if="detail.new_word.audio_file_url">
                 <Audio
                   :mp3="detail.new_word.mp3_list[0].id"
                   :themeColor="themeColor"
                 />
+              </template> -->
+              <template v-if="detail.new_word.audio_file_url">
+                <AudioLineSentence
+                  :key="'Hanzidetail' + collId"
+                  :mp3="detail.new_word.audio_file_url"
+                  :getCurTime="getCurTime"
+                  ref="audioLineSent"
+                  :audioId="'HanzidetailAudioId' + collId"
+                  :stopAudio="stopAudio"
+                  :width="120"
+                  :hideSlider="true"
+                  :bg="detail.new_word.audio_begin_time"
+                  :ed="detail.new_word.audio_end_time"
+                />
               </template>
-              <template v-else-if="detail.new_word.mp3Url">
-                <Audio :mp3="detail.new_word.mp3Url" :themeColor="themeColor" />
+              <template v-else-if="mp3Url">
+                <Audio :mp3="mp3Url" :themeColor="themeColor" />
               </template>
             </div>
             <p
@@ -121,7 +129,7 @@
           <div v-if="list2 && list2.length > 0" v-loading="loading2">
             <div class="topTitle">
               <!-- 本书例句 -->
-              <span>{{$t("Key669")}}（{{ list2.length }}）</span>
+              <span>{{ $t("Key669") }}（{{ list2.length }}）</span>
               <span @click="handleChangeTab('wordShow2')"
                 >{{ wordShow2 ? $t("Key531") : $t("Key530") }}
                 <img
@@ -184,6 +192,7 @@
 import Strockplayredline from "./Strockplayredline.vue";
 import Audio from "./AudioRed.vue";
 import Intp from "./Intp.vue";
+import AudioLineSentence from "./AudioLineSentence.vue";
 import { getBookWebContent, getLearnWebContent } from "@/api/ajax";
 
 export default {
@@ -192,6 +201,7 @@ export default {
     Strockplayredline,
     Audio,
     Intp,
+    AudioLineSentence,
   },
   props: [
     "closeWord",
@@ -219,6 +229,10 @@ export default {
       loading2: false,
       loading3: false,
       detail: null,
+      dataDetail: null, //百度汉语详情
+      mp3Url: "",
+      stopAudio: false,
+      curTime: "",
     };
   },
   //计算属性 类似于data概念
@@ -363,9 +377,41 @@ export default {
       getLearnWebContent(Mname, data).then((res) => {
         this.loading = false;
         this.detail = res;
+        if (this.detail) {
+          let definition_dictionary_json =
+            this.detail.new_word.definition_dictionary_json;
+          let dict = definition_dictionary_json
+            ? JSON.parse(definition_dictionary_json)
+            : null;
+          this.dataDetail = dict.data.result;
+          this.handleChineseDetail();
+        }
         this.viewIntp();
       });
     },
+    // 处理数据
+    handleChineseDetail() {
+      let _this = this;
+      _this.dataDetail.forEach((item) => {
+        if (item.request.queryType == "entity") {
+          // 读音
+          item.response.entity.forEach((items) => {
+            items.attrs.forEach((itemss) => {
+              if (itemss.key == "pronunciation") {
+                // 音频
+                _this.mp3Url = itemss.objects[0]["@value"]
+                  ? itemss.objects[0]["@value"]
+                  : "";
+              }
+            });
+          });
+        }
+      });
+    },
+    getCurTime(curTime) {
+      let _this = this;
+      _this.curTime = curTime * 1000;
+    },
     initData() {
       this.getMyCollection();
     },

src/components/common/WordPhraseDetailEn.vue

@@ -283,6 +283,33 @@ export default {
       loading: false,
       detail: null,
       dictDetail: null,
+      cixingList: [
+        "n.",
+        "pron.",
+        "art.",
+        "num.",
+        "adj.",
+        "a.",
+        "v.",
+        "conj.",
+        "prep.",
+        "int.",
+        "vt.",
+        "vi.",
+        "abbr.",
+        "vi. & vt.",
+        "n. & vt.",
+        "( pl. shelves) n.",
+        "ad.",
+        "n.&a.",
+        "n. & a.",
+        "n.&v.",
+        "n. & v.",
+        "npl.",
+        "v. & n.",
+        "a. & ad.",
+        "adv.",
+      ],
     };
   },
   // 计算属性 类似于data概念
@@ -458,6 +485,33 @@ export default {
         if (res.new_word.definition_dictionary_json) {
           let dictDetail = JSON.parse(res.new_word.definition_dictionary_json);
           this.dictDetail = dictDetail.data;
+          let arr = [];
+          if (this.dictDetail && this.dictDetail.explains) {
+            this.dictDetail.explains.forEach((it) => {
+              let obj = {
+                part: it.substring(
+                  0,
+                  it.indexOf(". ") > -1 &&
+                    this.cixingList.indexOf(
+                      it.substring(0, it.lastIndexOf(". ") + 1)
+                    ) > -1
+                    ? it.lastIndexOf(". ") + 2
+                    : 0
+                ),
+                exp: it.substring(
+                  it.indexOf(". ") > -1 &&
+                    this.cixingList.indexOf(
+                      it.substring(0, it.lastIndexOf(". ") + 1)
+                    ) > -1
+                    ? it.lastIndexOf(". ") + 2
+                    : 0,
+                  it.length
+                ),
+              };
+              arr.push(obj);
+            });
+            this.dictDetail.part = arr;
+          }
           console.log(this.dictDetail);
         }
         this.viewIntp();

vue.config.js

@@ -42,8 +42,8 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://gcls.utschool.cn/`,
-        //target: `https://gcls.helxsoft.cn/`,
+        //target: `http://gcls.utschool.cn/`,
+        target: `https://gcls.helxsoft.cn/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''