Unverified 提交 7519a00a 作者: Netfan 提交者: GitHub

fix(avatar): show current user's avatar (#640)

在显示头像的地方正确显示当前登录用户的头像,已补充mock接口返回的avatar字段。
上级 d8ff30d9
......@@ -7,6 +7,7 @@ function createFakeUserList() {
userId: '1',
username: 'vben',
realName: 'Vben Admin',
avatar: 'http://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
desc: 'manager',
password: '123456',
token: 'fakeToken1',
......@@ -22,6 +23,7 @@ function createFakeUserList() {
username: 'test',
password: '123456',
realName: 'test user',
avatar: 'http://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
desc: 'tester',
token: 'fakeToken2',
roles: [
......
......@@ -38,6 +38,8 @@ export interface GetUserInfoByUserIdModel {
username: string;
// 真实名字
realName: string;
// 头像
avatar: string;
// 介绍
desc?: string;
}
......@@ -8,7 +8,7 @@
>
<div :class="`${prefixCls}__entry`">
<div :class="`${prefixCls}__header`">
<img :src="headerImg" :class="`${prefixCls}__header-img`" />
<img :src="avatar" :class="`${prefixCls}__header-img`" />
<p :class="`${prefixCls}__header-name`">
{{ getRealName }}
</p>
......@@ -71,6 +71,11 @@
await resetFields();
}
const avatar = computed(() => {
const { avatar } = userStore.getUserInfo;
return avatar || headerImg;
});
return {
t,
prefixCls,
......@@ -78,7 +83,7 @@
register,
registerForm,
handleLock,
headerImg,
avatar,
};
},
});
......
<template>
<Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
<span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
<img :class="`${prefixCls}__header`" :src="headerImg" />
<img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
<span :class="`${prefixCls}__info hidden md:block`">
<span :class="`${prefixCls}__name `" class="truncate">
{{ getUserInfo.realName }}
......@@ -75,8 +75,8 @@
const userStore = useUserStore();
const getUserInfo = computed(() => {
const { realName = '', desc } = userStore.getUserInfo || {};
return { realName, desc };
const { realName = '', avatar, desc } = userStore.getUserInfo || {};
return { realName, avatar: avatar || headerImg, desc };
});
const [register, { openModal }] = useModal();
......@@ -115,7 +115,6 @@
getUserInfo,
handleMenuClick,
getShowDoc,
headerImg,
register,
getUseLockPage,
};
......
<template>
<div class="lg:flex">
<Avatar :src="headerImg" :size="72" class="!mx-auto !block" />
<Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
<div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
<h1 class="md:text-lg text-md">早安, Vben, 开始您一天的工作吧!</h1>
<h1 class="md:text-lg text-md">早安, {{ userinfo.realName }}, 开始您一天的工作吧!</h1>
<span class="text-secondary"> 今日晴,20℃ - 32℃! </span>
</div>
<div class="flex flex-1 justify-end md:mt-0 mt-4">
......@@ -23,15 +23,18 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { computed, defineComponent } from 'vue';
import { Avatar } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import headerImg from '/@/assets/images/header.jpg';
export default defineComponent({
components: { Avatar },
setup() {
return { headerImg };
const userStore = useUserStore();
const userinfo = computed(() => userStore.getUserInfo);
return { userinfo, headerImg };
},
});
</script>
......@@ -5,7 +5,7 @@
<a-row>
<a-col :span="8">
<div :class="`${prefixCls}-top__avatar`">
<img width="70" :src="headerImg" />
<img width="70" :src="avatar" />
<span>Vben</span>
<div>海纳百川,有容乃大</div>
</div>
......@@ -54,7 +54,7 @@
<script lang="ts">
import { Tag, Tabs, Row, Col } from 'ant-design-vue';
import { defineComponent } from 'vue';
import { defineComponent, computed } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import Icon from '/@/components/Icon/index';
import Article from './Article.vue';
......@@ -63,6 +63,7 @@
import headerImg from '/@/assets/images/header.jpg';
import { tags, teams, details, achieveList } from './data';
import { useUserStore } from '/@/store/modules/user';
export default defineComponent({
components: {
......@@ -78,9 +79,11 @@
[Col.name]: Col,
},
setup() {
const userStore = useUserStore();
const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
return {
prefixCls: 'account-center',
headerImg,
avatar,
tags,
teams,
details,
......
......@@ -7,7 +7,7 @@
<a-col :span="10">
<div class="change-avatar">
<div class="mb-2"> 头像 </div>
<img width="140" :src="headerImg" />
<img width="140" :src="avatar" />
<Upload :showUploadList="false">
<Button class="ml-5"> <Icon icon="feather:upload" />更换头像 </Button>
</Upload>
......@@ -19,7 +19,7 @@
</template>
<script lang="ts">
import { Button, Upload, Row, Col } from 'ant-design-vue';
import { defineComponent, onMounted } from 'vue';
import { computed, defineComponent, onMounted } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { CollapseContainer } from '/@/components/Container/index';
import Icon from '/@/components/Icon/index';
......@@ -29,6 +29,7 @@
import headerImg from '/@/assets/images/header.jpg';
import { accountInfoApi } from '/@/api/demo/account';
import { baseSetschemas } from './data';
import { useUserStore } from '/@/store/modules/user';
export default defineComponent({
components: {
......@@ -42,6 +43,7 @@
},
setup() {
const { createMessage } = useMessage();
const userStore = useUserStore();
const [register, { setFieldsValue }] = useForm({
labelWidth: 120,
......@@ -54,8 +56,13 @@
setFieldsValue(data);
});
const avatar = computed(() => {
const { avatar } = userStore.getUserInfo;
return avatar || headerImg;
});
return {
headerImg,
avatar,
register,
handleSubmit: () => {
createMessage.success('更新成功!');
......
......@@ -5,7 +5,23 @@
>
<div
:class="`${prefixCls}__unlock`"
class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
class="
absolute
top-0
left-1/2
flex
pt-5
h-16
items-center
justify-center
sm:text-md
xl:text-xl
text-white
flex-col
cursor-pointer
transform
translate-x-1/2
"
@click="handleShowForm(false)"
v-show="showDate"
>
......@@ -28,9 +44,9 @@
<div :class="`${prefixCls}-entry`" v-show="!showDate">
<div :class="`${prefixCls}-entry-content`">
<div :class="`${prefixCls}-entry__header enter-x`">
<img :src="headerImg" :class="`${prefixCls}-entry__header-img`" />
<img :src="userinfo.avatar || headerImg" :class="`${prefixCls}-entry__header-img`" />
<p :class="`${prefixCls}-entry__header-name`">
{{ realName }}
{{ userinfo.realName }}
</p>
</div>
<InputPassword
......@@ -108,9 +124,8 @@
const { t } = useI18n();
const realName = computed(() => {
const { realName } = userStore.getUserInfo || {};
return realName;
const userinfo = computed(() => {
return userStore.getUserInfo || {};
});
/**
......@@ -141,7 +156,7 @@
return {
goLogin,
realName,
userinfo,
unLock,
errMsg,
loading,
......
......@@ -33,6 +33,7 @@ export interface UserInfo {
userId: string | number;
username: string;
realName: string;
avatar: string;
desc?: string;
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论