---
title: C端
---

## 登录弹窗

```tsx
import React, { useState } from 'react';
import { Button } from 'antd4';
import {
  ModalCustomer,
  LogForm,
  RegForm,
  SettingPwd,
  AminerSkin,
  helper,
  WLPLogForm,
} from 'skyline_ui2c';

export default () => {
  const [isShowLoginModalClient, setIsShowLoginModalClient] = useState(false);
  return (
    <div>
      <Button
        style={{ margin: '20px' }}
        onClick={() => {
          setIsShowLoginModalClient(true);
        }}
      >
        登录弹窗(C端)
      </Button>
      <div style={{ position: 'relative' }}>
      <LogForm
        locale="en-US"
        location={{
          pathname: '/login',
          search: '?callback=profile%2Fchunhua-shen%2F54850e41dabfaed7b5fa1edb',
          hash: '',
          query: { callback: 'profile/chunhua-shen/54850e41dabfaed7b5fa1edb' },
          key: 'e5w7yc',
        }}
      />
      </div>
      <SettingPwd locale="en-US" />
      <RegForm locale="en-US" />

      <ModalCustomer.LoginModal
        centered={true}
        locale="en-US"
        visible={isShowLoginModalClient}
        type={'client'}
        registerType={'client'}
        onCancel={() => {
          setIsShowLoginModalClient(false);
        }}
        onBeforeSubmit={(res) => {
          return true;
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res -----', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res ', err);
        }}
      />
    </div>
  );
};
```

<!-- ## 注册弹窗(C 端)
      <SettingPwd />
      <WLPLogForm locale = 'en-US'/>
      // <LogForm locale = 'en-US'/>

<AminerSkin onGoLoginClick={() => {alert('222')}}>
        <RegForm />
      </AminerSkin>
        <LogForm />
      <SettingPwd />


```tsx
import React, { useState } from 'react';
import { Button } from 'antd4';
import { ModalCustomer } from 'skyline_ui2c';

const { RegisterClientModal } = ModalCustomer;

export default () => {
  const [isShowLoginModal, setIsShowLoginModal] = useState(false);
  return (
    <div>
      <Button
        onClick={() => {
          setIsShowLoginModal(true);
        }}
      >
        C端注册弹窗
      </Button>
      <RegisterClientModal
        centered={true}
        visible={isShowLoginModal}
        onCancel={() => {
          setIsShowLoginModal(false);
        }}
        onBeforeSubmit={(res) => {
          console.log('---- onBeforeSubmit res = ', res);
          return true;
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res = ', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res = ', err);
        }}
      />
    </div>
  );
};
``` -->