---
title: B端
---

## 登录弹窗

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

export default () => {
  const [isShowLoginModalBusiness, setIsShowLoginModalBusiness] =
    useState(false);
  const [isShowLoginModalClient, setIsShowLoginModalClient] = useState(false);
  const [isShowRegisterModal, setIsShowRegisterModal] = useState(false);
  return (
    <div>
      <Button
        style={{ margin: '20px' }}
        onClick={() => {
          setIsShowLoginModalBusiness(true);
        }}
      >
        登录弹窗(B端)
      </Button>

      <ModalBusiness.LoginModal
        centered={true}
        visible={isShowLoginModalBusiness}
        type={'business'}
        isShowRegisterAccount
        registerType={'business'}
        onCancel={() => {
          setIsShowLoginModalBusiness(false);
        }}
        onBeforeSubmit={(res) => {
          return true;
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res = ', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res = ', err);
        }}
      />
    </div>
  );
};
```

## 注册弹窗

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

export default () => {
  const [isShowRegisterModal, setIsShowRegisterModal] = useState(false);
  return (
    <div>
      <Button
        onClick={() => {
          setIsShowRegisterModal(true);
        }}
      >
        注册弹窗
      </Button>
      <ModalBusiness.RegisterAccountModal
        centered={true}
        visible={isShowRegisterModal}
        onCancel={() => {
          setIsShowRegisterModal(false);
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res = ', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res = ', err);
        }}
      />
    </div>
  );
};
```

## 重置密码

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

const { SettingPwdModal } = ModalBusiness;

export default () => {
  const [isShowResetPwdByPhone, setIsShowResetPwdByPhone] = useState(false);
  const [isShowResetPwdByEmail, setIsShowResetPwdByEmail] = useState(false);

  const [isShowAddPwdByPhone, setIsShowAddPwdByPhone] = useState(false);
  const [isShowAddPwdByEmail, setIsShowAddPwdByEmail] = useState(false);
  return (
    <div>
      <Button
        style={{ margin: '20px' }}
        onClick={() => {
          setIsShowResetPwdByPhone(true);
        }}
      >
        修改手机/密码弹窗
      </Button>
      <Button
        style={{ margin: '20px' }}
        onClick={() => {
          setIsShowAddPwdByPhone(true);
        }}
      >
        添加手机/密码弹窗
      </Button>

      <Button
        style={{ margin: '20px' }}
        onClick={() => {
          setIsShowResetPwdByEmail(true);
        }}
      >
        修改邮箱/密码弹窗
      </Button>
      <Button
        style={{ margin: '20px' }}
        onClick={() => {
          setIsShowAddPwdByEmail(true);
        }}
      >
        添加邮箱/密码弹窗
      </Button>
      <SettingPwdModal
        key={`ResetPwdByPhone`}
        isReset={true}
        type={'phone'}
        centered={true}
        visible={isShowResetPwdByPhone}
        onCancel={() => {
          setIsShowResetPwdByPhone(false);
        }}
        onBeforeSubmit={(res) => {
          return true;
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res = ', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res = ', err);
        }}
      />

      <SettingPwdModal
        key={'AddPwdByPhone'}
        isReset={false}
        type={'phone'}
        centered={true}
        visible={isShowAddPwdByPhone}
        onCancel={() => {
          setIsShowAddPwdByPhone(false);
        }}
        onBeforeSubmit={(res) => {
          return true;
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res = ', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res = ', err);
        }}
      />

      <SettingPwdModal
        key={'ResetPwdByEmail'}
        isReset={true}
        type={'email'}
        centered={true}
        visible={isShowResetPwdByEmail}
        onCancel={() => {
          setIsShowResetPwdByEmail(false);
        }}
        onBeforeSubmit={(res) => {
          return true;
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res = ', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res = ', err);
        }}
      />

      <SettingPwdModal
        key={'AddPwdByEmail'}
        isReset={false}
        type={'email'}
        centered={true}
        visible={isShowAddPwdByEmail}
        onCancel={() => {
          setIsShowAddPwdByEmail(false);
        }}
        onBeforeSubmit={(res) => {
          return true;
        }}
        onSuccess={(res) => {
          console.log('----- onSuccess res = ', res);
        }}
        onFailed={(err) => {
          console.log('----- onFailed res = ', err);
        }}
      />
    </div>
  );
};
```

## 添加机构信息

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

const { BindOrgInfoModal } = ModalBusiness;

export default () => {
  const [isShowBindOrgInfoModal, setIsShowBindOrgInfoModal] = useState(false);
  return (
    <div>
      <Button
        onClick={() => {
          setIsShowBindOrgInfoModal(true);
        }}
      >
        添加机构信息
      </Button>
      <BindOrgInfoModal
        isShowPhoneGroup={true}
        isShowOrgInfoGroup={true}
        userInfo={{
          username: '林麟',
          phone: '+8618404816370',
        }}
        orgInfo={null}
        token={
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNGQwODFkYi1jZTA1LTQwMmMtOTk0Mi0xMDYyYjcwMzM4YWYiLCJpZCI6IjYxOWNhMGFiMDViMTI0MGM4MGRjM2YxZiIsImNpZCI6Ijk5ZmY1ZTI3LWEyNjUtNDZlMS1iMWZhLWMyN2ZiNDlhZWRhNyIsInQiOiJQYXNzd29yZCJ9.f1bZGE5pKGs7G9Ig-RDTy6wgM1PbHVNk_mCPYoN69o0'
        }
        centered={true}
        visible={isShowBindOrgInfoModal}
        onCancel={() => {
          setIsShowBindOrgInfoModal(false);
        }}
      />
    </div>
  );
};
```

