单词卡片 详情使用文本转语音文件接口生成音频

src/components/Adult/preview/components/Intp.vue

@@ -119,7 +119,7 @@
 <script>
 import Audio from "./AudioRed.vue";
 import Strockplayredline from "./Strockplayredline.vue";
-
+import { getContentFile } from "@/api/ajax";
 export default {
   name: "WordIntp",
   components: {
@@ -197,7 +197,12 @@ export default {
             items.attrs.forEach((itemss) => {
               if (itemss.key == "pronunciation") {
                 // 音频
-
+                let Mname = "tool-TextToVoiceFile";
+                getContentFile(Mname, { text: this.word.detail.new_word }).then(
+                  (res) => {
+                    _this.mp3Url = res.file_url;
+                  }
+                );
                 // _this.word.mp3Url = itemss.objects[0]["@value"]
                 //   ? itemss.objects[0]["@value"]
                 //   : "";

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -352,7 +352,11 @@
 import Strockplayredline from "./Strockplayredline.vue";
 import Audio from "./AudioRed.vue";
 import Intp from "./Intp.vue";
-import { getContent, getHZChineseInfo } from "../../../../api/ajax";
+import {
+  getContent,
+  getHZChineseInfo,
+  getContentFile,
+} from "../../../../api/ajax";
 import html2canvas from "html2canvas";
 
 export default {
@@ -939,6 +943,12 @@ export default {
             items.attrs.forEach((itemss) => {
               if (itemss.key == "pronunciation") {
                 // 音频
+                let Mname = "tool-TextToVoiceFile";
+                getContentFile(Mname, { text: this.word.detail.new_word }).then(
+                  (res) => {
+                    _this.mp3Url = res.file_url;
+                  }
+                );
                 // _this.data.mp3Url = itemss.objects[0]["@value"]
                 //   ? itemss.objects[0]["@value"]
                 //   : "";

src/components/Adult/preview/components/Wordcard.vue

@@ -5,20 +5,21 @@
       'wordCard',
       word && word.detail.new_word.length > 4 ? 'wordCard560' : '',
     ]"
-    v-if="word"
+    v-loading="loading"
   >
-    <div class="closeBox">
-      <i class="el-icon-close" @click="changeWordCard(false)"></i>
-    </div>
-    <div class="bwc-top" v-if="word.detail">
-      <span v-if="word.detail.pinyin">{{
-        word.detail.pinyin.toLowerCase()
-      }}</span>
-      <div style="margin-left: 4px" v-if="mp3Url">
-        <Audio :mp3="mp3Url ? mp3Url : ''" :themeColor="themeColor" />
+    <template v-if="word">
+      <div class="closeBox">
+        <i class="el-icon-close" @click="changeWordCard(false)"></i>
       </div>
+      <div class="bwc-top" v-if="word.detail">
+        <span v-if="word.detail.pinyin">{{
+          word.detail.pinyin.toLowerCase()
+        }}</span>
+        <div style="margin-left: 4px" v-if="mp3Url">
+          <Audio :mp3="mp3Url ? mp3Url : ''" :themeColor="themeColor" />
+        </div>
 
-      <!-- <img
+        <!-- <img
         :src="
           themeColor
             ? themeColor == 'green'
@@ -31,155 +32,156 @@
         v-if="word.detail.mp3_list.length == 0"
         style="width: 16px"
       /> -->
-    </div>
-    <div
-      class="bwc-Strockplay"
-      :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
-      v-if="word.detail.new_word.length < 5"
-    >
+      </div>
       <div
-        :key="conindex"
-        class="strockplay"
-        v-for="(conItem, conindex) in word.detail.new_word"
+        class="bwc-Strockplay"
+        :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
+        v-if="word.detail.new_word.length < 5"
       >
-        <Strockplayredline
-          :Book_text="conItem"
-          :playStorkes="true"
-          :targetDiv="'bwcHanziIntp' + conItem + conindex"
-          :wordNum="word.detail.new_word.length"
-          :themeColor="themeColor"
-        />
-        <img
-          :src="
-            themeColor
-              ? themeColor == 'green'
-                ? require('../../../../assets/icon/Pencil-16-normal-Green.png')
-                : themeColor == 'brown'
-                ? require('../../../../assets/icon/Pencil-16-normal-Brown.png')
-                : require('../../../../assets/icon/Pencil-16-normal-red.png')
-              : require('../../../../assets/icon/Pencil-16-normal-red.png')
-          "
-          class="collect-icon"
-          v-if="word.detail.new_word.length > 1"
-          @click="writeWord(conItem)"
-        />
         <div
-          class="bwc-line"
-          v-if="conindex < word.detail.new_word.length - 1"
-        ></div>
-      </div>
-    </div>
-    <p v-else class="bwc-tolength">
-      <span v-for="(item, index) in word.detail.new_word" :key="index">{{
-        item
-      }}</span>
-    </p>
-    <template v-if="word.detail">
-      <span class="word-ben-def">
-        <span
-          v-if="
-            word.detail.definition_list &&
-            word.detail.definition_list.length > 0
-          "
-          >本课释义</span
-        >
-        <span
-          v-else-if="
-            word.detail.paraphrase && word.detail.paraphrase.length > 0
-          "
-          >词典释义</span
+          :key="conindex"
+          class="strockplay"
+          v-for="(conItem, conindex) in word.detail.new_word"
         >
-        <span v-else>暂无释义</span>
-      </span>
-      <div
-        class="bwc-word-en"
-        :class="['bwc-word-en' + word.detail.new_word.length]"
-      >
-        <span
-          class="word-chs"
-          v-if="defChsArr.length > 0"
-          v-html="defChsArr[0]"
-        ></span>
-        <span
-          class="word-en"
-          v-if="defEnArr.length > 0"
-          v-html="defEnArr[0]"
-        ></span>
-      </div>
-    </template>
-    <div class="bwc-more-intp" @click="viewIntp">查看更多</div>
-    <div class="bwc-footer">
-      <button class="bwc-btn" @click="handleColl">
-        <template v-if="!collFlag">
+          <Strockplayredline
+            :Book_text="conItem"
+            :playStorkes="true"
+            :targetDiv="'bwcHanziIntp' + conItem + conindex"
+            :wordNum="word.detail.new_word.length"
+            :themeColor="themeColor"
+          />
           <img
             :src="
               themeColor
                 ? themeColor == 'green'
-                  ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                  ? require('../../../../assets/icon/Pencil-16-normal-Green.png')
                   : themeColor == 'brown'
-                  ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                  : require('../../../../assets/icon/starline-16-normal-red.png')
-                : require('../../../../assets/icon/starline-16-normal-red.png')
+                  ? require('../../../../assets/icon/Pencil-16-normal-Brown.png')
+                  : require('../../../../assets/icon/Pencil-16-normal-red.png')
+                : require('../../../../assets/icon/Pencil-16-normal-red.png')
             "
             class="collect-icon"
+            v-if="word.detail.new_word.length > 1"
+            @click="writeWord(conItem)"
           />
-        </template>
-        <template v-else>
+          <div
+            class="bwc-line"
+            v-if="conindex < word.detail.new_word.length - 1"
+          ></div>
+        </div>
+      </div>
+      <p v-else class="bwc-tolength">
+        <span v-for="(item, index) in word.detail.new_word" :key="index">{{
+          item
+        }}</span>
+      </p>
+      <template v-if="word.detail">
+        <span class="word-ben-def">
+          <span
+            v-if="
+              word.detail.definition_list &&
+              word.detail.definition_list.length > 0
+            "
+            >本课释义</span
+          >
+          <span
+            v-else-if="
+              word.detail.paraphrase && word.detail.paraphrase.length > 0
+            "
+            >词典释义</span
+          >
+          <span v-else>暂无释义</span>
+        </span>
+        <div
+          class="bwc-word-en"
+          :class="['bwc-word-en' + word.detail.new_word.length]"
+        >
+          <span
+            class="word-chs"
+            v-if="defChsArr.length > 0"
+            v-html="defChsArr[0]"
+          ></span>
+          <span
+            class="word-en"
+            v-if="defEnArr.length > 0"
+            v-html="defEnArr[0]"
+          ></span>
+        </div>
+      </template>
+      <div class="bwc-more-intp" @click="viewIntp">查看更多</div>
+      <div class="bwc-footer">
+        <button class="bwc-btn" @click="handleColl">
+          <template v-if="!collFlag">
+            <img
+              :src="
+                themeColor
+                  ? themeColor == 'green'
+                    ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                    : themeColor == 'brown'
+                    ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                    : require('../../../../assets/icon/starline-16-normal-red.png')
+                  : require('../../../../assets/icon/starline-16-normal-red.png')
+              "
+              class="collect-icon"
+            />
+          </template>
+          <template v-else>
+            <img
+              :src="
+                themeColor
+                  ? themeColor == 'green'
+                    ? require('../../../../assets/icon/starfill-16-normal-Green.png')
+                    : themeColor == 'brown'
+                    ? require('../../../../assets/icon/starfill-16-normal-Brown.png')
+                    : require('../../../../assets/icon/starfill-16-normal-red.png')
+                  : require('../../../../assets/icon/starfill-16-normal-red.png')
+              "
+              class="practice-icon"
+            />
+          </template>
+          {{ collFlag ? "已收藏" : "收藏" }}
+        </button>
+        <button
+          class="bwc-btn bwc-btn2"
+          @click="writeWord(word.detail.new_word, word.detail.pinyin)"
+          v-if="word.detail.new_word.length == 1"
+        >
           <img
             :src="
               themeColor
                 ? themeColor == 'green'
-                  ? require('../../../../assets/icon/starfill-16-normal-Green.png')
+                  ? require('../../../../assets/icon/Pencil-16-normal-Green.png')
                   : themeColor == 'brown'
-                  ? require('../../../../assets/icon/starfill-16-normal-Brown.png')
-                  : require('../../../../assets/icon/starfill-16-normal-red.png')
-                : require('../../../../assets/icon/starfill-16-normal-red.png')
+                  ? require('../../../../assets/icon/Pencil-16-normal-Brown.png')
+                  : require('../../../../assets/icon/Pencil-16-normal-red.png')
+                : require('../../../../assets/icon/Pencil-16-normal-red.png')
             "
-            class="practice-icon"
+            class="collect-icon"
           />
-        </template>
-        {{ collFlag ? "已收藏" : "收藏" }}
-      </button>
-      <button
-        class="bwc-btn bwc-btn2"
-        @click="writeWord(word.detail.new_word, word.detail.pinyin)"
-        v-if="word.detail.new_word.length == 1"
-      >
-        <img
-          :src="
-            themeColor
-              ? themeColor == 'green'
-                ? require('../../../../assets/icon/Pencil-16-normal-Green.png')
-                : themeColor == 'brown'
-                ? require('../../../../assets/icon/Pencil-16-normal-Brown.png')
-                : require('../../../../assets/icon/Pencil-16-normal-red.png')
-              : require('../../../../assets/icon/Pencil-16-normal-red.png')
-          "
-          class="collect-icon"
+          写一写
+        </button>
+      </div>
+      <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
+        <Practice
+          :changePraShow="changePraShow"
+          :cur="curData"
+          :themeColor="themeColor"
+          :currentTreeID="currentTreeID"
+          :mp3Url="mp3Url"
+          :TaskModel="TaskModel"
+          :writeList="writeList"
+          @changeCurQue="changeCurQue"
+        />
+      </div>
+      <div class="practiceBox" v-if="isIntpShow">
+        <WordPhraseDetail
+          :currentTreeID="currentTreeID"
+          :closeWord="changeIntpShow"
+          :data="word.detail"
+          :themeColor="themeColor"
         />
-        写一写
-      </button>
-    </div>
-    <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
-      <Practice
-        :changePraShow="changePraShow"
-        :cur="curData"
-        :themeColor="themeColor"
-        :currentTreeID="currentTreeID"
-        :mp3Url="mp3Url"
-        :TaskModel="TaskModel"
-        :writeList="writeList"
-        @changeCurQue="changeCurQue"
-      />
-    </div>
-    <div class="practiceBox" v-if="isIntpShow">
-      <WordPhraseDetail
-        :currentTreeID="currentTreeID"
-        :closeWord="changeIntpShow"
-        :data="word.detail"
-        :themeColor="themeColor"
-      />
-    </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -210,10 +212,11 @@ export default {
     "currentTreeID",
     "curQue",
     "TaskModel",
-    "writeList"
+    "writeList",
   ],
   data() {
     return {
+      loading: false,
       isPraShow: false,
       isIntpShow: false,
       curData: null,
@@ -335,6 +338,7 @@ export default {
       this.isIntpShow = false;
     },
     getChineseInfo() {
+      this.loading = true;
       let _this = this;
       let data = {
         query: this.word.detail.new_word,
@@ -356,6 +360,14 @@ export default {
             items.attrs.forEach((itemss) => {
               if (itemss.key == "pronunciation") {
                 // 音频
+                let Mname = "tool-TextToVoiceFile";
+                getContentFile(Mname, { text: this.word.detail.new_word }).then(
+                  (res) => {
+                    _this.mp3Url = res.file_url;
+                    _this.word.detail.mp3Url = res.file_url;
+                    this.loading = false;
+                  }
+                );
                 // _this.mp3Url = itemss.objects[0]["@value"]
                 //   ? itemss.objects[0]["@value"]
                 //   : "";