Browse Source

'UserCenter头像增加fallback'

main
郑州 3 years ago
parent
commit
64c392a5c8
1 changed files with 21 additions and 10 deletions
  1. +21
    -10
      src/components/AppHeader/components/userCenter/UserCenter.tsx

+ 21
- 10
src/components/AppHeader/components/userCenter/UserCenter.tsx View File

@@ -1,4 +1,4 @@
import { useModel } from '@/.umi/plugin-model/useModel';
import { useModel } from 'umi';
import { confirm } from '@/components/AModal';
import OssImage from '@/components/OssImage';
import SvgIcon from '@/components/SvgIcon';
@@ -10,6 +10,7 @@ import React, { CSSProperties } from 'react';
import { useCallback } from 'react';
import { useState } from 'react';
import styles from './UserCenter.less';
import defaultAvatorImg from '@/assets/avator_default.svg';

interface UserCenterProps {
className?: string;
@@ -22,7 +23,7 @@ export default function UserCenter(props: UserCenterProps) {

const onVisibleChange = useCallback((nextVisible) => {
setPopVisible(nextVisible);
}, [])
}, []);

return (
<Popover
@@ -35,10 +36,13 @@ export default function UserCenter(props: UserCenterProps) {
arrowContent={() => null}
>
<Button type="link" className={classNames(styles.btn, className)}>
<SvgIcon className={classNames(styles.icon, popVisible ? styles.active : '')} xlinkHref="usercenter" />
<SvgIcon
className={classNames(styles.icon, popVisible ? styles.active : '')}
xlinkHref="usercenter"
/>
</Button>
</Popover>
)
);
}

function PopContent(props) {
@@ -51,8 +55,8 @@ function PopContent(props) {
logout();
},
content: '确实退出登录?',
})
}, [])
});
}, []);
return (
<div className={styles.popView}>
<div className={styles.popHeader}>
@@ -61,7 +65,12 @@ function PopContent(props) {
<div className={styles.phone}>{currentUser?.phone}</div>
</div>
<div className={styles.right}>
<OssImage className={styles.avator} src={currentUser?.headImgUrl} preview={false} />
<OssImage
className={styles.avator}
src={currentUser?.headImgUrl}
preview={false}
fallback={defaultAvatorImg}
/>
</div>
</div>
<div className={styles.popContent}>
@@ -84,9 +93,11 @@ function PopContent(props) {
<RightOutlined color="#8E909F" />
</div> */}
<div className={styles.btnGroup}>
<Button className={styles.logout} type="link" onClick={tryLogout}>退出登录</Button>
<Button className={styles.logout} type="link" onClick={tryLogout}>
退出登录
</Button>
</div>
</div>
</div>
)
}
);
}

Loading…
Cancel
Save