1、AI语音

src/components/yuyin-preview/index.vue

@@ -16,38 +16,44 @@
         <el-input v-model="dataForm.cardNote.authorName" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="祝福的话语">
+        <el-button type="success" size="mini" :loading="transLoading" @click="translateTxt">翻译</el-button>
         <el-input v-model="dataForm.cardNote.personalSign" type="textarea" :disabled="true"></el-input>
       </el-form-item>
+      <el-form-item label="翻译文本">
+        <el-button type="primary" size="mini" :loading="transLoading" @click="tts">生成语音</el-button>
+        <el-button type="danger" size="mini" :loading="transLoading" @click="syncTTS">同步语音</el-button>
+        <el-input v-model="dataForm.cardNote.foreignTxt" type="textarea"></el-input>
+      </el-form-item>
       <el-row>
-        <el-col :span="8">
-          <el-form-item label="二维码">
+        <el-col :span="dataForm.cardNote.type === 'AI' ? 12 : 8">
+          <el-form-item label="二维码" align="center">
             <el-image
               style="width: 300px; height: 300px"
               :src="resourcesUrl + dataForm.qrNoteMapping.qrCodeUrl"
               v-if="dataForm.qrNoteMapping.qrCodeUrl"/>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="dataForm.cardNote.type === 'AI' ? 12 : 8">
           <el-form-item label="语音内容">
             <br/>
-            <video
-              style="width: 200px; height: 300px"
+            <video v-if="dataForm.cardNote.audioUrl"
+              style="width: 300px; height: 210px"
               :src="resourcesUrl + dataForm.cardNote.audioUrl"
               controls="controls"/>
           </el-form-item>
         </el-col>
-        <el-col :span="8" v-if="newAudioUrl">
+        <el-col :span="dataForm.cardNote.type === 'AI' ? 12 : 8" v-if="newAudioUrl">
           <el-form-item label="新语音内容">
             <br/>
             <video
-              style="width: 200px; height: 300px"
+              style="width: 300px; height: 210px"
               :src="resourcesUrl + newAudioUrl"
               controls="controls"/>
           </el-form-item>
         </el-col>
       </el-row>
       <el-form-item>
-        <div style="width: 100%; text-align: center;">
+        <div style="width: 100%; text-align: center;" v-if="!dataForm.cardNote.type === 'AI'">
           <el-button type="primary" size="large" @click="repairVideo">转换语音</el-button>
           <el-button type="success" size="large" @click="confirmChangeVideo">确认修改</el-button>
         </div>
@@ -66,11 +72,51 @@
         dataForm:{cardNote:{}, qrNoteMapping:{}},
         newAudioUrl: null,
         resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+        transLoading: false
       };
     },
     mounted() {
     },
     methods: {
+      syncTTS(){
+        this.$http({
+          url: this.$http.adornUrl('/qrNoteMapping/getAIAudio'),
+          method: 'POST',
+          data: this.$http.adornData(this.dataForm.qrNoteMapping)
+        }).then(({ data }) =>{
+          if(data){
+            this.dataForm.cardNote.audioUrl = data
+          }else{
+            this.$message.error("同步失败")
+          }
+        })
+      },
+      tts(){
+        this.$http({
+          url: this.$http.adornUrl('/qrNoteMapping/createAIAudio'),
+          method: 'POST',
+          data: this.$http.adornData(this.dataForm.qrNoteMapping)
+        }).then(({ data }) =>{
+          if(data){
+            this.$message.success("下发成功，请稍后回来查看语音")
+          }else{
+
+          }
+        })
+      },
+      translateTxt(){
+        this.$http({
+          url: this.$http.adornUrl('/cardNote/translate'),
+          method: 'POST',
+          data: this.$http.adornData(this.dataForm.cardNote)
+        }).then(({ data }) =>{
+          if(data){
+            this.dataForm.cardNote.foreignTxt = data
+          }else{
+
+          }
+        })
+      },
       openCanvas(){
         this.initCanvas();
         this.drawImage();