69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { Button } from '@tarojs/components';
|
||
|
||
import { Dialog } from '@taroify/core';
|
||
import { useCallback, useState } from 'react';
|
||
|
||
import PhoneButton, { IPhoneButtonProps } from '@/components/phone-button';
|
||
import { ProtocolPrivacyCheckbox } from '@/components/protocol-privacy';
|
||
import Toast from '@/utils/toast';
|
||
|
||
import './index.less';
|
||
|
||
interface IProps {
|
||
title?: string;
|
||
onCancel: () => void;
|
||
disableCheck?: boolean;
|
||
needPhone?: IPhoneButtonProps['needPhone'];
|
||
onSuccess?: IPhoneButtonProps['onSuccess'];
|
||
onBindPhone?: IPhoneButtonProps['onBindPhone'];
|
||
}
|
||
|
||
const PREFIX = 'login-dialog';
|
||
|
||
export default function LoginDialog(props: IProps) {
|
||
const {
|
||
title = '使用播络服务前，请先登录',
|
||
disableCheck = false,
|
||
needPhone,
|
||
onSuccess,
|
||
onCancel,
|
||
onBindPhone,
|
||
} = props;
|
||
const [checked, setChecked] = useState(disableCheck);
|
||
|
||
const handleTipCheck = useCallback(() => {
|
||
Toast.info('请先阅读并同意协议');
|
||
}, []);
|
||
|
||
return (
|
||
<Dialog open onClose={onCancel}>
|
||
<Dialog.Content>
|
||
<div className={`${PREFIX}__container`}>
|
||
<div className={`${PREFIX}__title`}>{title}</div>
|
||
{!checked && (
|
||
<Button className={`${PREFIX}__confirm-button`} onClick={handleTipCheck}>
|
||
登录
|
||
</Button>
|
||
)}
|
||
{checked && (
|
||
<PhoneButton
|
||
className={`${PREFIX}__confirm-button`}
|
||
onSuccess={onSuccess}
|
||
onBindPhone={onBindPhone}
|
||
needPhone={needPhone}
|
||
>
|
||
登录
|
||
</PhoneButton>
|
||
)}
|
||
<Button className={`${PREFIX}__cancel-button`} onClick={onCancel}>
|
||
跳过，暂不登录
|
||
</Button>
|
||
{!disableCheck && (
|
||
<ProtocolPrivacyCheckbox checked={checked} onChange={setChecked} className={`${PREFIX}__checkbox`} />
|
||
)}
|
||
</div>
|
||
</Dialog.Content>
|
||
</Dialog>
|
||
);
|
||
}
|