|  | @@ -6,9 +6,9 @@ | 
														
													
														
															
																|  |  | <!-- 选中AiFace --> |  |  | <!-- 选中AiFace --> | 
														
													
														
															
																|  |  | <div class="left-top" v-show="showUploadBtn == 1"> |  |  | <div class="left-top" v-show="showUploadBtn == 1"> | 
														
													
														
															
																|  |  | <el-row class="justify-between"> |  |  | <el-row class="justify-between"> | 
														
													
														
															
																|  |  | <!-- title框 --> |  |  |  | 
														
													
														
															
																|  |  |  |  |  | <!-- title框  v-show="!submitImgBtn"--> | 
														
													
														
															
																|  |  | <div |  |  | <div | 
														
													
														
															
																|  |  | v-show="!submitImgBtn" |  |  |  | 
														
													
														
															
																|  |  |  |  |  | v-show="showUploadBtn == 1" | 
														
													
														
															
																|  |  | class="flex justify-between" |  |  | class="flex justify-between" | 
														
													
														
															
																|  |  | style="width: 300px" |  |  | style="width: 300px" | 
														
													
														
															
																|  |  | > |  |  | > | 
														
													
												
													
														
															
																|  | @@ -79,36 +79,6 @@ | 
														
													
														
															
																|  |  | :isLoading="compressionImgLoad" |  |  | :isLoading="compressionImgLoad" | 
														
													
														
															
																|  |  | :tips="imgUploadTips" |  |  | :tips="imgUploadTips" | 
														
													
														
															
																|  |  | ></my-loading> |  |  | ></my-loading> | 
														
													
														
															
																|  |  | <div v-if="!compressionImgLoad" class="trueImg inmiddle"> |  |  |  | 
														
													
														
															
																|  |  | <div class="imgBox"> |  |  |  | 
														
													
														
															
																|  |  | <img src="../../assets/img/trueImg.png" alt="" /> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div class="icon">✔</div> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div v-if="!compressionImgLoad" class="upload inmiddle"> |  |  |  | 
														
													
														
															
																|  |  | + |  |  |  | 
														
													
														
															
																|  |  | <input accept="image/*" type="file" @change="lookImg" /> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div v-if="!compressionImgLoad" class="falseImg inmiddle"> |  |  |  | 
														
													
														
															
																|  |  | <div> |  |  |  | 
														
													
														
															
																|  |  | <div class="imgBox"> |  |  |  | 
														
													
														
															
																|  |  | <img src="../../assets/img/false1.png" alt="" /> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div class="icon">×</div> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div> |  |  |  | 
														
													
														
															
																|  |  | <div class="imgBox"> |  |  |  | 
														
													
														
															
																|  |  | <img src="../../assets/img/false2.png" alt="" /> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div class="icon">×</div> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div> |  |  |  | 
														
													
														
															
																|  |  | <div class="imgBox"> |  |  |  | 
														
													
														
															
																|  |  | <img src="../../assets/img/false3.png" alt="" /> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | <div class="icon">×</div> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  |  | 
														
													
														
															
																|  |  | </div> |  |  | </div> | 
														
													
														
															
																|  |  | </div> |  |  | </div> | 
														
													
														
															
																|  |  | <!-- 选中需要上传的图片后 --> |  |  | <!-- 选中需要上传的图片后 --> | 
														
													
												
													
														
															
																|  | @@ -268,7 +238,7 @@ | 
														
													
														
															
																|  |  | :placeholder="$t('createVideo.aiText')" |  |  | :placeholder="$t('createVideo.aiText')" | 
														
													
														
															
																|  |  | /> |  |  | /> | 
														
													
														
															
																|  |  | <div class="sundriesBox"> |  |  | <div class="sundriesBox"> | 
														
													
														
															
																|  |  | <span class="pointer" @click="getPreviewAudio"> |  |  |  | 
														
													
														
															
																|  |  |  |  |  | <span v-if="false" class="pointer" @click="getPreviewAudio"> | 
														
													
														
															
																|  |  | <el-tooltip |  |  | <el-tooltip | 
														
													
														
															
																|  |  | class="box-item" |  |  | class="box-item" | 
														
													
														
															
																|  |  | effect="dark" |  |  | effect="dark" | 
														
													
												
													
														
															
																|  | @@ -280,7 +250,7 @@ | 
														
													
														
															
																|  |  | > |  |  | > | 
														
													
														
															
																|  |  | <my-Loading-Icon |  |  | <my-Loading-Icon | 
														
													
														
															
																|  |  | class="previewAudioLoadingBox" |  |  | class="previewAudioLoadingBox" | 
														
													
														
															
																|  |  | v-if="previewAudioLoading" |  |  |  | 
														
													
														
															
																|  |  |  |  |  | v-if="false" | 
														
													
														
															
																|  |  | ></my-Loading-Icon> |  |  | ></my-Loading-Icon> | 
														
													
														
															
																|  |  | <span class="pointer" @click="insertIcon"> |  |  | <span class="pointer" @click="insertIcon"> | 
														
													
														
															
																|  |  | <el-tooltip |  |  | <el-tooltip | 
														
													
												
													
														
															
																|  | @@ -344,12 +314,13 @@ | 
														
													
														
															
																|  |  | `  (${ |  |  | `  (${ | 
														
													
														
															
																|  |  | item.sex == 1 |  |  | item.sex == 1 | 
														
													
														
															
																|  |  | ? lanChange == 'zh-cn' |  |  | ? lanChange == 'zh-cn' | 
														
													
														
															
																|  |  | ? `男 ` |  |  |  | 
														
													
														
															
																|  |  |  |  |  | ? `男` | 
														
													
														
															
																|  |  | : `male` |  |  | : `male` | 
														
													
														
															
																|  |  | : lanChange == 'zh-cn' |  |  | : lanChange == 'zh-cn' | 
														
													
														
															
																|  |  | ? `女` |  |  | ? `女` | 
														
													
														
															
																|  |  | : `female` |  |  | : `female` | 
														
													
														
															
																|  |  | })` |  |  |  | 
														
													
														
															
																|  |  |  |  |  | })` + | 
														
													
														
															
																|  |  |  |  |  | returnAge(item.ageType) | 
														
													
														
															
																|  |  | " |  |  | " | 
														
													
														
															
																|  |  | :value="item.id" |  |  | :value="item.id" | 
														
													
														
															
																|  |  | /> |  |  | /> | 
														
													
												
													
														
															
																|  | @@ -364,10 +335,29 @@ | 
														
													
														
															
																|  |  | > |  |  | > | 
														
													
														
															
																|  |  | <el-option |  |  | <el-option | 
														
													
														
															
																|  |  | v-for="item in soundStyleOptions" |  |  | v-for="item in soundStyleOptions" | 
														
													
														
															
																|  |  | :key="item" |  |  |  | 
														
													
														
															
																|  |  | :label="item" |  |  |  | 
														
													
														
															
																|  |  | :value="item" |  |  |  | 
														
													
														
															
																|  |  | /> |  |  |  | 
														
													
														
															
																|  |  |  |  |  | :key="item.name" | 
														
													
														
															
																|  |  |  |  |  | :label="item.name" | 
														
													
														
															
																|  |  |  |  |  | :value="item.name" | 
														
													
														
															
																|  |  |  |  |  | > | 
														
													
														
															
																|  |  |  |  |  | <div style="padding: 0 20px"> | 
														
													
														
															
																|  |  |  |  |  | {{ item.name }} | 
														
													
														
															
																|  |  |  |  |  | <span | 
														
													
														
															
																|  |  |  |  |  | style="float: right; cursor: pointer" | 
														
													
														
															
																|  |  |  |  |  | @click="ListenVoices(item.url)" | 
														
													
														
															
																|  |  |  |  |  | >🔊</span | 
														
													
														
															
																|  |  |  |  |  | > | 
														
													
														
															
																|  |  |  |  |  | </div> | 
														
													
														
															
																|  |  |  |  |  | <!-- <span class="pointer" @click="getPreviewAudio"> | 
														
													
														
															
																|  |  |  |  |  | <el-tooltip | 
														
													
														
															
																|  |  |  |  |  | v-if="false" | 
														
													
														
															
																|  |  |  |  |  | class="box-item" | 
														
													
														
															
																|  |  |  |  |  | effect="dark" | 
														
													
														
															
																|  |  |  |  |  | :content="$t('createVideo.tooltip1')" | 
														
													
														
															
																|  |  |  |  |  | placement="top" | 
														
													
														
															
																|  |  |  |  |  | > | 
														
													
														
															
																|  |  |  |  |  |  | 
														
													
														
															
																|  |  |  |  |  | </el-tooltip></span > --> | 
														
													
														
															
																|  |  |  |  |  | </el-option> | 
														
													
														
															
																|  |  | </el-select> |  |  | </el-select> | 
														
													
														
															
																|  |  | <!-- 保存视频 --> |  |  | <!-- 保存视频 --> | 
														
													
														
															
																|  |  | <el-button |  |  | <el-button | 
														
													
												
													
														
															
																|  | @@ -534,7 +524,7 @@ | 
														
													
														
															
																|  |  | <!-- 系统音乐列表展示 --> |  |  | <!-- 系统音乐列表展示 --> | 
														
													
														
															
																|  |  | <div v-if="musicTabActive == 1" class="musicList"> |  |  | <div v-if="musicTabActive == 1" class="musicList"> | 
														
													
														
															
																|  |  | <div |  |  | <div | 
														
													
														
															
																|  |  | @click="chooseMusicUrl(item.url, item.id)" |  |  |  | 
														
													
														
															
																|  |  |  |  |  | @click="chooseMusicUrl(item)" | 
														
													
														
															
																|  |  | class="musicItem" |  |  | class="musicItem" | 
														
													
														
															
																|  |  | :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" |  |  | :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" | 
														
													
														
															
																|  |  | v-for="item in musicListSystem" |  |  | v-for="item in musicListSystem" | 
														
													
												
													
														
															
																|  | @@ -547,7 +537,7 @@ | 
														
													
														
															
																|  |  | <!-- 个人音乐列表展示 --> |  |  | <!-- 个人音乐列表展示 --> | 
														
													
														
															
																|  |  | <div v-if="musicTabActive == 2" class="musicList"> |  |  | <div v-if="musicTabActive == 2" class="musicList"> | 
														
													
														
															
																|  |  | <div |  |  | <div | 
														
													
														
															
																|  |  | @click="chooseMusicUrl(item.url, item.id)" |  |  |  | 
														
													
														
															
																|  |  |  |  |  | @click="chooseMusicUrl(item)" | 
														
													
														
															
																|  |  | class="musicItem" |  |  | class="musicItem" | 
														
													
														
															
																|  |  | :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" |  |  | :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" | 
														
													
														
															
																|  |  | v-for="item in musicListPerson" |  |  | v-for="item in musicListPerson" | 
														
													
												
													
														
															
																|  | @@ -799,10 +789,10 @@ function ChangeShowFaceList(index) { | 
														
													
														
															
																|  |  | const faceItemActive = ref(); //高亮处理和当前选择图片的ID |  |  | const faceItemActive = ref(); //高亮处理和当前选择图片的ID | 
														
													
														
															
																|  |  | // 点击aifece |  |  | // 点击aifece | 
														
													
														
															
																|  |  | function setImgUrl(url, id) { |  |  | function setImgUrl(url, id) { | 
														
													
														
															
																|  |  | faceItemActive.value = id; |  |  |  | 
														
													
														
															
																|  |  | imgUrl.value = url; |  |  |  | 
														
													
														
															
																|  |  | showUploadBtn.value = 1; |  |  |  | 
														
													
														
															
																|  |  | submitImgBtn.value = false; |  |  |  | 
														
													
														
															
																|  |  |  |  |  | faceItemActive.value = id; //高亮 | 
														
													
														
															
																|  |  |  |  |  | imgUrl.value = url; //回显地址 | 
														
													
														
															
																|  |  |  |  |  | showUploadBtn.value = 1; // | 
														
													
														
															
																|  |  |  |  |  | // submitImgBtn.value = false; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | // 删除个人相册照片 |  |  | // 删除个人相册照片 | 
														
													
														
															
																|  |  | async function deleteFaceImg(id) { |  |  | async function deleteFaceImg(id) { | 
														
													
												
													
														
															
																|  | @@ -843,7 +833,7 @@ async function lookImg(e) { | 
														
													
														
															
																|  |  | imgUrl.value = null; |  |  | imgUrl.value = null; | 
														
													
														
															
																|  |  | imgData.value = null; |  |  | imgData.value = null; | 
														
													
														
															
																|  |  | showUploadBtn.value = 3; |  |  | showUploadBtn.value = 3; | 
														
													
														
															
																|  |  | submitImgBtn.value = false; |  |  |  | 
														
													
														
															
																|  |  |  |  |  | // submitImgBtn.value = false; | 
														
													
														
															
																|  |  | compressionImgLoad.value = true; |  |  | compressionImgLoad.value = true; | 
														
													
														
															
																|  |  | // 压缩配置 |  |  | // 压缩配置 | 
														
													
														
															
																|  |  | const options = { |  |  | const options = { | 
														
													
												
													
														
															
																|  | @@ -851,9 +841,7 @@ async function lookImg(e) { | 
														
													
														
															
																|  |  | useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 |  |  | useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | 
														
													
														
															
																|  |  | }; |  |  | }; | 
														
													
														
															
																|  |  | imgUploadTips.value = "compress"; |  |  | imgUploadTips.value = "compress"; | 
														
													
														
															
																|  |  | 
 |  |  |  | 
														
													
														
															
																|  |  | const compressedFile = await imageCompression(e.target.files[0], options); |  |  | const compressedFile = await imageCompression(e.target.files[0], options); | 
														
													
														
															
																|  |  | 
 |  |  |  | 
														
													
														
															
																|  |  | imgUploadTips.value = "sensitiveness"; |  |  | imgUploadTips.value = "sensitiveness"; | 
														
													
														
															
																|  |  | try { |  |  | try { | 
														
													
														
															
																|  |  | const res = await baiduPhotoApi(compressedFile); |  |  | const res = await baiduPhotoApi(compressedFile); | 
														
													
												
													
														
															
																|  | @@ -869,15 +857,12 @@ async function lookImg(e) { | 
														
													
														
															
																|  |  | imgUrl.value = URL.createObjectURL(compressedFile); |  |  | imgUrl.value = URL.createObjectURL(compressedFile); | 
														
													
														
															
																|  |  | imgData.value = compressedFile; |  |  | imgData.value = compressedFile; | 
														
													
														
															
																|  |  | showUploadBtn.value = 4; |  |  | showUploadBtn.value = 4; | 
														
													
														
															
																|  |  | submitImgBtn.value = true; |  |  |  | 
														
													
														
															
																|  |  |  |  |  | // submitImgBtn.value = true; | 
														
													
														
															
																|  |  | compressionImgLoad.value = false; |  |  | compressionImgLoad.value = false; | 
														
													
														
															
																|  |  | await changeFile(); |  |  | await changeFile(); | 
														
													
														
															
																|  |  | } catch (error) { |  |  | } catch (error) { | 
														
													
														
															
																|  |  | ElMessage.error( |  |  |  | 
														
													
														
															
																|  |  | lanChange.value == "zh-cn" |  |  |  | 
														
													
														
															
																|  |  | ? `图片不符合规范,上传失败` |  |  |  | 
														
													
														
															
																|  |  | : `Image does not meet the specifications, upload failed` |  |  |  | 
														
													
														
															
																|  |  | ); |  |  |  | 
														
													
														
															
																|  |  |  |  |  | console.log(error, "上传图片的error"); | 
														
													
														
															
																|  |  |  |  |  | ElMessage.error(error.message); | 
														
													
														
															
																|  |  | showFace.value = 1; |  |  | showFace.value = 1; | 
														
													
														
															
																|  |  | showUploadBtn.value = 2; |  |  | showUploadBtn.value = 2; | 
														
													
														
															
																|  |  | compressionImgLoad.value = false; |  |  | compressionImgLoad.value = false; | 
														
													
												
													
														
															
																|  | @@ -909,7 +894,7 @@ const title = | 
														
													
														
															
																|  |  | const imgUrl = ref(""); //图片回显路径 |  |  | const imgUrl = ref(""); //图片回显路径 | 
														
													
														
															
																|  |  | const imgData = ref(""); // 上传图片文件 |  |  | const imgData = ref(""); // 上传图片文件 | 
														
													
														
															
																|  |  | const showUploadBtn = ref(1); //上传图片+号的显示隐藏 |  |  | const showUploadBtn = ref(1); //上传图片+号的显示隐藏 | 
														
													
														
															
																|  |  | const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏 |  |  |  | 
														
													
														
															
																|  |  |  |  |  | // const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏 | 
														
													
														
															
																|  |  | // 点击系统仓库tab |  |  | // 点击系统仓库tab | 
														
													
														
															
																|  |  | function chooSystemImg(params) { |  |  | function chooSystemImg(params) { | 
														
													
														
															
																|  |  | showFace.value = 0; |  |  | showFace.value = 0; | 
														
													
												
													
														
															
																|  | @@ -948,7 +933,7 @@ async function changeFile() { | 
														
													
														
															
																|  |  | overLoadUser.value = false; |  |  | overLoadUser.value = false; | 
														
													
														
															
																|  |  | faceItemActive.value = res2.data.id; |  |  | faceItemActive.value = res2.data.id; | 
														
													
														
															
																|  |  | imgUrl.value = res2.data.material; |  |  | imgUrl.value = res2.data.material; | 
														
													
														
															
																|  |  | submitImgBtn.value = false; |  |  |  | 
														
													
														
															
																|  |  |  |  |  | // submitImgBtn.value = false; | 
														
													
														
															
																|  |  | showUploadBtn.value = 1; |  |  | showUploadBtn.value = 1; | 
														
													
														
															
																|  |  | imgUploadTips.value = null; |  |  | imgUploadTips.value = null; | 
														
													
														
															
																|  |  | } catch (error) { |  |  | } catch (error) { | 
														
													
												
													
														
															
																|  | @@ -971,12 +956,13 @@ function chooseMyImg() { | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | // 点击AI头像区的+号 |  |  | // 点击AI头像区的+号 | 
														
													
														
															
																|  |  | function clickAddBtn() { |  |  | function clickAddBtn() { | 
														
													
														
															
																|  |  | // if (!imgUploadTips.value) { |  |  |  | 
														
													
														
															
																|  |  | //   showUploadBtn.value = 3; |  |  |  | 
														
													
														
															
																|  |  | //   submitImgBtn.value = false; |  |  |  | 
														
													
														
															
																|  |  | //   compressionImgLoad.value = true; |  |  |  | 
														
													
														
															
																|  |  | //   return; |  |  |  | 
														
													
														
															
																|  |  | // } |  |  |  | 
														
													
														
															
																|  |  |  |  |  | // 如果imgUploadTips有值,则 | 
														
													
														
															
																|  |  |  |  |  | if (imgUploadTips.value) { | 
														
													
														
															
																|  |  |  |  |  | showUploadBtn.value = 3; | 
														
													
														
															
																|  |  |  |  |  | submitImgBtn.value = false; | 
														
													
														
															
																|  |  |  |  |  | compressionImgLoad.value = true; | 
														
													
														
															
																|  |  |  |  |  | return; | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  | showUploadBtn.value = 2; |  |  | showUploadBtn.value = 2; | 
														
													
														
															
																|  |  | faceItemActive.value = null; |  |  | faceItemActive.value = null; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
												
													
														
															
																|  | @@ -1044,11 +1030,43 @@ async function chooseType() { | 
														
													
														
															
																|  |  | const soundStyleOptions = ref(null); |  |  | const soundStyleOptions = ref(null); | 
														
													
														
															
																|  |  | async function chooseStyle() { |  |  | async function chooseStyle() { | 
														
													
														
															
																|  |  | const item = soundOptions.value.find((element) => element.id == sound.value); |  |  | const item = soundOptions.value.find((element) => element.id == sound.value); | 
														
													
														
															
																|  |  | 
 |  |  |  | 
														
													
														
															
																|  |  | soundStyle.value = null; |  |  | soundStyle.value = null; | 
														
													
														
															
																|  |  | soundStyleOptions.value = item.style; |  |  | soundStyleOptions.value = item.style; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | 
 |  |  |  | 
														
													
														
															
																|  |  |  |  |  | // 根据ageType返回年龄 | 
														
													
														
															
																|  |  |  |  |  | function returnAge(ageType) { | 
														
													
														
															
																|  |  |  |  |  | if (ageType == 1) { | 
														
													
														
															
																|  |  |  |  |  | if (lanChange.value == "zh-cn") { | 
														
													
														
															
																|  |  |  |  |  | return " 儿童"; | 
														
													
														
															
																|  |  |  |  |  | } else { | 
														
													
														
															
																|  |  |  |  |  | return "Child"; | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  |  |  |  | } else if (ageType == 2) { | 
														
													
														
															
																|  |  |  |  |  | if (lanChange.value == "zh-cn") { | 
														
													
														
															
																|  |  |  |  |  | return " 少年"; | 
														
													
														
															
																|  |  |  |  |  | } else { | 
														
													
														
															
																|  |  |  |  |  | return "Teen"; | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  |  |  |  | } else if (ageType == 3) { | 
														
													
														
															
																|  |  |  |  |  | if (lanChange.value == "zh-cn") { | 
														
													
														
															
																|  |  |  |  |  | return " 年轻"; | 
														
													
														
															
																|  |  |  |  |  | } else { | 
														
													
														
															
																|  |  |  |  |  | return "YoungAdult"; | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  |  |  |  | } else if (ageType == 4) { | 
														
													
														
															
																|  |  |  |  |  | if (lanChange.value == "zh-cn") { | 
														
													
														
															
																|  |  |  |  |  | return " 中年"; | 
														
													
														
															
																|  |  |  |  |  | } else { | 
														
													
														
															
																|  |  |  |  |  | return "OlderAdult"; | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  |  |  |  | } else if (ageType == 5) { | 
														
													
														
															
																|  |  |  |  |  | if (lanChange.value == "zh-cn") { | 
														
													
														
															
																|  |  |  |  |  | return " 老年"; | 
														
													
														
															
																|  |  |  |  |  | } else { | 
														
													
														
															
																|  |  |  |  |  | return "Senior"; | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  | // 试听 |  |  | // 试听 | 
														
													
														
															
																|  |  | const previewAudioUrl = ref(null); |  |  | const previewAudioUrl = ref(null); | 
														
													
														
															
																|  |  | const previewAudioLoading = ref(false); |  |  | const previewAudioLoading = ref(false); | 
														
													
												
													
														
															
																|  | @@ -1089,8 +1107,7 @@ async function getPreviewAudio() { | 
														
													
														
															
																|  |  | return; |  |  | return; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | previewAudioUrl.value = res.data.data; |  |  | previewAudioUrl.value = res.data.data; | 
														
													
														
															
																|  |  | // previewAudioUrl.value = |  |  |  | 
														
													
														
															
																|  |  | //   "/suimang/static/tts/2023-07-04/16884538755531874.wav"; |  |  |  | 
														
													
														
															
																|  |  |  |  |  | 
 | 
														
													
														
															
																|  |  | let audioA = document.getElementById("audio"); |  |  | let audioA = document.getElementById("audio"); | 
														
													
														
															
																|  |  | audioA.addEventListener("loadedmetadata", async () => { |  |  | audioA.addEventListener("loadedmetadata", async () => { | 
														
													
														
															
																|  |  | audioA.muted = false; // 将 muted 属性设置为 false |  |  | audioA.muted = false; // 将 muted 属性设置为 false | 
														
													
												
													
														
															
																|  | @@ -1108,6 +1125,18 @@ async function getPreviewAudio() { | 
														
													
														
															
																|  |  | return; |  |  | return; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  |  |  |  | // 新的试听 | 
														
													
														
															
																|  |  |  |  |  | function ListenVoices(url) { | 
														
													
														
															
																|  |  |  |  |  | previewAudioUrl.value = url; | 
														
													
														
															
																|  |  |  |  |  | // previewAudioUrl.value = | 
														
													
														
															
																|  |  |  |  |  | //   "/suimang/static/tts/2023-07-04/16884538755531874.wav"; | 
														
													
														
															
																|  |  |  |  |  | let audioA = document.getElementById("audio"); | 
														
													
														
															
																|  |  |  |  |  | audioA.addEventListener("loadedmetadata", async () => { | 
														
													
														
															
																|  |  |  |  |  | audioA.muted = false; // 将 muted 属性设置为 false | 
														
													
														
															
																|  |  |  |  |  | await audioA.play(); | 
														
													
														
															
																|  |  |  |  |  | previewAudioLoading.value = false; | 
														
													
														
															
																|  |  |  |  |  | }); | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  | //#endregion |  |  | //#endregion | 
														
													
														
															
																|  |  | 
 |  |  | 
 | 
														
													
														
															
																|  |  | //#region card2的逻辑 |  |  | //#region card2的逻辑 | 
														
													
												
													
														
															
																|  | @@ -1287,6 +1316,13 @@ async function uploadProgress(videoId, isSaveVideo) { | 
														
													
														
															
																|  |  | router.push("/myCreating"); |  |  | router.push("/myCreating"); | 
														
													
														
															
																|  |  | return; |  |  | return; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  |  |  |  | ElMessage.success( | 
														
													
														
															
																|  |  |  |  |  | lanChange.value == "zh-cn" | 
														
													
														
															
																|  |  |  |  |  | ? `预计生成的视频时长约为${formatTime(uploadAudioTime.value)}` | 
														
													
														
															
																|  |  |  |  |  | : `The video generated is expected to be approximately${formatTime( | 
														
													
														
															
																|  |  |  |  |  | uploadAudioTime.value | 
														
													
														
															
																|  |  |  |  |  | )} in length` | 
														
													
														
															
																|  |  |  |  |  | ); | 
														
													
														
															
																|  |  | const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频 |  |  | const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频 | 
														
													
														
															
																|  |  | if (res4.message == "success") { |  |  | if (res4.message == "success") { | 
														
													
														
															
																|  |  | ElMessage.success( |  |  | ElMessage.success( | 
														
													
												
													
														
															
																|  | @@ -1313,6 +1349,7 @@ const createLoading = ref(false); | 
														
													
														
															
																|  |  | // 保存数据 |  |  | // 保存数据 | 
														
													
														
															
																|  |  | async function saveOrUpdate(index, isSaveVideo) { |  |  | async function saveOrUpdate(index, isSaveVideo) { | 
														
													
														
															
																|  |  | if (createLoading.value == true) { |  |  | if (createLoading.value == true) { | 
														
													
														
															
																|  |  |  |  |  | ElMessage.error(lanChange.value == "zh-cn" ? `正在生成` : `Be generating`); | 
														
													
														
															
																|  |  | return; |  |  | return; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮 |  |  | tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮 | 
														
													
												
													
														
															
																|  | @@ -1363,16 +1400,32 @@ async function saveOrUpdate(index, isSaveVideo) { | 
														
													
														
															
																|  |  | router.push("/myCreating"); |  |  | router.push("/myCreating"); | 
														
													
														
															
																|  |  | return; |  |  | return; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 |  |  |  | 
														
													
														
															
																|  |  | if (res3.message == "success") { |  |  |  | 
														
													
														
															
																|  |  | ElMessage.success( |  |  |  | 
														
													
														
															
																|  |  | lanChange.value == "zh-cn" |  |  |  | 
														
													
														
															
																|  |  | ? `视频正在生成中,请耐心等待` |  |  |  | 
														
													
														
															
																|  |  | : `The video is being generated, please wait patiently` |  |  |  | 
														
													
														
															
																|  |  | ); |  |  |  | 
														
													
														
															
																|  |  | } |  |  |  | 
														
													
														
															
																|  |  | createLoading.value = false; |  |  |  | 
														
													
														
															
																|  |  | router.push("/myCreating"); |  |  |  | 
														
													
														
															
																|  |  |  |  |  | // 获取预估时长 | 
														
													
														
															
																|  |  |  |  |  | const res4 = await previewAudioApi( | 
														
													
														
															
																|  |  |  |  |  | textareaContent.value, | 
														
													
														
															
																|  |  |  |  |  | sound.value, | 
														
													
														
															
																|  |  |  |  |  | soundStyle.value | 
														
													
														
															
																|  |  |  |  |  | ); | 
														
													
														
															
																|  |  |  |  |  | ElMessage.success( | 
														
													
														
															
																|  |  |  |  |  | lanChange.value == "zh-cn" | 
														
													
														
															
																|  |  |  |  |  | ? `预计生成的视频时长约为${formatTime(res4.data.data)}` | 
														
													
														
															
																|  |  |  |  |  | : `The video generated is expected to be approximately${formatTime( | 
														
													
														
															
																|  |  |  |  |  | res4.data.data | 
														
													
														
															
																|  |  |  |  |  | )} in length` | 
														
													
														
															
																|  |  |  |  |  | ); | 
														
													
														
															
																|  |  |  |  |  | // 3秒后调用生成视频 | 
														
													
														
															
																|  |  |  |  |  | const changeHasNewCreate = setTimeout(async () => { | 
														
													
														
															
																|  |  |  |  |  | const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 | 
														
													
														
															
																|  |  |  |  |  | if (res3.message == "success") { | 
														
													
														
															
																|  |  |  |  |  | ElMessage.success( | 
														
													
														
															
																|  |  |  |  |  | lanChange.value == "zh-cn" | 
														
													
														
															
																|  |  |  |  |  | ? `视频正在生成中,请耐心等待` | 
														
													
														
															
																|  |  |  |  |  | : `The video is being generated, please wait patiently` | 
														
													
														
															
																|  |  |  |  |  | ); | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  |  |  |  | createLoading.value = false; | 
														
													
														
															
																|  |  |  |  |  | router.push("/myCreating"); | 
														
													
														
															
																|  |  |  |  |  | }, 3000); | 
														
													
														
															
																|  |  | } catch (error) { |  |  | } catch (error) { | 
														
													
														
															
																|  |  | // ElMessage.error($t(error.message)); |  |  | // ElMessage.error($t(error.message)); | 
														
													
														
															
																|  |  | ElMessage.error(error); |  |  | ElMessage.error(error); | 
														
													
												
													
														
															
																|  | @@ -1404,6 +1457,7 @@ async function saveOrUpdate(index, isSaveVideo) { | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | if (index == 3) { |  |  | if (index == 3) { | 
														
													
														
															
																|  |  |  |  |  | createLoading.value = true; | 
														
													
														
															
																|  |  | try { |  |  | try { | 
														
													
														
															
																|  |  | if (!saveOrUpdateData.personPhotoId) { |  |  | if (!saveOrUpdateData.personPhotoId) { | 
														
													
														
															
																|  |  | ElMessage.error( |  |  | ElMessage.error( | 
														
													
												
													
														
															
																|  | @@ -1433,6 +1487,13 @@ async function saveOrUpdate(index, isSaveVideo) { | 
														
													
														
															
																|  |  | return; |  |  | return; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | console.log("ceshi"); |  |  | console.log("ceshi"); | 
														
													
														
															
																|  |  |  |  |  | ElMessage.success( | 
														
													
														
															
																|  |  |  |  |  | lanChange.value == "zh-cn" | 
														
													
														
															
																|  |  |  |  |  | ? `预计生成的视频时长约为${formatTime(estimatedDuration.value)}` | 
														
													
														
															
																|  |  |  |  |  | : `The video generated is expected to be approximately${formatTime( | 
														
													
														
															
																|  |  |  |  |  | estimatedDuration.value | 
														
													
														
															
																|  |  |  |  |  | )} in length` | 
														
													
														
															
																|  |  |  |  |  | ); | 
														
													
														
															
																|  |  | const res2 = await createVideoApi({ id: res1.data.id }); // 生成视频 |  |  | const res2 = await createVideoApi({ id: res1.data.id }); // 生成视频 | 
														
													
														
															
																|  |  | if (res2.message == "success") { |  |  | if (res2.message == "success") { | 
														
													
														
															
																|  |  | ElMessage.success( |  |  | ElMessage.success( | 
														
													
												
													
														
															
																|  | @@ -1444,11 +1505,27 @@ async function saveOrUpdate(index, isSaveVideo) { | 
														
													
														
															
																|  |  | createLoading.value = false; |  |  | createLoading.value = false; | 
														
													
														
															
																|  |  | router.push("/myCreating"); |  |  | router.push("/myCreating"); | 
														
													
														
															
																|  |  | } catch (error) { |  |  | } catch (error) { | 
														
													
														
															
																|  |  | ElMessage.error(error); |  |  |  | 
														
													
														
															
																|  |  |  |  |  | if (error) { | 
														
													
														
															
																|  |  |  |  |  | ElMessage.error(error); | 
														
													
														
															
																|  |  |  |  |  | } else { | 
														
													
														
															
																|  |  |  |  |  | ElMessage.error( | 
														
													
														
															
																|  |  |  |  |  | lanChange.value == "zh-cn" | 
														
													
														
															
																|  |  |  |  |  | ? `生成失败,请稍后重试` | 
														
													
														
															
																|  |  |  |  |  | : `Failed to generate, please try again later` | 
														
													
														
															
																|  |  |  |  |  | ); | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  | createLoading.value = false; |  |  | createLoading.value = false; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  |  |  |  | // 预估时长时把秒转为分 | 
														
													
														
															
																|  |  |  |  |  | function formatTime(seconds) { | 
														
													
														
															
																|  |  |  |  |  | const minutes = Math.floor(Math.floor(seconds) / 60); | 
														
													
														
															
																|  |  |  |  |  | const remainingSeconds = Math.floor(seconds) % 60; | 
														
													
														
															
																|  |  |  |  |  | const formattedMinutes = String(minutes).padStart(2, "0"); | 
														
													
														
															
																|  |  |  |  |  | const formattedSeconds = String(remainingSeconds).padStart(2, "0"); | 
														
													
														
															
																|  |  |  |  |  | return `${formattedMinutes}:${formattedSeconds}`; | 
														
													
														
															
																|  |  |  |  |  | } | 
														
													
														
															
																|  |  | //#endregion ---------------------------- |  |  | //#endregion ---------------------------- | 
														
													
														
															
																|  |  | 
 |  |  | 
 | 
														
													
														
															
																|  |  | //#region 根据作品id查询作品信息并回显 |  |  | //#region 根据作品id查询作品信息并回显 | 
														
													
												
													
														
															
																|  | @@ -1491,6 +1568,7 @@ const musicListPageSize = ref(8); // | 
														
													
														
															
																|  |  | const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 |  |  | const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 | 
														
													
														
															
																|  |  | const musicData = ref(null); //上传歌曲的数据 |  |  | const musicData = ref(null); //上传歌曲的数据 | 
														
													
														
															
																|  |  | const fileMusicInput = ref(null); // 上传组件的dom |  |  | const fileMusicInput = ref(null); // 上传组件的dom | 
														
													
														
															
																|  |  |  |  |  | const estimatedDuration = ref(""); // card3的生成视频预估时长 | 
														
													
														
															
																|  |  | // tab切换 |  |  | // tab切换 | 
														
													
														
															
																|  |  | function musicTabActiveChange(index) { |  |  | function musicTabActiveChange(index) { | 
														
													
														
															
																|  |  | if (index == 2) { |  |  | if (index == 2) { | 
														
													
												
													
														
															
																|  | @@ -1532,9 +1610,10 @@ const musicListPageNumPersonChange = (val) => { | 
														
													
														
															
																|  |  | getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value); |  |  | getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value); | 
														
													
														
															
																|  |  | }; |  |  | }; | 
														
													
														
															
																|  |  | // 点击选择音乐 |  |  | // 点击选择音乐 | 
														
													
														
															
																|  |  | function chooseMusicUrl(url, id) { |  |  |  | 
														
													
														
															
																|  |  | audioMusicUrl.value = url; |  |  |  | 
														
													
														
															
																|  |  | musicItemAction.value = id; |  |  |  | 
														
													
														
															
																|  |  |  |  |  | function chooseMusicUrl(item) { | 
														
													
														
															
																|  |  |  |  |  | audioMusicUrl.value = item.url; | 
														
													
														
															
																|  |  |  |  |  | musicItemAction.value = item.id; | 
														
													
														
															
																|  |  |  |  |  | estimatedDuration.value = item.time; | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | // 转化秒为分秒 |  |  | // 转化秒为分秒 | 
														
													
														
															
																|  |  | function handleTime(time) { |  |  | function handleTime(time) { | 
														
													
												
													
														
															
																|  | @@ -1789,11 +1868,13 @@ onMounted(async () => { | 
														
													
														
															
																|  |  | }); |  |  | }); | 
														
													
														
															
																|  |  | //#endregion ---------------------------- |  |  | //#endregion ---------------------------- | 
														
													
														
															
																|  |  | 
 |  |  | 
 | 
														
													
														
															
																|  |  |  |  |  | //#region 页面销毁 | 
														
													
														
															
																|  |  | onUnmounted(() => { |  |  | onUnmounted(() => { | 
														
													
														
															
																|  |  | if (mySocket) { |  |  | if (mySocket) { | 
														
													
														
															
																|  |  | mySocket.close(); |  |  | mySocket.close(); | 
														
													
														
															
																|  |  | } |  |  | } | 
														
													
														
															
																|  |  | }); |  |  | }); | 
														
													
														
															
																|  |  |  |  |  | //#endregion ---------------------- | 
														
													
														
															
																|  |  | </script> |  |  | </script> | 
														
													
														
															
																|  |  | 
 |  |  | 
 | 
														
													
														
															
																|  |  | <style lang="scss" scoped> |  |  | <style lang="scss" scoped> | 
														
													
												
													
														
															
																|  | 
 |