66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { Button } from '@tarojs/components';
|
||
|
||
import { Popup } from '@taroify/core';
|
||
import { useCallback } from 'react';
|
||
|
||
import { BindPhoneStatus } from '@/components/login-button';
|
||
import PhoneButton from '@/components/phone-button';
|
||
import { ProtocolPrivacy } from '@/components/protocol-privacy';
|
||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||
|
||
import './index.less';
|
||
|
||
interface IProps {
|
||
open: boolean;
|
||
onCancel: () => void;
|
||
onConfirm: () => void;
|
||
needPhone?: boolean;
|
||
}
|
||
|
||
const PREFIX = 'agreement-popup';
|
||
|
||
export function AgreementPopup({ open, onCancel, onConfirm, needPhone }: IProps) {
|
||
const handleBindPhone = useCallback(
|
||
status => {
|
||
if (status === BindPhoneStatus.Success) {
|
||
onConfirm();
|
||
} else {
|
||
onCancel();
|
||
}
|
||
},
|
||
[onCancel, onConfirm]
|
||
);
|
||
|
||
if (!open) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<Popup rounded className={PREFIX} placement="bottom" open={open} onClose={onCancel}>
|
||
<div className={`${PREFIX}__content`}>
|
||
<div className={`${PREFIX}__title`}>提示</div>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div>你好，以下是播络隐私协议与用户协议</div>
|
||
<div>同意后可使用全部功能，不同意你也可以浏览</div>
|
||
</div>
|
||
<ProtocolPrivacy divider />
|
||
<div className={`${PREFIX}__btn-group`}>
|
||
<Button className={`${PREFIX}__cancel-button`} onClick={onCancel}>
|
||
拒绝
|
||
</Button>
|
||
{needPhone ? (
|
||
<PhoneButton className={`${PREFIX}__confirm-button`} needPhone onBindPhone={handleBindPhone}>
|
||
同意
|
||
</PhoneButton>
|
||
) : (
|
||
<Button className={`${PREFIX}__confirm-button`} onClick={onConfirm}>
|
||
同意
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<SafeBottomPadding />
|
||
</Popup>
|
||
);
|
||
}
|