feat: first commit

src/components/login-dialog/index.tsx

@@ -0,0 +1,58 @@
+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;
+  needPhone?: IPhoneButtonProps['needPhone'];
+  onSuccess?: IPhoneButtonProps['onSuccess'];
+  onBindPhone?: IPhoneButtonProps['onBindPhone'];
+}
+
+const PREFIX = 'login-dialog';
+
+export default function LoginDialog(props: IProps) {
+  const { title = '使用播络服务前，请先登录', needPhone, onSuccess, onCancel, onBindPhone } = props;
+  const [checked, setChecked] = useState(false);
+
+  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>
+          <ProtocolPrivacyCheckbox checked={checked} onChange={setChecked} className={`${PREFIX}__checkbox`} />
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}