h5-sdk-react/src/pages/authPop/index.tsx

import { App, Button, Form, Input, Modal } from "antd"
import React from "react"
import '../../App.less'
import { IdcardOutlined, UserOutlined } from "@ant-design/icons"
import { useAjax } from "../../hooks/useAjax"
import { realNameApi } from "../../api"
import showMessage from "../../components/showMessage"

interface Props {
    checkSwitch: boolean, // 是否强制实名
    onChange: () => void
    open?: boolean,
    onClose?: () => void
    isClick?: boolean
}
/**
 * 实名认证
 * @param param0 
 * @returns 
 */
const AuthPop: React.FC<Props> = ({ checkSwitch, onChange, open, onClose, isClick }) => {

    /*********************************/
    const [form] = Form.useForm()
    const { message } = App.useApp()

    const realName = useAjax((params) => realNameApi(params))
    /*********************************/

    const onFinish = (values: any) => {
        realName.run(values).then(res => {
            if (+res.code === 200) {
                onChange()
            } else {
                showMessage.error(res.msg || '认证失败', message)
            }
        })
    };

    return <Modal
        open={open}
        width={310}
        centered={true}
        footer={null}
        keyboard={false}
        maskClosable={false}
        closable={isClick ? true : !checkSwitch}
        onCancel={(e) => { e.stopPropagation(); onClose?.() }}
        className="authPop"
    >
        <h4 className="float_pop-tit">实名认证</h4>
        <div className="float_pop-con">
            根据国家规定，游戏用户需要进行实名认证。
            <span className="float_auth-msg"> · 信息仅用于认证且绝对保密</span>
            <span className="float_auth-msg"> · 未成年人游戏支付额度有限制</span>
        </div>
        <div style={{ marginTop: 10 }}>
            <Form
                name="basic"
                form={form}
                autoComplete='off'
                onFinish={onFinish}
            >
                <Form.Item name="cardName" style={{ marginBottom: 10 }} rules={[{ required: true, message: '请输入您的真实姓名!' }]}>
                    <Input prefix={<UserOutlined />} placeholder="请输入您的真实姓名" size="large" />
                </Form.Item>
                <Form.Item name="cardId" rules={[{ required: true, message: '请输入您的身份证号码!' }]}>
                    <Input prefix={<IdcardOutlined />} placeholder="请输入您的身份证号码" size="large" />
                </Form.Item>
                <Form.Item style={{ marginBottom: 10 }}>
                    <Button type="primary" className="form_button" loading={realName.loading} htmlType="submit" size="large">立即认证</Button>
                </Form.Item>
            </Form>
        </div>
    </Modal>
}

export default React.memo(AuthPop)