|
@@ -7,18 +7,18 @@ |
|
|
<div class="avatar"> |
|
|
<div class="avatar"> |
|
|
<img |
|
|
<img |
|
|
:src=" |
|
|
:src=" |
|
|
userInfoPinia.userInfo.avatarUrl |
|
|
|
|
|
? userInfoPinia.userInfo.avatarUrl |
|
|
|
|
|
|
|
|
localStorageAccountInfo.avatarUrl |
|
|
|
|
|
? localStorageAccountInfo.avatarUrl |
|
|
: defaultAvater |
|
|
: defaultAvater |
|
|
" |
|
|
" |
|
|
alt="" |
|
|
alt="" |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div class="info"> |
|
|
<div class="info"> |
|
|
<div class="name" v-if="userInfoPinia.userInfo.name"> |
|
|
|
|
|
{{ userInfoPinia.userInfo.name }} |
|
|
|
|
|
|
|
|
<div class="name" v-if="localStorageAccountInfo.name"> |
|
|
|
|
|
{{ localStorageAccountInfo.name }} |
|
|
</div> |
|
|
</div> |
|
|
<span>{{ userInfoPinia.userInfo.email }}</span> |
|
|
|
|
|
|
|
|
<span>{{ localStorageAccountInfo.email }}</span> |
|
|
<div> |
|
|
<div> |
|
|
<span class="password pointer" @click="showEditInfoDialog = true">{{ |
|
|
<span class="password pointer" @click="showEditInfoDialog = true">{{ |
|
|
$t("account.editInfo") |
|
|
$t("account.editInfo") |
|
@@ -49,6 +49,12 @@ |
|
|
<!-- <div class="codeImg"> |
|
|
<!-- <div class="codeImg"> |
|
|
<img ref="codeImgRef" :src="defaultAvater" alt="" /> |
|
|
<img ref="codeImgRef" :src="defaultAvater" alt="" /> |
|
|
</div> --> |
|
|
</div> --> |
|
|
|
|
|
<div class="mask"> |
|
|
|
|
|
<div class="title"> |
|
|
|
|
|
<el-icon><i-ep-Lock /></el-icon> |
|
|
|
|
|
{{ $t("createVideo.comingSoon") }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<div class="other"> |
|
|
<div class="other"> |
|
|
<div v-if="lanChange == 'en'"> |
|
|
<div v-if="lanChange == 'en'"> |
|
|
<span>Invite friends to get</span> |
|
|
<span>Invite friends to get</span> |
|
@@ -214,6 +220,10 @@ const { locale } = useI18n(); |
|
|
const lanChange = ref(locale); //国际化 |
|
|
const lanChange = ref(locale); //国际化 |
|
|
|
|
|
|
|
|
const userInfoPinia = userInfoModules(); //pinia |
|
|
const userInfoPinia = userInfoModules(); //pinia |
|
|
|
|
|
// const userInfoPinia = localStorage.getItem("AccountInfo");//pinia |
|
|
|
|
|
const localStorageAccountInfo = ref( |
|
|
|
|
|
JSON.parse(localStorage.getItem("AccountInfo")) |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
//#region 编辑个人信息 |
|
|
//#region 编辑个人信息 |
|
|
const showEditInfoDialog = ref(false); //控制弹窗显隐 |
|
|
const showEditInfoDialog = ref(false); //控制弹窗显隐 |
|
@@ -240,33 +250,55 @@ async function chooseImg(e) { |
|
|
} |
|
|
} |
|
|
// 上传编辑信息 |
|
|
// 上传编辑信息 |
|
|
async function submitUserInfo() { |
|
|
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() { |
|
|
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; |
|
|
dialogAvatarData.value = null; |
|
|
} |
|
|
} |
|
|
//#endregion --------------------------- |
|
|
//#endregion --------------------------- |
|
@@ -362,10 +394,15 @@ onMounted(() => { |
|
|
getMyInviteCode(); // 查询用户的邀请码 |
|
|
getMyInviteCode(); // 查询用户的邀请码 |
|
|
getIsUseState(); //查询是否使用过邀请码 |
|
|
getIsUseState(); //查询是否使用过邀请码 |
|
|
getInviteList(); |
|
|
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 --------------------------- |
|
|
//#endregion --------------------------- |
|
|
|
|
|
|
|
@@ -478,7 +515,50 @@ function routerTo(url) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&-three { |
|
|
&-three { |
|
|
|
|
|
position: relative; |
|
|
height: 200px; |
|
|
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 { |
|
|
.codeImg { |
|
|
position: relative; |
|
|
position: relative; |
|
|
padding: 10px; |
|
|
padding: 10px; |
|
|