wip: 🚧 个人中心临时提交
This commit is contained in:
ray
@@ -1,122 +1,151 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-row>
|
<el-tabs tab-position="left">
|
||||||
<el-col :span="6">
|
<el-tab-pane label="账号信息">
|
||||||
<el-tabs tab-position="left">
|
<div class="w-full">
|
||||||
<el-tab-pane label="账号信息">
|
<el-card class="flex-1">
|
||||||
<div class="w-full">
|
<div class="">
|
||||||
<el-card class="flex-1">
|
<div class="relative w-100px h-100px flex-center">
|
||||||
<div class="">
|
<el-avatar :src="userProfile.avatar" :size="100" />
|
||||||
<div class="relative w-100px h-100px flex-center">
|
<el-button
|
||||||
<el-avatar :src="userProfile.avatar" :size="100" />
|
type="info"
|
||||||
<el-button
|
class="absolute bottom-0 right-0 cursor-pointer"
|
||||||
type="info"
|
circle
|
||||||
class="absolute bottom-0 right-0 cursor-pointer"
|
:icon="Camera"
|
||||||
circle
|
size="small"
|
||||||
:icon="Camera"
|
@click="triggerFileUpload"
|
||||||
size="small"
|
/>
|
||||||
@click="triggerFileUpload"
|
<input
|
||||||
/>
|
type="file"
|
||||||
<input
|
ref="fileInput"
|
||||||
type="file"
|
style="display: none"
|
||||||
ref="fileInput"
|
@change="handleFileChange"
|
||||||
style="display: none"
|
/>
|
||||||
@change="handleFileChange"
|
</div>
|
||||||
/>
|
<div class="mt-5">
|
||||||
</div>
|
{{ userProfile.nickname }}
|
||||||
<div class="mt-5">
|
<el-icon class="align-middle cursor-pointer">
|
||||||
{{ userProfile.nickname }}
|
<Edit />
|
||||||
<el-icon class="align-middle cursor-pointer">
|
</el-icon>
|
||||||
<Edit />
|
</div>
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-descriptions :column="1" class="mt-10">
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template #label>
|
|
||||||
<el-icon class="align-middle"><User /></el-icon>
|
|
||||||
用户名
|
|
||||||
</template>
|
|
||||||
{{ userProfile.username }}
|
|
||||||
|
|
||||||
<el-icon
|
|
||||||
v-if="userProfile.gender === 1"
|
|
||||||
class="align-middle color-blue"
|
|
||||||
>
|
|
||||||
<Male />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon v-else class="align-middle color-pink">
|
|
||||||
<Female />
|
|
||||||
</el-icon>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template #label>
|
|
||||||
<el-icon class="align-middle"><Phone /></el-icon>
|
|
||||||
手机号码
|
|
||||||
</template>
|
|
||||||
{{ userProfile.mobile }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template #label>
|
|
||||||
<el-icon class="align-middle"><Message /></el-icon>
|
|
||||||
邮箱
|
|
||||||
</template>
|
|
||||||
{{ userProfile.email }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template #label>
|
|
||||||
<el-icon class="align-middle"><User /></el-icon>
|
|
||||||
部门
|
|
||||||
</template>
|
|
||||||
{{ userProfile.email }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template #label>
|
|
||||||
<el-icon class="align-middle"><User /></el-icon>
|
|
||||||
角色
|
|
||||||
</template>
|
|
||||||
{{ userProfile.email }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
<el-descriptions :column="1" class="mt-10">
|
||||||
<el-tab-pane label="安全设置">
|
<el-descriptions-item>
|
||||||
<el-card>
|
<template #label>
|
||||||
<el-descriptions :column="1">
|
<el-icon class="align-middle"><User /></el-icon>
|
||||||
<el-descriptions-item>
|
用户名
|
||||||
<template #label>
|
</template>
|
||||||
<el-icon class="align-middle"><Lock /></el-icon>
|
{{ userProfile.username }}
|
||||||
密码
|
|
||||||
</template>
|
|
||||||
<el-button type="primary" @click="handleOpenDialog">
|
|
||||||
修改密码
|
|
||||||
</el-button>
|
|
||||||
</el-descriptions-item>
|
|
||||||
|
|
||||||
<el-descriptions-item>
|
<el-icon
|
||||||
<template #label>
|
v-if="userProfile.gender === 1"
|
||||||
<el-icon class="align-middle"><Lock /></el-icon>
|
class="align-middle color-blue"
|
||||||
手机绑定
|
>
|
||||||
</template>
|
<Male />
|
||||||
<el-button type="primary">设置安全问题</el-button>
|
</el-icon>
|
||||||
</el-descriptions-item>
|
<el-icon v-else class="align-middle color-pink">
|
||||||
|
<Female />
|
||||||
|
</el-icon>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template #label>
|
||||||
|
<el-icon class="align-middle"><Phone /></el-icon>
|
||||||
|
手机号码
|
||||||
|
</template>
|
||||||
|
{{ userProfile.mobile }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template #label>
|
||||||
|
<el-icon class="align-middle"><Message /></el-icon>
|
||||||
|
邮箱
|
||||||
|
</template>
|
||||||
|
{{ userProfile.email }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template #label>
|
||||||
|
<el-icon class="align-middle"><User /></el-icon>
|
||||||
|
部门
|
||||||
|
</template>
|
||||||
|
{{ userProfile.email }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template #label>
|
||||||
|
<el-icon class="align-middle"><User /></el-icon>
|
||||||
|
角色
|
||||||
|
</template>
|
||||||
|
{{ userProfile.email }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="安全设置">
|
||||||
|
<el-card>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="16">
|
||||||
|
<div class="font-bold">登录密码</div>
|
||||||
|
<div class="text-14px py-2">
|
||||||
|
安全性高的密码可以使账号更安全。建议您定期更换密码，设置一个包含字母，符号或数字钟至少两项长度超过6为的密码
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="flex-y-center h-full">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
size="small"
|
||||||
|
@click="handleOpenDialog"
|
||||||
|
>
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-descriptions-item>
|
<el-row class="mt-5">
|
||||||
<template #label>
|
<el-col :span="16">
|
||||||
<el-icon class="align-middle"><Lock /></el-icon>
|
<div class="font-bold">手机</div>
|
||||||
邮箱绑定
|
<div class="text-14px py-2">
|
||||||
</template>
|
可用手机号加密码登录，可通过手机号找回密码
|
||||||
<el-button type="primary">设置安全问题</el-button>
|
</div>
|
||||||
</el-descriptions-item>
|
</el-col>
|
||||||
</el-descriptions>
|
<el-col :span="8">
|
||||||
</el-card>
|
<div class="flex-y-center h-full">
|
||||||
</el-tab-pane>
|
<el-button
|
||||||
<el-tab-pane label="偏好设置">Role</el-tab-pane>
|
type="primary"
|
||||||
<el-tab-pane label="接收设置">Task</el-tab-pane>
|
plain
|
||||||
</el-tabs>
|
size="small"
|
||||||
</el-col>
|
@click="handleOpenDialog"
|
||||||
</el-row>
|
>
|
||||||
|
绑定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row class="mt-5">
|
||||||
|
<el-col :span="16">
|
||||||
|
<div class="font-bold">邮箱</div>
|
||||||
|
<div class="text-14px py-2">
|
||||||
|
可用邮箱加密码登录，可通过邮箱找回密码
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="flex-y-center h-full">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
size="small"
|
||||||
|
@click="handleOpenDialog"
|
||||||
|
>
|
||||||
|
绑定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
<el-dialog title="修改密码" v-model:visible="dialogVisible">
|
<el-dialog title="修改密码" v-model:visible="dialogVisible">
|
||||||
<el-form
|
<el-form
|
||||||
@@ -147,7 +176,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import UserAPI, {
|
import UserAPI, {
|
||||||
UserProfileVO,
|
UserProfileVO,
|
||||||
UserProfileForm,
|
UserProfileForm,
|
||||||
@@ -155,7 +183,6 @@ import UserAPI, {
|
|||||||
} from "@/api/user";
|
} from "@/api/user";
|
||||||
import { useUserStore } from "@/store/modules/user";
|
import { useUserStore } from "@/store/modules/user";
|
||||||
import { Camera } from "@element-plus/icons-vue";
|
import { Camera } from "@element-plus/icons-vue";
|
||||||
const router = useRouter();
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
const userProfile = ref<UserProfileVO>({});
|
const userProfile = ref<UserProfileVO>({});
|
||||||
|
|||||||
Reference in New Issue
Block a user