h5-sdk-react/src/pages/loginSucc/userManage.tsx

import { App, Avatar, Button, Drawer, Space } from "antd"
import React, { useContext, useMemo, useState } from "react"
import { DispatchContext } from "../../App";
import AvatarImg from '../../assets/image/mine_touxiang.png'
import { CloseOutlined, PoweroffOutlined, SyncOutlined, UserOutlined } from "@ant-design/icons";
import UserImg from '../../assets/image/userImg.png'
import BindPhoneImg from '../../assets/image/icon_mine_bangdingshouji.png'
import AuthImg from '../../assets/image/icon_shimingrenzheng.png'
import LeftImg from '../../assets/image/personal_core_back.png'
import CopyImg from '../../assets/image/icon_fz@2x.png'
import EditImg from '../../assets/image/icon_bj@2x.png'
import { copy } from "../../utils";

interface Props {
    isVer: boolean
    handle?: (type: 'BIND' | 'AUTH' | 'MODIFY' | 'LOGOUT') => void
    onClose?: () => void
    open?: boolean,
}

/**
 * 悬浮窗用户信息
 * @param param0 
 * @returns 
 */
const UserManage: React.FC<Props> = ({ onClose, open, handle, isVer }) => {

    /*********************************/
    const { state: { userData: { cardId, phoneNum, userName, userId, authentication }, isPut } } = useContext(DispatchContext)!;
    const [userInfoOpen, setUserInfoOpen] = useState<boolean>(false)
    const bodyH = document.body.clientWidth
    const { message } = App.useApp();
    /*********************************/


    const El = useMemo(() => {
        if (isVer) {
            return <Drawer
                placement={'top'}
                closable={false}
                onClose={onClose}
                open={open}
                height={324}
                bodyStyle={{ backgroundColor: '#f0f0f0', padding: 0, position: 'relative' }}
                headerStyle={{ padding: 0 }}
            >
                <div className="sb" style={{
                    height: bodyH,
                    left: document.body.clientWidth,
                }}>

                    <div className="um_userinfo">
                        <Space>
                            <Avatar size="large" src={AvatarImg} icon={<UserOutlined />} />
                            {/* <Avatar style={{ backgroundColor: '#ff984a' }} size="large">{userName?.charAt(0)}</Avatar> */}
                            <div className="um_nickname">
                                <p className="nickname">{userName}</p>
                                <p className="id">ID：{userId ? Array(8 - ((userId + '').length)).fill('').map(() => '0').join('') : ''}{userId}</p>
                            </div>
                        </Space>
                        <div className="um_link">
                            <Button icon={<CloseOutlined />} type="text" style={{ color: '#FFF' }} onClick={onClose} />
                        </div>
                    </div>

                    <div style={{ height: bodyH - 60 - 51, overflow: 'auto' }}>
                        <div className="um_top" >
                            <div className="content_list" onClick={() => setUserInfoOpen(!userInfoOpen)}>
                                <Space align="center">
                                    <img src={UserImg} />
                                    <span>我的账号</span>
                                </Space>
                                <Space align="center">
                                    <img src={LeftImg} style={{ width: 13, height: 13 }} />
                                </Space>
                            </div>
                            {userInfoOpen && <>
                                <div className="content_list" onClick={() => copy(userName, message)}>
                                    <Space align="center">
                                        <span style={{ fontSize: 14, color: 'gray', marginLeft: 6 }}>用户名</span>
                                    </Space>
                                    <Space align="center">
                                        <span style={{ color: 'gray' }}>{userName}</span>
                                        <img src={CopyImg} style={{ width: 13, height: 13 }} />
                                    </Space>
                                </div>
                                <div className="content_list" onClick={() => handle?.('MODIFY')}>
                                    <Space align="center">
                                        <span style={{ fontSize: 14, color: 'gray', marginLeft: 6 }}>修改密码</span>
                                    </Space>
                                    <Space align="center">
                                        <img src={EditImg} style={{ width: 13, height: 13 }} />
                                    </Space>
                                </div>
                            </>}
                            <div className="content_list" onClick={() => { handle?.('BIND') }}>
                                <Space align="center">
                                    <img src={BindPhoneImg} />
                                    <span>绑定手机</span>
                                </Space>
                                <Space align="center">
                                    <span style={{ color: '#5f5f5f' }}>{phoneNum}</span>
                                    <img src={LeftImg} style={{ width: 13, height: 13 }} />
                                </Space>
                            </div>
                            <div className="content_list" onClick={() => { if (authentication === 0) handle?.('AUTH') }}>
                                <Space align="center">
                                    <img src={AuthImg} />
                                    <span>实名认证</span>
                                </Space>
                                <Space align="center">
                                    <span style={{ color: '#5f5f5f' }}>{cardId}</span>
                                    <img src={LeftImg} style={{ width: 13, height: 13 }} />
                                </Space>
                            </div>
                        </div>
                    </div>

                    <div className="um_bottom">
                        {!isPut && <Button icon={<PoweroffOutlined />} danger type="text" onClick={() => { handle?.('LOGOUT') }}>退出登录</Button>}
                        <Button icon={<SyncOutlined />} type="text" onClick={() => { window.location.reload() }}>刷新游戏</Button>
                    </div>
                </div>
            </Drawer>
        } else {
            return <Drawer
                placement={'left'}
                closable={false}
                onClose={onClose}
                open={open}
                width={324}
                bodyStyle={{ backgroundColor: '#f0f0f0', padding: 0 }}
                headerStyle={{ padding: 0 }}
                title={<div className="um_userinfo">
                    <Space>
                        <Avatar size="large" src={AvatarImg} icon={<UserOutlined />} />
                        {/* <Avatar style={{ backgroundColor: '#ff984a' }} size="large">{userName?.charAt(0)}</Avatar> */}
                        <div className="um_nickname">
                            <p className="nickname">{userName}</p>
                            <p className="id">ID：{userId ? Array(8 - ((userId + '').length)).fill('').map(() => '0').join('') : ''}{userId}</p>
                        </div>
                    </Space>
                    <div className="um_link">
                        <Button icon={<CloseOutlined />} type="text" style={{ color: '#FFF' }} onClick={onClose} />
                    </div>
                </div>}
            >
                <div className="um_top">
                    <div className="content_list" onClick={() => setUserInfoOpen(!userInfoOpen)}>
                        <Space align="center">
                            <img src={UserImg} />
                            <span>我的账号</span>
                        </Space>
                        <Space align="center">
                            <img src={LeftImg} style={{ width: 13, height: 13 }} />
                        </Space>
                    </div>
                    {userInfoOpen && <>
                        <div className="content_list" onClick={() => copy(userName, message)}>
                            <Space align="center">
                                <span style={{ fontSize: 14, color: 'gray', marginLeft: 6 }}>用户名</span>
                            </Space>
                            <Space align="center">
                                <span style={{ color: 'gray' }}>{userName}</span>
                                <img src={CopyImg} style={{ width: 13, height: 13 }} />
                            </Space>
                        </div>
                        <div className="content_list" onClick={() => handle?.('MODIFY')}>
                            <Space align="center">
                                <span style={{ fontSize: 14, color: 'gray', marginLeft: 6 }}>修改密码</span>
                            </Space>
                            <Space align="center">
                                <img src={EditImg} style={{ width: 13, height: 13 }} />
                            </Space>
                        </div>
                    </>}
                    <div className="content_list" onClick={() => { handle?.('BIND') }}>
                        <Space align="center">
                            <img src={BindPhoneImg} />
                            <span>绑定手机</span>
                        </Space>
                        <Space align="center">
                            <span style={{ color: '#5f5f5f' }}>{phoneNum}</span>
                            <img src={LeftImg} style={{ width: 13, height: 13 }} />
                        </Space>
                    </div>
                    <div className="content_list" onClick={() => { if (authentication === 0) handle?.('AUTH') }}>
                        <Space align="center">
                            <img src={AuthImg} />
                            <span>实名认证</span>
                        </Space>
                        <Space align="center">
                            <span style={{ color: '#5f5f5f' }}>{cardId}</span>
                            <img src={LeftImg} style={{ width: 13, height: 13 }} />
                        </Space>
                    </div>
                </div>
                <div className="um_bottom">
                    {!isPut && <Button icon={<PoweroffOutlined />} danger type="text" onClick={() => { handle?.('LOGOUT') }}>退出登录</Button>}
                    <Button icon={<SyncOutlined />} type="text" onClick={() => { window.location.reload() }}>刷新游戏</Button>
                </div>
            </Drawer>
        }
    }, [isVer, userInfoOpen])

    return El
}

export default React.memo(UserManage)