|  |  | @@ -7,18 +7,18 @@ | 
		
	
		
			
			|  |  |  | <div class="avatar"> | 
		
	
		
			
			|  |  |  | <img | 
		
	
		
			
			|  |  |  | :src=" | 
		
	
		
			
			|  |  |  | userInfoPinia.userInfo.avatarUrl | 
		
	
		
			
			|  |  |  | ? userInfoPinia.userInfo.avatarUrl | 
		
	
		
			
			|  |  |  | localStorageAccountInfo.avatarUrl | 
		
	
		
			
			|  |  |  | ? localStorageAccountInfo.avatarUrl | 
		
	
		
			
			|  |  |  | : defaultAvater | 
		
	
		
			
			|  |  |  | " | 
		
	
		
			
			|  |  |  | alt="" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="info"> | 
		
	
		
			
			|  |  |  | <div class="name" v-if="userInfoPinia.userInfo.name"> | 
		
	
		
			
			|  |  |  | {{ userInfoPinia.userInfo.name }} | 
		
	
		
			
			|  |  |  | <div class="name" v-if="localStorageAccountInfo.name"> | 
		
	
		
			
			|  |  |  | {{ localStorageAccountInfo.name }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <span>{{ userInfoPinia.userInfo.email }}</span> | 
		
	
		
			
			|  |  |  | <span>{{ localStorageAccountInfo.email }}</span> | 
		
	
		
			
			|  |  |  | <div> | 
		
	
		
			
			|  |  |  | <span class="password pointer" @click="showEditInfoDialog = true">{{ | 
		
	
		
			
			|  |  |  | $t("account.editInfo") | 
		
	
	
		
			
				|  |  | @@ -49,6 +49,12 @@ | 
		
	
		
			
			|  |  |  | <!-- <div class="codeImg"> | 
		
	
		
			
			|  |  |  | <img ref="codeImgRef" :src="defaultAvater" alt="" /> | 
		
	
		
			
			|  |  |  | </div> --> | 
		
	
		
			
			|  |  |  | <div class="mask"> | 
		
	
		
			
			|  |  |  | <div class="title"> | 
		
	
		
			
			|  |  |  | <el-icon><i-ep-Lock /></el-icon> | 
		
	
		
			
			|  |  |  | {{ $t("createVideo.comingSoon") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="other"> | 
		
	
		
			
			|  |  |  | <div v-if="lanChange == 'en'"> | 
		
	
		
			
			|  |  |  | <span>Invite friends to get</span> | 
		
	
	
		
			
				|  |  | @@ -214,6 +220,10 @@ const { locale } = useI18n(); | 
		
	
		
			
			|  |  |  | const lanChange = ref(locale); //国际化 | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const userInfoPinia = userInfoModules(); //pinia | 
		
	
		
			
			|  |  |  | // const userInfoPinia = localStorage.getItem("AccountInfo");//pinia | 
		
	
		
			
			|  |  |  | const localStorageAccountInfo = ref( | 
		
	
		
			
			|  |  |  | JSON.parse(localStorage.getItem("AccountInfo")) | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 编辑个人信息 | 
		
	
		
			
			|  |  |  | const showEditInfoDialog = ref(false); //控制弹窗显隐 | 
		
	
	
		
			
				|  |  | @@ -240,33 +250,55 @@ async function chooseImg(e) { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 上传编辑信息 | 
		
	
		
			
			|  |  |  | async function submitUserInfo() { | 
		
	
		
			
			|  |  |  | let formData = new FormData(); | 
		
	
		
			
			|  |  |  | const timestamp = Date.now(); | 
		
	
		
			
			|  |  |  | formData.append("file", dialogAvatarData.value, timestamp + ".png"); | 
		
	
		
			
			|  |  |  | const res1 = await awsImgUpload(formData); | 
		
	
		
			
			|  |  |  | const data = { | 
		
	
		
			
			|  |  |  | name: userNameinput.value, | 
		
	
		
			
			|  |  |  | avatarUrl: res1.data.url, | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res2 = await updUserInfoApi(data); | 
		
	
		
			
			|  |  |  | ElMessage.success( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `修改成功` : `Modified successfully` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | userInfoPinia.getUserInfo(); | 
		
	
		
			
			|  |  |  | showEditInfoDialog.value = false; | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? `修改失败,请稍后重试` | 
		
	
		
			
			|  |  |  | : `The modification failed. Please try again later` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | if (dialogAvatarData.value) { | 
		
	
		
			
			|  |  |  | let formData = new FormData(); | 
		
	
		
			
			|  |  |  | const timestamp = Date.now(); | 
		
	
		
			
			|  |  |  | formData.append("file", dialogAvatarData.value, timestamp + ".png"); | 
		
	
		
			
			|  |  |  | const res1 = await awsImgUpload(formData); | 
		
	
		
			
			|  |  |  | const data = { | 
		
	
		
			
			|  |  |  | name: userNameinput.value, | 
		
	
		
			
			|  |  |  | avatarUrl: res1.data.url, | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res2 = await updUserInfoApi(data); | 
		
	
		
			
			|  |  |  | ElMessage.success( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `修改成功` : `Modified successfully` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | await userInfoPinia.getUserInfo(); | 
		
	
		
			
			|  |  |  | showEditInfoDialog.value = false; | 
		
	
		
			
			|  |  |  | router.go(0); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? `修改失败,请稍后重试` | 
		
	
		
			
			|  |  |  | : `The modification failed. Please try again later` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | const data = { | 
		
	
		
			
			|  |  |  | name: userNameinput.value, | 
		
	
		
			
			|  |  |  | }; | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res2 = await updUserInfoApi(data); | 
		
	
		
			
			|  |  |  | ElMessage.success( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" ? `修改成功` : `Modified successfully` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | await userInfoPinia.getUserInfo(); | 
		
	
		
			
			|  |  |  | showEditInfoDialog.value = false; | 
		
	
		
			
			|  |  |  | router.go(0); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | ElMessage.error( | 
		
	
		
			
			|  |  |  | lanChange.value == "zh-cn" | 
		
	
		
			
			|  |  |  | ? `修改失败,请稍后重试` | 
		
	
		
			
			|  |  |  | : `The modification failed. Please try again later` | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 关闭弹窗清空 | 
		
	
		
			
			|  |  |  | function closeInfoDialog() { | 
		
	
		
			
			|  |  |  | userNameinput.value = userInfoPinia.userInfo.name; | 
		
	
		
			
			|  |  |  | dialogAvatarUrl.value = userInfoPinia.userInfo.avatarUrl; | 
		
	
		
			
			|  |  |  | userNameinput.value = localStorageAccountInfo.value.name; | 
		
	
		
			
			|  |  |  | dialogAvatarUrl.value = localStorageAccountInfo.value.avatarUrl; | 
		
	
		
			
			|  |  |  | dialogAvatarData.value = null; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion --------------------------- | 
		
	
	
		
			
				|  |  | @@ -362,10 +394,15 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | getMyInviteCode(); // 查询用户的邀请码 | 
		
	
		
			
			|  |  |  | getIsUseState(); //查询是否使用过邀请码 | 
		
	
		
			
			|  |  |  | getInviteList(); | 
		
	
		
			
			|  |  |  | console.log(userInfoPinia.userInfo); | 
		
	
		
			
			|  |  |  | console.log(localStorage.userInfo); | 
		
	
		
			
			|  |  |  | userNameinput.value = userInfoPinia.userInfo.name; | 
		
	
		
			
			|  |  |  | dialogAvatarUrl.value = userInfoPinia.userInfo.avatarUrl; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | userNameinput.value = localStorageAccountInfo.value.name; | 
		
	
		
			
			|  |  |  | dialogAvatarUrl.value = localStorageAccountInfo.value.avatarUrl; | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | //#endregion --------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region | 
		
	
		
			
			|  |  |  | watch(localStorageAccountInfo.value, (newValue) => { | 
		
	
		
			
			|  |  |  | console.log("LocalStorage 的值发生了变化:", newValue); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | //#endregion --------------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
	
		
			
				|  |  | @@ -478,7 +515,50 @@ function routerTo(url) { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | &-three { | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | height: 200px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | .mask { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 0; | 
		
	
		
			
			|  |  |  | left: 0; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | line-height: 780px; | 
		
	
		
			
			|  |  |  | font-size: 120px; | 
		
	
		
			
			|  |  |  | font-weight: 900; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | background-color: rgba(0, 0, 0, 0.5); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | z-index: 9; | 
		
	
		
			
			|  |  |  | .title { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 20%; | 
		
	
		
			
			|  |  |  | left: 38%; | 
		
	
		
			
			|  |  |  | font-size: 30px; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | line-height: 80px; | 
		
	
		
			
			|  |  |  | background-image: -webkit-linear-gradient( | 
		
	
		
			
			|  |  |  | left, | 
		
	
		
			
			|  |  |  | #4b61dc, | 
		
	
		
			
			|  |  |  | #15d1b8 25%, | 
		
	
		
			
			|  |  |  | #4b61dc 50%, | 
		
	
		
			
			|  |  |  | #15d1b8 75%, | 
		
	
		
			
			|  |  |  | #4b61dc | 
		
	
		
			
			|  |  |  | ) !important; | 
		
	
		
			
			|  |  |  | -webkit-text-fill-color: transparent !important; | 
		
	
		
			
			|  |  |  | -webkit-background-clip: text !important; | 
		
	
		
			
			|  |  |  | background-clip: text !important; | 
		
	
		
			
			|  |  |  | -webkit-background-size: 200% 100% !important; | 
		
	
		
			
			|  |  |  | background-size: 200% 100% !important; | 
		
	
		
			
			|  |  |  | .el-icon { | 
		
	
		
			
			|  |  |  | padding-top: -3px; | 
		
	
		
			
			|  |  |  | color: #15d1b8; | 
		
	
		
			
			|  |  |  | vertical-align: middle; | 
		
	
		
			
			|  |  |  | font-size: 25px; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .codeImg { | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | padding: 10px; | 
		
	
	
		
			
				|  |  | 
 |