index.tsx 1.83 KB
import {
  CreditCardOutlined,
  MoneyCollectOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Card, Col, Row } from 'antd';
import { history } from 'umi';
import './index.less';

const PrepaidPage = () => {
  const handleCardClick = (path: string) => {
    history.push(path);
  };

  return (
    <div className="prepaid-index">
      <Row gutter={16}>
        <Col span={8}>
          <Card
            hoverable
            className="prepaid-card"
            onClick={() => handleCardClick('/prepaid/recharge')}
          >
            <div className="card-content">
              <CreditCardOutlined className="card-icon" />
              <div className="card-title">预存充值</div>
              <div className="card-desc">管理预存充值记录、审核及编辑操作</div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card
            hoverable
            className="prepaid-card"
            onClick={() => handleCardClick('/prepaid/account')}
          >
            <div className="card-content">
              <UserOutlined className="card-icon" />
              <div className="card-title">账号列表</div>
              <div className="card-desc">查看账户信息、积分兑换及消费记录</div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card
            hoverable
            className="prepaid-card"
            onClick={() => handleCardClick('/prepaid/privatePocket')}
          >
            <div className="card-content">
              <MoneyCollectOutlined className="card-icon" />
              <div className="card-title">隐私钱包</div>
              <div className="card-desc">管理用户隐私钱包信息</div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default PrepaidPage;