congzc 1 jaar geleden
bovenliggende
commit
14cb362efd
3 gewijzigde bestanden met toevoegingen van 117 en 34 verwijderingen
  1. +4
    -1
      src/store/modules/userInfo.js
  2. +112
    -32
      src/views/myAccount/index.vue
  3. +1
    -1
      src/views/myStore/index.vue

+ 4
- 1
src/store/modules/userInfo.js Bestand weergeven

@@ -5,21 +5,24 @@ import {
} from "../../apis/myAccount"; } from "../../apis/myAccount";
export const userInfoModules = defineStore("userInfoState", () => { export const userInfoModules = defineStore("userInfoState", () => {
// state // state
// const userInfo = ref(null)
const userInfo = ref({}) const userInfo = ref({})
// 登录获取用户信息 // 登录获取用户信息
async function getUserInfo() { async function getUserInfo() {
const res = await getUserInfoApi() const res = await getUserInfoApi()
userInfo.value = res.data userInfo.value = res.data
localStorage.setItem("AccountInfo", JSON.stringify(res.data));
} }
// 退出清除用户信息 // 退出清除用户信息
function loginOut(params) { function loginOut(params) {
userInfo.value = { userInfo.value = {
avatarUrl: null avatarUrl: null
} }
localStorage.removeItem("AccountInfo");
} }
return { userInfo, getUserInfo, loginOut }; return { userInfo, getUserInfo, loginOut };
}, },
{ {
persist: true,
persist: true
}); });

+ 112
- 32
src/views/myAccount/index.vue Bestand weergeven

@@ -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;


+ 1
- 1
src/views/myStore/index.vue Bestand weergeven

@@ -12,7 +12,7 @@
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="content"> <div class="content">
<div class="title"> <div class="title">
{{ item.typeDesc }}
{{ lanChange == "zh-cn" ? item.typeDesc : item.englishName }}
</div> </div>
<div class="money"> <div class="money">
<span class="price">{{ <span class="price">{{


Laden…
Annuleren
Opslaan