100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
<script setup lang="tsx">
|
|
useSystemStore().currentPage = 'home';
|
|
const avatarURL = ref('');
|
|
onMounted(async () => {
|
|
try {
|
|
avatarURL.value = (await useUserStore().getAvatarURL())!;
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
console.log(avatarURL.value);
|
|
});
|
|
function doShow(x: string) {
|
|
const notShow = ['userAvatar', 'userId', 'usernameOrEmail', 'lastGetTime'];
|
|
for (const i of notShow) {
|
|
if (x === i) return false;
|
|
}
|
|
return true;
|
|
}
|
|
function toChinese(x: string) {
|
|
const map = {
|
|
userName: '用户名',
|
|
userId: '用户ID',
|
|
userEmail: '邮箱',
|
|
phone: '手机号',
|
|
lastGetTime: '最后登录时间',
|
|
userAvatar: '头像',
|
|
userAmount: '余额',
|
|
userBirthday: '生日',
|
|
};
|
|
return map[x as keyof typeof map];
|
|
}
|
|
function getIcon(key: string) {
|
|
const map = {
|
|
userName: 'user',
|
|
userEmail: 'mail',
|
|
userAmount: 'money',
|
|
userBirthday: 'cake',
|
|
};
|
|
const val = map[key as keyof typeof map];
|
|
return <t-icon v-if="" class="t-menu__operations-icon" name={val} />;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6">
|
|
<div class="flex md:flex-row flex-col">
|
|
<div
|
|
class="flex-[1] m-2 h-full bg-white rounded-xl border-gray-200 border-2 min-h-[300px] min-w-48"
|
|
>
|
|
<div class="flex flex-row md:flex-col justify-center p-4">
|
|
<t-image
|
|
:src="avatarURL"
|
|
alt="头像"
|
|
:fit="'contain'"
|
|
shape="circle"
|
|
class="max-h-72 max-w-72 m-auto"
|
|
/>
|
|
<span class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
|
|
>欢迎 {{ useUserStore().userName }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex-[2] m-2 bg-white rounded-xl border-gray-200 border-2 flex justify-center pt-8 min-w-[558px]"
|
|
>
|
|
<t-card
|
|
title="个人信息"
|
|
class="w-10/12 max-w-[700px]"
|
|
:bordered="false"
|
|
>
|
|
<t-row
|
|
v-for="(value, key) of useUserStore().$state"
|
|
:key="key"
|
|
class="w-full"
|
|
>
|
|
<div
|
|
v-if="doShow(key)"
|
|
class="border-collapse flex flex-row w-full h-10"
|
|
>
|
|
<t-col
|
|
class="flex-[1] flex justify-center border-2 items-center"
|
|
>{{ toChinese(key) }}</t-col
|
|
>
|
|
<t-col class="flex-[2] border-2 flex items-center">
|
|
<span class="ml-4">
|
|
<component :is="getIcon(key)" />
|
|
{{ value }}
|
|
</span>
|
|
</t-col>
|
|
</div>
|
|
</t-row>
|
|
</t-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less"></style>
|