feat: login

src/components/agreement-popup/index.tsx

@@ -0,0 +1,66 @@
+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>
+  );
+}