|  |  | @@ -108,8 +108,9 @@ | 
		
	
		
			
			|  |  |  | <!-- 选中需要上传的图片后 --> | 
		
	
		
			
			|  |  |  | <div class="left-top" v-show="showUploadBtn == 4"> | 
		
	
		
			
			|  |  |  | <el-row style="display: flex; justify-content: flex-end"> | 
		
	
		
			
			|  |  |  | <!-- 上传按钮 --> | 
		
	
		
			
			|  |  |  | <div class="btnBox" v-show="submitImgBtn"> | 
		
	
		
			
			|  |  |  | <!-- 上传按钮 废弃了--> | 
		
	
		
			
			|  |  |  | <!-- <div v-if="false" class="btnBox" v-show="submitImgBtn"> --> | 
		
	
		
			
			|  |  |  | <div v-if="false" class="btnBox"> | 
		
	
		
			
			|  |  |  | <button class="uploadBtn"> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.reselect") }} | 
		
	
		
			
			|  |  |  | <input accept="image/*" type="file" @change="lookImg" /> | 
		
	
	
		
			
				|  |  | @@ -236,6 +237,7 @@ | 
		
	
		
			
			|  |  |  | :infinite-scroll-disabled="overLoadUser" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <div class="title"> | 
		
	
		
			
			|  |  |  | <el-icon><i-ep-Lock /></el-icon> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.comingSoon") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
	
		
			
				|  |  | @@ -428,30 +430,87 @@ | 
		
	
		
			
			|  |  |  | <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="searchInput" | 
		
	
		
			
			|  |  |  | :placeholder="$t('createVideo.searchMusic')" | 
		
	
		
			
			|  |  |  | @keyup.enter="searchMusicList" | 
		
	
		
			
			|  |  |  | <!-- tab栏 --> | 
		
	
		
			
			|  |  |  | <div class="musicTab"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="musicTabItem" | 
		
	
		
			
			|  |  |  | :class="musicTabActive == 1 ? 'musicTabItemActive' : ''" | 
		
	
		
			
			|  |  |  | @click="musicTabActive = 1" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.hotMusic") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | v-if="AccessToken" | 
		
	
		
			
			|  |  |  | class="musicTabItem" | 
		
	
		
			
			|  |  |  | :class="musicTabActive == 2 ? 'musicTabItemActive' : ''" | 
		
	
		
			
			|  |  |  | @click="musicTabActive = 2" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.personalWarehouse") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 上传音乐 --> | 
		
	
		
			
			|  |  |  | <div v-if="musicTabActive == 2" class="uploadVideo"> | 
		
	
		
			
			|  |  |  | + | 
		
	
		
			
			|  |  |  | <input | 
		
	
		
			
			|  |  |  | accept="audio/*" | 
		
	
		
			
			|  |  |  | type="file" | 
		
	
		
			
			|  |  |  | ref="fileMusicInput" | 
		
	
		
			
			|  |  |  | @click="e.target.value = null" | 
		
	
		
			
			|  |  |  | @change="uploadMusic" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-edit" @click="searchMusicList" | 
		
	
		
			
			|  |  |  | ><i-ep-search | 
		
	
		
			
			|  |  |  | /></el-icon> | 
		
	
		
			
			|  |  |  | </div> --> | 
		
	
		
			
			|  |  |  | <!-- 音乐列表展示 --> | 
		
	
		
			
			|  |  |  | <div class="musicList"> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 系统音乐列表展示 --> | 
		
	
		
			
			|  |  |  | <div v-if="musicTabActive == 1" class="musicList"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | @click="chooseMusicUrl(item.url, item.id)" | 
		
	
		
			
			|  |  |  | class="musicItem" | 
		
	
		
			
			|  |  |  | :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" | 
		
	
		
			
			|  |  |  | v-for="item in musicListSystem" | 
		
	
		
			
			|  |  |  | :key="item.id" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <span class="musicNmae"> 🎵{{ item.name }}</span> | 
		
	
		
			
			|  |  |  | <span class="musicTime"> {{ handleTime(item.time) }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 个人音乐列表展示 --> | 
		
	
		
			
			|  |  |  | <div v-if="musicTabActive == 2" class="musicList"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | @click="chooseMusicUrl(item.url, item.id)" | 
		
	
		
			
			|  |  |  | class="musicItem" | 
		
	
		
			
			|  |  |  | :class="musicItemAction == item.id ? 'musicItemAvtive' : ''" | 
		
	
		
			
			|  |  |  | v-for="item in musicList" | 
		
	
		
			
			|  |  |  | v-for="item in musicListPerson" | 
		
	
		
			
			|  |  |  | :key="item.id" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <span class="musicNmae"> {{ item.name }}</span> | 
		
	
		
			
			|  |  |  | <span class="musicNmae"> 🎵{{ item.name }}</span> | 
		
	
		
			
			|  |  |  | <span class="musicTime"> {{ handleTime(item.time) }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 系统分页 --> | 
		
	
		
			
			|  |  |  | <div v-if="musicTabActive == 1" class="pagination"> | 
		
	
		
			
			|  |  |  | <el-pagination | 
		
	
		
			
			|  |  |  | v-model:current-page="musicListPageNumSystem" | 
		
	
		
			
			|  |  |  | v-model:page-size="musicListPageSize" | 
		
	
		
			
			|  |  |  | :small="false" | 
		
	
		
			
			|  |  |  | :disabled="false" | 
		
	
		
			
			|  |  |  | :background="true" | 
		
	
		
			
			|  |  |  | layout="total, prev, pager, next, jumper" | 
		
	
		
			
			|  |  |  | :total="musicListTotalSystem" | 
		
	
		
			
			|  |  |  | @current-change="musicListPageNumSystemChange" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 个人分页 --> | 
		
	
		
			
			|  |  |  | <div v-if="musicTabActive == 2" class="pagination"> | 
		
	
		
			
			|  |  |  | <el-pagination | 
		
	
		
			
			|  |  |  | v-model:current-page="musicListPageNumPerson" | 
		
	
		
			
			|  |  |  | v-model:page-size="musicListPageSize" | 
		
	
		
			
			|  |  |  | :small="false" | 
		
	
		
			
			|  |  |  | :disabled="false" | 
		
	
		
			
			|  |  |  | :background="true" | 
		
	
		
			
			|  |  |  | layout="total, prev, pager, next, jumper" | 
		
	
		
			
			|  |  |  | :total="musicListTotalPerson" | 
		
	
		
			
			|  |  |  | @current-change="musicListPageNumPersonChange" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="AudioBox" v-if="audioMusicUrl"> | 
		
	
		
			
			|  |  |  | <audio controls :src="audioMusicUrl" id="uploadAudio"></audio> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
	
		
			
				|  |  | @@ -610,7 +669,9 @@ import { | 
		
	
		
			
			|  |  |  | createVideoApi, | 
		
	
		
			
			|  |  |  | previewAudioApi, | 
		
	
		
			
			|  |  |  | findByIdApi, | 
		
	
		
			
			|  |  |  | musicListApi, | 
		
	
		
			
			|  |  |  | musicListSystemApi, | 
		
	
		
			
			|  |  |  | musicListPersonApi, | 
		
	
		
			
			|  |  |  | saveMusicApi, | 
		
	
		
			
			|  |  |  | } from "@/apis/createVideo"; | 
		
	
		
			
			|  |  |  | import { useI18n } from "vue-i18n"; | 
		
	
		
			
			|  |  |  | import Recorder from "js-audio-recorder"; //mp3插件 | 
		
	
	
		
			
				|  |  | @@ -802,6 +863,9 @@ async function changeFile() { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | faceItemActive.value = res2.data.id; | 
		
	
		
			
			|  |  |  | imgUrl.value = res2.data.material; | 
		
	
		
			
			|  |  |  | submitImgBtn.value = false; | 
		
	
		
			
			|  |  |  | console.log(123654); | 
		
	
		
			
			|  |  |  | showUploadBtn.value = 1; | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error(error); | 
		
	
		
			
			|  |  |  | } | 
		
	
	
		
			
				|  |  | @@ -1096,8 +1160,31 @@ async function saveOrUpdate(index, isSaveVideo) { | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | if (index == 1) { | 
		
	
		
			
			|  |  |  | createLoading.value = true; | 
		
	
		
			
			|  |  |  | if (!saveOrUpdateData.personPhotoId) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | if (!saveOrUpdateData.paperwork) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | if (!saveOrUpdateData.voiceMouldId) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | 
		
	
		
			
			|  |  |  | if (res2.code == 1002) { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 这个if判断是不是仅仅保存视频 | 
		
	
		
			
			|  |  |  | if (isSaveVideo == "saveVideo") { | 
		
	
		
			
			|  |  |  | ElMessage.success( | 
		
	
	
		
			
				|  |  | @@ -1118,11 +1205,28 @@ async function saveOrUpdate(index, isSaveVideo) { | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | router.push("/myCreating"); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | // ElMessage.error($t(error.message)); | 
		
	
		
			
			|  |  |  | ElMessage.error(error); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | if (index == 2) { | 
		
	
		
			
			|  |  |  | if (!saveOrUpdateData.personPhotoId) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | if (!saveOrUpdateData.voiceMaterialId) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? `请选择音频文件` | 
		
	
		
			
			|  |  |  | : `Please select an audio file` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res1 = await uploadAudio(isSaveVideo); // 上传音频 | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
	
		
			
				|  |  | @@ -1132,6 +1236,22 @@ async function saveOrUpdate(index, isSaveVideo) { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | if (index == 3) { | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | if (!saveOrUpdateData.personPhotoId) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | if (!saveOrUpdateData.musicId) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? `请选择音乐文件` | 
		
	
		
			
			|  |  |  | : `Please select an music file` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | createLoading.value = false; | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // 这个if判断是不是仅仅保存视频 | 
		
	
	
		
			
				|  |  | @@ -1186,18 +1306,48 @@ async function findById(findId) { | 
		
	
		
			
			|  |  |  | //#endregion ---------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 音乐tab | 
		
	
		
			
			|  |  |  | const musicList = ref(null); //展示音乐列表 | 
		
	
		
			
			|  |  |  | const musicListSystem = ref(null); //展示音乐列表 | 
		
	
		
			
			|  |  |  | const musicListPerson = ref(null); //展示音乐列表 | 
		
	
		
			
			|  |  |  | const audioMusicUrl = ref(null); //选中音乐Url回显 | 
		
	
		
			
			|  |  |  | const musicItemAction = ref(null); //选中高亮 | 
		
	
		
			
			|  |  |  | // 获取音乐列表 | 
		
	
		
			
			|  |  |  | async function getMusicList() { | 
		
	
		
			
			|  |  |  | const musicListPageNumSystem = ref(1); //系统音乐页数 | 
		
	
		
			
			|  |  |  | const musicListTotalSystem = ref(10); //系统音乐总条数 | 
		
	
		
			
			|  |  |  | const musicListPageNumPerson = ref(1); //个人音乐页数 | 
		
	
		
			
			|  |  |  | const musicListTotalPerson = ref(10); //个人音乐总条数 | 
		
	
		
			
			|  |  |  | const musicListPageSize = ref(8); // | 
		
	
		
			
			|  |  |  | const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 | 
		
	
		
			
			|  |  |  | const musicData = ref(null); //上传歌曲的数据 | 
		
	
		
			
			|  |  |  | const fileMusicInput = ref(null); // 上传组件的dom | 
		
	
		
			
			|  |  |  | // 获取系统音乐列表 | 
		
	
		
			
			|  |  |  | async function getmusicListSystem(pageNum, pageSize) { | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res = await musicListApi(); | 
		
	
		
			
			|  |  |  | musicList.value = res.data; | 
		
	
		
			
			|  |  |  | const res = await musicListSystemApi(pageNum, pageSize); | 
		
	
		
			
			|  |  |  | musicListSystem.value = res.data.list; | 
		
	
		
			
			|  |  |  | musicListTotalSystem.value = Number(res.data.total); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | console.log(error); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 获取个人音乐列表 | 
		
	
		
			
			|  |  |  | async function getmusicListPerson(pageNum, pageSize) { | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res = await musicListPersonApi(pageNum, pageSize); | 
		
	
		
			
			|  |  |  | musicListPerson.value = res.data.list; | 
		
	
		
			
			|  |  |  | musicListTotalPerson.value = Number(res.data.total); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | console.log(error); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 系统页数发生改变 | 
		
	
		
			
			|  |  |  | const musicListPageNumSystemChange = (val) => { | 
		
	
		
			
			|  |  |  | musicListPageNumSystem.value = val; | 
		
	
		
			
			|  |  |  | getmusicListSystem(musicListPageNumSystem.value, musicListPageSize.value); | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | // 个人页数发生改变 | 
		
	
		
			
			|  |  |  | const musicListPageNumPersonChange = (val) => { | 
		
	
		
			
			|  |  |  | musicListPageNumPerson.value = val; | 
		
	
		
			
			|  |  |  | getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value); | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | // 点击选择音乐 | 
		
	
		
			
			|  |  |  | function chooseMusicUrl(url, id) { | 
		
	
		
			
			|  |  |  | audioMusicUrl.value = url; | 
		
	
	
		
			
				|  |  | @@ -1205,18 +1355,51 @@ function chooseMusicUrl(url, id) { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 转化秒为分秒 | 
		
	
		
			
			|  |  |  | function handleTime(time) { | 
		
	
		
			
			|  |  |  | let m = Math.floor(time / 60); | 
		
	
		
			
			|  |  |  | let s = time % 60; | 
		
	
		
			
			|  |  |  | let m = Math.floor(time / 60).toFixed(0); | 
		
	
		
			
			|  |  |  | let s = (time % 60).toFixed(0); | 
		
	
		
			
			|  |  |  | if (s < 10) { | 
		
	
		
			
			|  |  |  | s = "0" + s; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | return m + ":" + s; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 搜索功能 | 
		
	
		
			
			|  |  |  | const searchInput = ref(null); | 
		
	
		
			
			|  |  |  | async function searchMusicList() { | 
		
	
		
			
			|  |  |  | // const res = await | 
		
	
		
			
			|  |  |  | console.log("搜索"); | 
		
	
		
			
			|  |  |  | // 选择文件上传音乐 | 
		
	
		
			
			|  |  |  | async function uploadMusic() { | 
		
	
		
			
			|  |  |  | const file = fileMusicInput.value.files[0]; | 
		
	
		
			
			|  |  |  | if (file) { | 
		
	
		
			
			|  |  |  | const videoUrl = URL.createObjectURL(file); | 
		
	
		
			
			|  |  |  | musicData.value = file; | 
		
	
		
			
			|  |  |  | let formData = new FormData(); | 
		
	
		
			
			|  |  |  | formData.append("file", musicData.value, file.name + ".mp3"); | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res = await videoUpload(formData); | 
		
	
		
			
			|  |  |  | if (res) { | 
		
	
		
			
			|  |  |  | // ElMessage.success("上传成功!"); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? `上传音频失败!` | 
		
	
		
			
			|  |  |  | : `Failed to upload audio!` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 查询进度 | 
		
	
		
			
			|  |  |  | intervalId = setInterval(async () => { | 
		
	
		
			
			|  |  |  | const res2 = await uploadProgressApi(res.data.videoId); | 
		
	
		
			
			|  |  |  | if (res2.data == "complete") { | 
		
	
		
			
			|  |  |  | clearInterval(intervalId); | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res3 = await saveMusicApi({ voiceId: res.data.videoId }); | 
		
	
		
			
			|  |  |  | afterSaveAudioId.value = res2.data.id; // 得到id | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error(error); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }, 1000); | 
		
	
		
			
			|  |  |  | // ElMessage.success("上传成功!"); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error(error); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion ---------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -1242,14 +1425,26 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | getAiFaceList(1, 10, 1); | 
		
	
		
			
			|  |  |  | if (AccessToken) { | 
		
	
		
			
			|  |  |  | getAiFaceUserList(1, 10, 3); | 
		
	
		
			
			|  |  |  | await getmusicListPerson( | 
		
	
		
			
			|  |  |  | musicListPageNumPerson.value, | 
		
	
		
			
			|  |  |  | musicListPageSize.value | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | await voiceTotal(); | 
		
	
		
			
			|  |  |  | if (route.query.id) { | 
		
	
		
			
			|  |  |  | await findById(route.query.id); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | await getMusicList(); | 
		
	
		
			
			|  |  |  | await getmusicListSystem( | 
		
	
		
			
			|  |  |  | musicListPageNumSystem.value, | 
		
	
		
			
			|  |  |  | musicListPageSize.value | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | musicList.value.forEach((item) => { | 
		
	
		
			
			|  |  |  | musicListSystem.value.forEach((item) => { | 
		
	
		
			
			|  |  |  | if (item.id == musicItemAction.value) { | 
		
	
		
			
			|  |  |  | audioMusicUrl.value = item.url; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | musicListPerson.value.forEach((item) => { | 
		
	
		
			
			|  |  |  | if (item.id == musicItemAction.value) { | 
		
	
		
			
			|  |  |  | audioMusicUrl.value = item.url; | 
		
	
		
			
			|  |  |  | } | 
		
	
	
		
			
				|  |  | @@ -1607,6 +1802,10 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | background-clip: text !important; | 
		
	
		
			
			|  |  |  | -webkit-background-size: 200% 100% !important; | 
		
	
		
			
			|  |  |  | background-size: 200% 100% !important; | 
		
	
		
			
			|  |  |  | .el-icon { | 
		
	
		
			
			|  |  |  | vertical-align: text-top; | 
		
	
		
			
			|  |  |  | font-size: 32px; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .aiPicTab { | 
		
	
	
		
			
				|  |  | @@ -1758,7 +1957,6 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | border: #000 1px solid; | 
		
	
		
			
			|  |  |  | border-radius: 10px; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | box-shadow: #00000026 2px 2px 2px 2px; | 
		
	
	
		
			
				|  |  | @@ -1841,6 +2039,49 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | .el-icon { | 
		
	
		
			
			|  |  |  | vertical-align: text-top; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .musicTab { | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 50px; | 
		
	
		
			
			|  |  |  | line-height: 50px; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | .musicTabItem { | 
		
	
		
			
			|  |  |  | background-color: #f5f7fa; | 
		
	
		
			
			|  |  |  | width: 50%; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .musicTabItemActive { | 
		
	
		
			
			|  |  |  | background-color: #000; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .uploadVideo { | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | margin-top: 10px; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | border: #000 1px solid; | 
		
	
		
			
			|  |  |  | border-radius: 10px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | box-shadow: #00000026 2px 2px 2px 2px; | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
		
			
			|  |  |  | transform: translateY(-10px); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | margin-bottom: 20px; | 
		
	
		
			
			|  |  |  | height: 100px; | 
		
	
		
			
			|  |  |  | font-size: 50px; | 
		
	
		
			
			|  |  |  | font-weight: 700; | 
		
	
		
			
			|  |  |  | line-height: 100px; | 
		
	
		
			
			|  |  |  | input { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 0; | 
		
	
		
			
			|  |  |  | left: 0; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | opacity: 0; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .musicList { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
	
		
			
				|  |  | @@ -1861,7 +2102,8 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | .musicNmae { | 
		
	
		
			
			|  |  |  | display: inline-block; | 
		
	
		
			
			|  |  |  | width: 320px; | 
		
	
		
			
			|  |  |  | width: 280px; | 
		
	
		
			
			|  |  |  | margin-right: 20px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | text-overflow: ellipsis; | 
		
	
		
			
			|  |  |  | white-space: nowrap; | 
		
	
	
		
			
				|  |  | @@ -1879,6 +2121,21 @@ onMounted(async () => { | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .pagination { | 
		
	
		
			
			|  |  |  | // position: fixed; | 
		
	
		
			
			|  |  |  | // bottom: 20px; | 
		
	
		
			
			|  |  |  | // left: 50%; | 
		
	
		
			
			|  |  |  | // transform: translateX(-50%); | 
		
	
		
			
			|  |  |  | margin-top: 10px; | 
		
	
		
			
			|  |  |  | background-color: #ffffff; | 
		
	
		
			
			|  |  |  | padding: 10px 20px; | 
		
	
		
			
			|  |  |  | border-radius: 8px; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
		
			
			|  |  |  | background-color: #b8b8b873; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .AudioBox { | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
		
			
			|  |  |  | justify-content: space-around; | 
		
	
	
		
			
				|  |  | 
 |