|  |  | @@ -159,10 +159,14 @@ | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | v-if="AccessToken" | 
		
	
		
			
			|  |  |  | class="pointer" | 
		
	
		
			
			|  |  |  | class="pointer aiPicTab" | 
		
	
		
			
			|  |  |  | :class="showFace == 2 ? 'tabAvtive' : ''" | 
		
	
		
			
			|  |  |  | @click="chooseAiPic" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <div class="subscript"> | 
		
	
		
			
			|  |  |  | <span>GPT</span> | 
		
	
		
			
			|  |  |  | <img src="../../assets/img/star.png" alt="" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.Aipicture") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
	
		
			
				|  |  | @@ -239,6 +243,10 @@ | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 右侧栏 --> | 
		
	
		
			
			|  |  |  | <div class="right"> | 
		
	
		
			
			|  |  |  | <div class="subscript"> | 
		
	
		
			
			|  |  |  | <span>GPT</span> | 
		
	
		
			
			|  |  |  | <img src="../../assets/img/star.png" alt="" /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <el-tabs type="border-card" class="tabs"> | 
		
	
		
			
			|  |  |  | <!-- ----------------------------- 1 --> | 
		
	
		
			
			|  |  |  | <el-tab-pane :label="$t('createVideo.typeScript')"> | 
		
	
	
		
			
				|  |  | @@ -348,7 +356,7 @@ | 
		
	
		
			
			|  |  |  | <div class="card2"> | 
		
	
		
			
			|  |  |  | <!-- 上传音频 --> | 
		
	
		
			
			|  |  |  | <p> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-VideoCamera"><i-ep-VideoCamera /></el-icon> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-Headset"><i-ep-Headset /></el-icon> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.uploadAudio") }} | 
		
	
		
			
			|  |  |  | </p> | 
		
	
		
			
			|  |  |  | <div class="uploadVideo"> | 
		
	
	
		
			
				|  |  | @@ -415,133 +423,167 @@ | 
		
	
		
			
			|  |  |  | <!-- ----------------------- 3 --> | 
		
	
		
			
			|  |  |  | <el-tab-pane :label="$t('createVideo.music')"> | 
		
	
		
			
			|  |  |  | <div class="card3"> | 
		
	
		
			
			|  |  |  | <div class="text"> | 
		
	
		
			
			|  |  |  | <!-- 选择音乐 --> | 
		
	
		
			
			|  |  |  | <p> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-Headset"><i-ep-Headset /></el-icon> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.chooseMusic") }} | 
		
	
		
			
			|  |  |  | </p> | 
		
	
		
			
			|  |  |  | <!-- 搜索框 --> | 
		
	
		
			
			|  |  |  | <div class="flex justify-between" style="width: 99%"> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | v-model="title" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.typeTitle')" | 
		
	
		
			
			|  |  |  | v-model="searchInput" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.searchMusic')" | 
		
	
		
			
			|  |  |  | @keyup.enter="searchMusicList" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <el-button type="primary"> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.confirm") }} | 
		
	
		
			
			|  |  |  | </el-button> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | v-model="title" | 
		
	
		
			
			|  |  |  | :rows="15" | 
		
	
		
			
			|  |  |  | type="textarea" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.aiText')" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <el-icon :size="20"> | 
		
	
		
			
			|  |  |  | <Edit /> | 
		
	
		
			
			|  |  |  | </el-icon> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-edit" @click="searchMusicList" | 
		
	
		
			
			|  |  |  | ><i-ep-search | 
		
	
		
			
			|  |  |  | /></el-icon> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <p>{{ $t("createVideo.languages") }}</p> | 
		
	
		
			
			|  |  |  | <el-select | 
		
	
		
			
			|  |  |  | v-model="language" | 
		
	
		
			
			|  |  |  | placeholder="Select" | 
		
	
		
			
			|  |  |  | style="width: 100%" | 
		
	
		
			
			|  |  |  | <!-- 音乐列表展示 --> | 
		
	
		
			
			|  |  |  | <div class="musicList"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | @click="chooseMusicUrl(item.url, item.id)" | 
		
	
		
			
			|  |  |  | class="musicItem" | 
		
	
		
			
			|  |  |  | :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" | 
		
	
		
			
			|  |  |  | v-for="item in musicList" | 
		
	
		
			
			|  |  |  | :key="item.id" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <span class="musicNmae"> {{ item.name }}</span> | 
		
	
		
			
			|  |  |  | <span class="musicTime"> {{ handleTime(item.time) }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="AudioBox" v-if="audioMusicUrl"> | 
		
	
		
			
			|  |  |  | <audio controls :src="audioMusicUrl" id="uploadAudio"></audio> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 保存视频 --> | 
		
	
		
			
			|  |  |  | <el-button | 
		
	
		
			
			|  |  |  | @click="saveOrUpdate(3, 'saveVideo')" | 
		
	
		
			
			|  |  |  | color="#000" | 
		
	
		
			
			|  |  |  | type="primary" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-option | 
		
	
		
			
			|  |  |  | v-for="item in languageOptions" | 
		
	
		
			
			|  |  |  | :key="item.value" | 
		
	
		
			
			|  |  |  | :label="item.label" | 
		
	
		
			
			|  |  |  | :value="item.value" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </el-select> | 
		
	
		
			
			|  |  |  | <p>{{ $t("createVideo.voices") }}</p> | 
		
	
		
			
			|  |  |  | <el-select | 
		
	
		
			
			|  |  |  | v-model="language" | 
		
	
		
			
			|  |  |  | placeholder="Select" | 
		
	
		
			
			|  |  |  | style="width: 100%" | 
		
	
		
			
			|  |  |  | <my-loading :isLoading="createLoading"></my-loading> | 
		
	
		
			
			|  |  |  | <span v-if="!createLoading">{{ | 
		
	
		
			
			|  |  |  | $t("createVideo.saveVideo") | 
		
	
		
			
			|  |  |  | }}</span></el-button | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-option | 
		
	
		
			
			|  |  |  | v-for="item in languageOptions" | 
		
	
		
			
			|  |  |  | :key="item.value" | 
		
	
		
			
			|  |  |  | :label="item.label" | 
		
	
		
			
			|  |  |  | :value="item.value" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </el-select> | 
		
	
		
			
			|  |  |  | <p>{{ $t("createVideo.styles") }}</p> | 
		
	
		
			
			|  |  |  | <el-select | 
		
	
		
			
			|  |  |  | v-model="language" | 
		
	
		
			
			|  |  |  | placeholder="Select" | 
		
	
		
			
			|  |  |  | style="width: 100%" | 
		
	
		
			
			|  |  |  | <!-- 生成视频 --> | 
		
	
		
			
			|  |  |  | <el-button | 
		
	
		
			
			|  |  |  | style="margin-left: 0" | 
		
	
		
			
			|  |  |  | @click="saveOrUpdate(3)" | 
		
	
		
			
			|  |  |  | color="#000" | 
		
	
		
			
			|  |  |  | type="primary" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-option | 
		
	
		
			
			|  |  |  | v-for="item in languageOptions" | 
		
	
		
			
			|  |  |  | :key="item.value" | 
		
	
		
			
			|  |  |  | :label="item.label" | 
		
	
		
			
			|  |  |  | :value="item.value" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </el-select> | 
		
	
		
			
			|  |  |  | <el-button type="primary">{{ | 
		
	
		
			
			|  |  |  | $t("createVideo.generateVideo") | 
		
	
		
			
			|  |  |  | }}</el-button> | 
		
	
		
			
			|  |  |  | <my-loading :isLoading="createLoading"></my-loading> | 
		
	
		
			
			|  |  |  | <span v-if="!createLoading">{{ | 
		
	
		
			
			|  |  |  | $t("createVideo.generateVideo") | 
		
	
		
			
			|  |  |  | }}</span> | 
		
	
		
			
			|  |  |  | </el-button> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </el-tab-pane> | 
		
	
		
			
			|  |  |  | <!-- ----------------------- 4 --> | 
		
	
		
			
			|  |  |  | <el-tab-pane :label="$t('createVideo.aiScript')"> | 
		
	
		
			
			|  |  |  | <div class="card3"> | 
		
	
		
			
			|  |  |  | <div class="card4"> | 
		
	
		
			
			|  |  |  | <div class="text"> | 
		
	
		
			
			|  |  |  | <!-- 文本域 --> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | v-model="title" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.typeTitle')" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <el-button type="primary"> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.confirm") }} | 
		
	
		
			
			|  |  |  | </el-button> | 
		
	
		
			
			|  |  |  | <el-input | 
		
	
		
			
			|  |  |  | v-model="title" | 
		
	
		
			
			|  |  |  | maxlength="3000" | 
		
	
		
			
			|  |  |  | id="textInputId" | 
		
	
		
			
			|  |  |  | v-model="textareaContent" | 
		
	
		
			
			|  |  |  | :rows="15" | 
		
	
		
			
			|  |  |  | type="textarea" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.aiText')" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <el-icon :size="20"> | 
		
	
		
			
			|  |  |  | <Edit /> | 
		
	
		
			
			|  |  |  | </el-icon> | 
		
	
		
			
			|  |  |  | <span | 
		
	
		
			
			|  |  |  | class="pointer" | 
		
	
		
			
			|  |  |  | @click="getPreviewAudio" | 
		
	
		
			
			|  |  |  | style="margin-right: 10px; font-size: 20px" | 
		
	
		
			
			|  |  |  | >🔊</span | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <span class="pointer" @click="insertIcon">🕗</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <p>{{ $t("createVideo.languages") }}</p> | 
		
	
		
			
			|  |  |  | <!-- 语言 --> | 
		
	
		
			
			|  |  |  | <el-select | 
		
	
		
			
			|  |  |  | @change="chooseType" | 
		
	
		
			
			|  |  |  | v-model="language" | 
		
	
		
			
			|  |  |  | placeholder="Select" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.select')" | 
		
	
		
			
			|  |  |  | style="width: 100%" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-option | 
		
	
		
			
			|  |  |  | v-for="item in languageOptions" | 
		
	
		
			
			|  |  |  | :key="item.value" | 
		
	
		
			
			|  |  |  | :label="item.label" | 
		
	
		
			
			|  |  |  | :value="item.value" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | :label="item.name" | 
		
	
		
			
			|  |  |  | :value="item.id" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <img | 
		
	
		
			
			|  |  |  | :src="item.img" | 
		
	
		
			
			|  |  |  | alt="" | 
		
	
		
			
			|  |  |  | style=" | 
		
	
		
			
			|  |  |  | width: 20px; | 
		
	
		
			
			|  |  |  | margin-right: 10px; | 
		
	
		
			
			|  |  |  | vertical-align: text-top; | 
		
	
		
			
			|  |  |  | " | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <span style="line-height: 20px">{{ item.name }}</span> | 
		
	
		
			
			|  |  |  | </el-option> | 
		
	
		
			
			|  |  |  | </el-select> | 
		
	
		
			
			|  |  |  | <p>{{ $t("createVideo.voices") }}</p> | 
		
	
		
			
			|  |  |  | <!-- 声音 --> | 
		
	
		
			
			|  |  |  | <el-select | 
		
	
		
			
			|  |  |  | v-model="language" | 
		
	
		
			
			|  |  |  | placeholder="Select" | 
		
	
		
			
			|  |  |  | @change="chooseStyle" | 
		
	
		
			
			|  |  |  | :disabled="language ? false : true" | 
		
	
		
			
			|  |  |  | v-model="sound" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.select')" | 
		
	
		
			
			|  |  |  | style="width: 100%" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-option | 
		
	
		
			
			|  |  |  | v-for="item in languageOptions" | 
		
	
		
			
			|  |  |  | v-for="item in soundOptions" | 
		
	
		
			
			|  |  |  | :key="item.value" | 
		
	
		
			
			|  |  |  | :label="item.label" | 
		
	
		
			
			|  |  |  | :value="item.value" | 
		
	
		
			
			|  |  |  | :label="item.displayName" | 
		
	
		
			
			|  |  |  | :value="item.id" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </el-select> | 
		
	
		
			
			|  |  |  | <p>{{ $t("createVideo.styles") }}</p> | 
		
	
		
			
			|  |  |  | <!-- 风格 --> | 
		
	
		
			
			|  |  |  | <el-select | 
		
	
		
			
			|  |  |  | v-model="language" | 
		
	
		
			
			|  |  |  | placeholder="Select" | 
		
	
		
			
			|  |  |  | :disabled="soundStyleOptions ? false : true" | 
		
	
		
			
			|  |  |  | v-model="soundStyle" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.select')" | 
		
	
		
			
			|  |  |  | style="width: 100%" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-option | 
		
	
		
			
			|  |  |  | v-for="item in languageOptions" | 
		
	
		
			
			|  |  |  | :key="item.value" | 
		
	
		
			
			|  |  |  | :label="item.label" | 
		
	
		
			
			|  |  |  | :value="item.value" | 
		
	
		
			
			|  |  |  | v-for="item in soundStyleOptions" | 
		
	
		
			
			|  |  |  | :key="item" | 
		
	
		
			
			|  |  |  | :label="item" | 
		
	
		
			
			|  |  |  | :value="item" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </el-select> | 
		
	
		
			
			|  |  |  | <el-button type="primary">{{ | 
		
	
		
			
			|  |  |  | $t("createVideo.generateVideo") | 
		
	
		
			
			|  |  |  | }}</el-button> | 
		
	
		
			
			|  |  |  | <!-- 保存视频 --> | 
		
	
		
			
			|  |  |  | <el-button | 
		
	
		
			
			|  |  |  | @click="saveOrUpdate(1, 'saveVideo')" | 
		
	
		
			
			|  |  |  | color="#000" | 
		
	
		
			
			|  |  |  | type="primary" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <my-loading :isLoading="createLoading"></my-loading> | 
		
	
		
			
			|  |  |  | <span v-if="!createLoading">{{ | 
		
	
		
			
			|  |  |  | $t("createVideo.saveVideo") | 
		
	
		
			
			|  |  |  | }}</span></el-button | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <!-- 生成视频 --> | 
		
	
		
			
			|  |  |  | <el-button | 
		
	
		
			
			|  |  |  | style="margin-left: 0" | 
		
	
		
			
			|  |  |  | @click="saveOrUpdate(1)" | 
		
	
		
			
			|  |  |  | color="#000" | 
		
	
		
			
			|  |  |  | type="primary" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <my-loading :isLoading="createLoading"></my-loading> | 
		
	
		
			
			|  |  |  | <span v-if="!createLoading">{{ | 
		
	
		
			
			|  |  |  | $t("createVideo.generateVideo") | 
		
	
		
			
			|  |  |  | }}</span></el-button | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </el-tab-pane> | 
		
	
		
			
			|  |  |  | <!-- -------------------------脚标 --> | 
		
	
		
			
			|  |  |  | </el-tabs> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 试听的mp3 --> | 
		
	
	
		
			
				|  |  | @@ -568,6 +610,7 @@ import { | 
		
	
		
			
			|  |  |  | createVideoApi, | 
		
	
		
			
			|  |  |  | previewAudioApi, | 
		
	
		
			
			|  |  |  | findByIdApi, | 
		
	
		
			
			|  |  |  | musicListApi, | 
		
	
		
			
			|  |  |  | } from "@/apis/createVideo"; | 
		
	
		
			
			|  |  |  | import { useI18n } from "vue-i18n"; | 
		
	
		
			
			|  |  |  | import Recorder from "js-audio-recorder"; //mp3插件 | 
		
	
	
		
			
				|  |  | @@ -1025,7 +1068,7 @@ async function saveOrUpdate(index, isSaveVideo) { | 
		
	
		
			
			|  |  |  | if (createLoading.value == true) { | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | tabFrom.value = index; | 
		
	
		
			
			|  |  |  | tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮 | 
		
	
		
			
			|  |  |  | const saveOrUpdateData = { | 
		
	
		
			
			|  |  |  | id: id.value, //从草稿或者重新编辑回到创建视频时有id | 
		
	
		
			
			|  |  |  | title: title.value, | 
		
	
	
		
			
				|  |  | @@ -1035,6 +1078,7 @@ async function saveOrUpdate(index, isSaveVideo) { | 
		
	
		
			
			|  |  |  | speakTypeStr: soundStyle.value, //声音风格 | 
		
	
		
			
			|  |  |  | voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 | 
		
	
		
			
			|  |  |  | voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传 | 
		
	
		
			
			|  |  |  | musicId: musicItemAction.value, // 选中音乐的id,voiceFrom=3 时必传 | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | if (index == 1) { | 
		
	
		
			
			|  |  |  | createLoading.value = true; | 
		
	
	
		
			
				|  |  | @@ -1072,6 +1116,35 @@ async function saveOrUpdate(index, isSaveVideo) { | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | if (index == 3) { | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // 这个if判断是不是仅仅保存视频 | 
		
	
		
			
			|  |  |  | if (isSaveVideo == "saveVideo") { | 
		
	
		
			
			|  |  |  | ElMessage.success( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | router.push("/myCreating"); | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | console.log("ceshi"); | 
		
	
		
			
			|  |  |  | const res2 = await createVideoApi({ id: res1.data.id }); // 生成视频 | 
		
	
		
			
			|  |  |  | if (res2.message == "success") { | 
		
	
		
			
			|  |  |  | ElMessage.success( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? `视频正在生成中,请耐心等待` | 
		
	
		
			
			|  |  |  | : `The video is being generated, please wait patiently` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | router.push("/myCreating"); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error(error); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion ---------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -1087,14 +1160,56 @@ async function findById(findId) { | 
		
	
		
			
			|  |  |  | afterSaveAudioId.value = res.data.voiceMaterialId; //保存音频后得到的id | 
		
	
		
			
			|  |  |  | imgUrl.value = res.data.personPhotoUrl; //图片回显 | 
		
	
		
			
			|  |  |  | audioUrl.value = res.data.voiceMaterialUrl; // mp3回显 | 
		
	
		
			
			|  |  |  | language.value = res.data.voiceInfo.languageId; | 
		
	
		
			
			|  |  |  | await chooseType(language.value); | 
		
	
		
			
			|  |  |  | musicItemAction.value = res.data.musicId; //音乐id回显 | 
		
	
		
			
			|  |  |  | language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null; | 
		
	
		
			
			|  |  |  | if (language.value) { | 
		
	
		
			
			|  |  |  | await chooseType(language.value); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | sound.value = res.data.voiceMouldId; //声音id | 
		
	
		
			
			|  |  |  | chooseStyle(); | 
		
	
		
			
			|  |  |  | soundStyle.value = res.data.speakTypeStr; //选择风格 | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion ---------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 音乐tab | 
		
	
		
			
			|  |  |  | const musicList = ref(null); //展示音乐列表 | 
		
	
		
			
			|  |  |  | const audioMusicUrl = ref(null); //选中音乐Url回显 | 
		
	
		
			
			|  |  |  | const musicItemAction = ref(null); //选中高亮 | 
		
	
		
			
			|  |  |  | // 获取音乐列表 | 
		
	
		
			
			|  |  |  | async function getMusicList() { | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res = await musicListApi(); | 
		
	
		
			
			|  |  |  | musicList.value = res.data; | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | console.log(error); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 点击选择音乐 | 
		
	
		
			
			|  |  |  | function chooseMusicUrl(url, id) { | 
		
	
		
			
			|  |  |  | audioMusicUrl.value = url; | 
		
	
		
			
			|  |  |  | musicItemAction.value = id; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 转化秒为分秒 | 
		
	
		
			
			|  |  |  | function handleTime(time) { | 
		
	
		
			
			|  |  |  | let m = Math.floor(time / 60); | 
		
	
		
			
			|  |  |  | let s = time % 60; | 
		
	
		
			
			|  |  |  | if (s < 10) { | 
		
	
		
			
			|  |  |  | s = "0" + s; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | return m + ":" + s; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 搜索功能 | 
		
	
		
			
			|  |  |  | const searchInput = ref(null); | 
		
	
		
			
			|  |  |  | async function searchMusicList() { | 
		
	
		
			
			|  |  |  | // const res = await | 
		
	
		
			
			|  |  |  | console.log("搜索"); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion ---------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#endregion ---------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#endregion ---------------------------- | 
		
	
	
		
			
				|  |  | @@ -1116,8 +1231,15 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | await voiceTotal(); | 
		
	
		
			
			|  |  |  | if (route.query.id) { | 
		
	
		
			
			|  |  |  | findById(route.query.id); | 
		
	
		
			
			|  |  |  | await findById(route.query.id); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | await getMusicList(); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | musicList.value.forEach((item) => { | 
		
	
		
			
			|  |  |  | if (item.id == musicItemAction.value) { | 
		
	
		
			
			|  |  |  | audioMusicUrl.value = item.url; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | </script> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -1342,7 +1464,7 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | padding: 10px; | 
		
	
		
			
			|  |  |  | > div { | 
		
	
		
			
			|  |  |  | margin-right: 20px; | 
		
	
		
			
			|  |  |  | padding: 5px 10px; | 
		
	
		
			
			|  |  |  | padding: 10px 15px; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | border-radius: 5px; | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
	
		
			
				|  |  | @@ -1470,6 +1592,38 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | background-size: 200% 100% !important; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .aiPicTab { | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | z-index: 2; | 
		
	
		
			
			|  |  |  | .subscript { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: -20px; | 
		
	
		
			
			|  |  |  | right: -20px; | 
		
	
		
			
			|  |  |  | width: 40px; | 
		
	
		
			
			|  |  |  | height: 40px; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | z-index: 1; | 
		
	
		
			
			|  |  |  | img { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 0; | 
		
	
		
			
			|  |  |  | left: 0px; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | z-index: 3; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | span { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | line-height: 45px; | 
		
	
		
			
			|  |  |  | z-index: 4; | 
		
	
		
			
			|  |  |  | padding-left: 0px; | 
		
	
		
			
			|  |  |  | padding-bottom: 5px; | 
		
	
		
			
			|  |  |  | font-size: 16px; | 
		
	
		
			
			|  |  |  | color: #17ceb9; | 
		
	
		
			
			|  |  |  | font-weight: 900; | 
		
	
		
			
			|  |  |  | transform: rotate(45deg); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -1479,6 +1633,36 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | padding: 30px 30px 20px 30px; | 
		
	
		
			
			|  |  |  | background-color: #f1f2f6; | 
		
	
		
			
			|  |  |  | border-radius: 30px 0 0 0; | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | z-index: 2; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .subscript { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 30px; | 
		
	
		
			
			|  |  |  | right: 30px; | 
		
	
		
			
			|  |  |  | width: 40px; | 
		
	
		
			
			|  |  |  | height: 40px; | 
		
	
		
			
			|  |  |  | z-index: 3; | 
		
	
		
			
			|  |  |  | img { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 0; | 
		
	
		
			
			|  |  |  | left: 0px; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | z-index: 3; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | span { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | line-height: 45px; | 
		
	
		
			
			|  |  |  | z-index: 4; | 
		
	
		
			
			|  |  |  | padding-left: 0px; | 
		
	
		
			
			|  |  |  | padding-bottom: 5px; | 
		
	
		
			
			|  |  |  | font-size: 16px; | 
		
	
		
			
			|  |  |  | color: #17ceb9; | 
		
	
		
			
			|  |  |  | font-weight: 900; | 
		
	
		
			
			|  |  |  | transform: rotate(45deg); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | :deep(.el-tabs--border-card) { | 
		
	
		
			
			|  |  |  | font-size: 20px; | 
		
	
		
			
			|  |  |  | border: none; | 
		
	
	
		
			
				|  |  | @@ -1488,6 +1672,7 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | padding: 20px 20px 0px 20px; | 
		
	
		
			
			|  |  |  | border-radius: 20px; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .card1 { | 
		
	
		
			
			|  |  |  | .text { | 
		
	
		
			
			|  |  |  | padding: 10px; | 
		
	
	
		
			
				|  |  | @@ -1607,10 +1792,89 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .card3 { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | padding: 10px; | 
		
	
		
			
			|  |  |  | .el-icon { | 
		
	
		
			
			|  |  |  | vertical-align: text-top; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .musicList { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
		
			
			|  |  |  | flex-wrap: wrap; | 
		
	
		
			
			|  |  |  | justify-content: space-between; | 
		
	
		
			
			|  |  |  | .musicItem { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 30px; | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | margin-top: 10px; | 
		
	
		
			
			|  |  |  | padding: 0 20px; | 
		
	
		
			
			|  |  |  | border: #000 1px solid; | 
		
	
		
			
			|  |  |  | border-radius: 10px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | box-shadow: #00000026 2px 2px 2px 2px; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | .musicNmae { | 
		
	
		
			
			|  |  |  | display: inline-block; | 
		
	
		
			
			|  |  |  | width: 320px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | text-overflow: ellipsis; | 
		
	
		
			
			|  |  |  | white-space: nowrap; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .musicTime { | 
		
	
		
			
			|  |  |  | display: inline-block; | 
		
	
		
			
			|  |  |  | max-width: 300px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | text-overflow: ellipsis; | 
		
	
		
			
			|  |  |  | white-space: nowrap; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .musicItemAvtive { | 
		
	
		
			
			|  |  |  | background-color: #000; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .AudioBox { | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
		
			
			|  |  |  | justify-content: space-around; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | padding: 20px; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | audio { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | > .el-button { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 50px; | 
		
	
		
			
			|  |  |  | margin-top: 10px; | 
		
	
		
			
			|  |  |  | // background-color: #000; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | :deep(.el-input__wrapper) { | 
		
	
		
			
			|  |  |  | border: none; | 
		
	
		
			
			|  |  |  | border-bottom: 2px solid #000; | 
		
	
		
			
			|  |  |  | border-radius: 0; | 
		
	
		
			
			|  |  |  | box-shadow: none; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .el-icon.icon-edit { | 
		
	
		
			
			|  |  |  | width: 30px; | 
		
	
		
			
			|  |  |  | height: 30px; | 
		
	
		
			
			|  |  |  | font-size: 30px; | 
		
	
		
			
			|  |  |  | color: #8c939d; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
		
			
			|  |  |  | color: #292929; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .card4 { | 
		
	
		
			
			|  |  |  | .text { | 
		
	
		
			
			|  |  |  | padding: 10px; | 
		
	
		
			
			|  |  |  | border: 1px solid #000; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .el-button { | 
		
	
		
			
			|  |  |  | float: right; | 
		
	
		
			
			|  |  |  | margin-top: 10px; | 
		
	
	
		
			
				|  |  | @@ -1623,7 +1887,7 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | p { | 
		
	
		
			
			|  |  |  | margin: 10px 0; | 
		
	
		
			
			|  |  |  | margin: 7px 0; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | > .el-button { | 
		
	
	
		
			
				|  |  | @@ -1631,8 +1895,12 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | height: 50px; | 
		
	
		
			
			|  |  |  | margin-top: 10px; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | :deep(.el-input .is-focus) { | 
		
	
		
			
			|  |  |  | // box-shadow: none !important; | 
		
	
		
			
			|  |  |  | // box-shadow: 0 0 0 1px #000 !important; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | :deep(.el-tabs__item.is-active) { | 
		
	
		
			
			|  |  |  | color: #909393; | 
		
	
		
			
			|  |  |  | background-color: #000; | 
		
	
	
		
			
				|  |  | @@ -1643,7 +1911,7 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | :deep(.el-tabs__item) { | 
		
	
		
			
			|  |  |  | width: 25%; | 
		
	
		
			
			|  |  |  | width: 26%; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | :deep(.el-tabs__item:hover) { | 
		
	
	
		
			
				|  |  | 
 |