## 绑定手机号

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

const { BindPhoneModal } = ModalBusiness;

export default () => {
  const [isShowBindPhoneModal, setIsShowBindPhoneModal] = useState(false);
  return (
    <div>
      <Button
        onClick={() => {
          setIsShowBindPhoneModal(true);
        }}
      >
        绑定手机号弹窗
      </Button>
      <BindPhoneModal
        token={
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMjllODg1OS02MDlmLTQ0NWYtOGQ0MS1iYzYyYzY5ODNjNDAiLCJpZCI6IjYxOWIyMzNmYTRmN2YwMmQ2NDdkNjIxYiIsImNpZCI6Ijk5ZmY1ZTI3LWEyNjUtNDZlMS1iMWZhLWMyN2ZiNDlhZWRhNyIsInQiOiJQYXNzd29yZCJ9.CDtWQZ1wix7HQ4b3c0Cdbf_dfbjp30WgSgoLxF8dw2U'
        }
        // type={'business'}
        type={'client'}
        centered={true}
        visible={isShowBindPhoneModal}
        onCancel={() => {
          setIsShowBindPhoneModal(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>
  );
};
```

## 联系商务(B 端)

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

const { ConnectionBusinessModal } = ModalBusiness;

export default () => {
  const [isShowConnectionBusinessModal, setIsShowConnectionBusinessModal] =
    useState(false);
  return (
    <div>
      <Button
        onClick={() => {
          setIsShowConnectionBusinessModal(true);
        }}
      >
        联系商务
      </Button>
      <ConnectionBusinessModal
        token={
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNGEyNDE0YS01ZGNlLTQ3ZTctOTUyMy1jZDE3MzJhNjNkOTYiLCJpZCI6IjYxOTM3ZmRmOWRiOTczZTA3MmI4ZDBhMCIsImNpZCI6Ijk5ZmY1ZTI3LWEyNjUtNDZlMS1iMWZhLWMyN2ZiNDlhZWRhNyIsInQiOiJQYXNzd29yZCJ9.T1WPE5xEEfOHvkvNllSgnq_6Vr2uS_4-4A7v52XgkOQ'
        }
        email={'952622946@qq.com'}
        phone={'18412341234'}
        qrImg={''}
        centered={true}
        visible={isShowConnectionBusinessModal}
        onCancel={() => {
          setIsShowConnectionBusinessModal(false);
        }}
      />
    </div>
  );
};
```