|  |  | @@ -61,7 +61,20 @@ | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <!-- 底部 --> | 
		
	
		
			
			|  |  |  | <div class="left-bottom"> | 
		
	
		
			
			|  |  |  | <div>{{ $t("createVideo.availableMould") }}:</div> | 
		
	
		
			
			|  |  |  | <div class="tab flex"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | :class="showFace == 0 ? 'tabAvtive' : ''" | 
		
	
		
			
			|  |  |  | @click="ChangeShowFaceList(0)" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.availableMould") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | :class="showFace == 1 ? 'tabAvtive' : ''" | 
		
	
		
			
			|  |  |  | @click="ChangeShowFaceList(1)" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.personalWarehouse") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="faceList"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="faceItem pointer" | 
		
	
	
		
			
				|  |  | @@ -259,10 +272,16 @@ | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </template> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <script setup> | 
		
	
		
			
			|  |  |  | import { getCurrentInstance } from "vue"; | 
		
	
		
			
			|  |  |  | import Recorder from "js-audio-recorder"; | 
		
	
		
			
			|  |  |  | import { personPhotoList, awsImgUpload, videoUpload } from "@/apis/createVideo"; | 
		
	
		
			
			|  |  |  | import { | 
		
	
		
			
			|  |  |  | personPhotoList, | 
		
	
		
			
			|  |  |  | awsImgUpload, | 
		
	
		
			
			|  |  |  | videoUpload, | 
		
	
		
			
			|  |  |  | saveImgApi, | 
		
	
		
			
			|  |  |  | } from "@/apis/createVideo"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // 获取AI头像 | 
		
	
		
			
			|  |  |  | const AiFaceList = ref([]); | 
		
	
	
		
			
				|  |  | @@ -277,7 +296,11 @@ function getAiFaceList(pageNum, pageSize) { | 
		
	
		
			
			|  |  |  | console.log(err, "err"); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // 选择显示的face列表 | 
		
	
		
			
			|  |  |  | const showFace = ref("0"); | 
		
	
		
			
			|  |  |  | function ChangeShowFaceList(index) { | 
		
	
		
			
			|  |  |  | showFace.value = index; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 标题 | 
		
	
		
			
			|  |  |  | let title = ref(""); | 
		
	
		
			
			|  |  |  | // 上传图片 | 
		
	
	
		
			
				|  |  | @@ -296,7 +319,12 @@ async function changeFile() { | 
		
	
		
			
			|  |  |  | formData.append("file", imgData.value, timestamp + ".png"); | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res = await awsImgUpload(formData); | 
		
	
		
			
			|  |  |  | ElMessage.success("上传成功!"); | 
		
	
		
			
			|  |  |  | if (res.code == 200) { | 
		
	
		
			
			|  |  |  | ElMessage.success("上传成功!"); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | ElMessage.error("上传失败!"); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | const res2 = await saveImgApi({ material: res.data.url }); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error(error); | 
		
	
		
			
			|  |  |  | } | 
		
	
	
		
			
				|  |  | @@ -533,7 +561,23 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 32%; | 
		
	
		
			
			|  |  |  | margin-top: 10px; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .tab { | 
		
	
		
			
			|  |  |  | padding: 10px; | 
		
	
		
			
			|  |  |  | > div { | 
		
	
		
			
			|  |  |  | margin-right: 20px; | 
		
	
		
			
			|  |  |  | padding: 5px 10px; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | border-radius: 5px; | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
		
			
			|  |  |  | background-color: #000; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .tabAvtive { | 
		
	
		
			
			|  |  |  | background-color: #000; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .ai { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | } | 
		
	
	
		
			
				|  |  | 
 |