117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
<script setup lang="tsx">
|
|
import { ExampleUserInfo } from '~/stores/user';
|
|
|
|
const { avatarUrl, showWelcome, data } = defineProps({
|
|
avatarUrl: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
showWelcome: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
data: {
|
|
type: ExampleUserInfo,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
function doShow(x: string) {
|
|
const notShow = [
|
|
'userAvatarPath',
|
|
'userAvatarUrl',
|
|
'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="m-2">
|
|
<slot name="header"></slot>
|
|
</div>
|
|
<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 dark:bg-zinc-800 dark:border-zinc-600"
|
|
>
|
|
<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
|
|
v-if="showWelcome"
|
|
class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
|
|
>欢迎 {{ data.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] dark:bg-[rgb(36,36,36)] dark:border-zinc-600"
|
|
>
|
|
<t-card
|
|
title="个人信息"
|
|
class="w-10/12 max-w-[700px]"
|
|
:bordered="false"
|
|
>
|
|
<t-row v-for="(value, key) of data" :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 dark:border-zinc-600"
|
|
>{{ toChinese(key) }}</t-col
|
|
>
|
|
<t-col
|
|
class="flex-[2] border-2 flex items-center dark:border-zinc-600"
|
|
>
|
|
<span class="ml-4">
|
|
<component :is="getIcon(key)" />
|
|
{{ value }}
|
|
</span>
|
|
</t-col>
|
|
</div>
|
|
</t-row>
|
|
</t-card>
|
|
</div>
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less"></style>
|