yongxu-web/src/pages/setting/UserManagement/check.tsx

import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Image } from 'antd';
import { queryUserDetail } from '@/services/setting';
import moment from 'moment';

interface userCheckPros {
  visible: boolean;
  id: string;
  onCallback: () => void;
}

interface detailType {
  user_name: string;
  real_name: string;
  phone: string;
  photo: string;
  created_at: string;
  updated_at: string;
  status: string;
  province: string;
  city: string;
  district: string;
}

/**
 * 用户查看
 * @param props
 * @constructor
 */
const Check: React.FC<userCheckPros> = (props) => {
  const { visible, onCallback, id } = props;
  const [dataDetail, setDataDetail] = useState<detailType>({
    phone: '',
    photo: '',
    real_name: '',
    user_name: '',
    created_at: '',
    status: '',
    updated_at: '',
    province: '',
    city: '',
    district: '',
  });

  useEffect(() => {
    queryUserDetail(id).then((res) => {
      if (res.code === 0) {
        setDataDetail(res.data);
      }
    });
  }, []);

  // 确定
  const onOk = () => {
    onCallback();
  };

  // 取消
  const onCancel = () => {
    onCallback();
  };

  return (
    <Modal title="查看" open={visible} onOk={onOk} onCancel={onCancel} width={1000}>
      <Descriptions title="用户信息" bordered column={2}>
        <Descriptions.Item label="用户名">{dataDetail?.user_name}</Descriptions.Item>
        {/*<Descriptions.Item label="真实姓名">{dataDetail?.real_name}</Descriptions.Item>*/}
        <Descriptions.Item label="手机号">{dataDetail?.phone}</Descriptions.Item>
        <Descriptions.Item label="状态">
          <span style={{ color: `${{ 1: '#00a650', 2: 'red' }[dataDetail?.status]}` }}>
            {{ 1: '启用', 2: '停用' }[dataDetail?.status]}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label="地区">
          {dataDetail?.province}-{dataDetail?.city}-{dataDetail?.district}
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {dataDetail?.created_at
            ? moment(dataDetail?.created_at).format('YYYY-MM-DD HH:ss:mm')
            : '暂无'}
        </Descriptions.Item>
        <Descriptions.Item label="更新时间">
          {dataDetail?.updated_at
            ? moment(dataDetail?.updated_at).format('YYYY-MM-DD HH:ss:mm')
            : '暂无'}
        </Descriptions.Item>
        <Descriptions.Item label="头像">
          <Image width={100} src={dataDetail?.photo} />
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};
export default Check;