feat: login

src/components/agreement-popup/index.less

@@ -0,0 +1,41 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.agreement-popup {
+  &__content {
+    .flex-column();
+    padding: 40px 32px;
+  }
+
+  &__title {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 48px;
+    color: @blColor;;
+    margin-bottom: 24px;
+  }
+
+  &__body {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 40px;
+    color: @blColor;
+    margin-bottom: 24px;
+    align-self: flex-start;
+  };
+
+  &__btn-group {
+    margin-top: 32px;
+    .flex-row();
+    gap: 30px;
+  }
+
+  &__confirm-button {
+    .button(@width: 230px, @height: 72px, @fontSize: 28px, @fontWeight: 400, @borderRadius: 44px);
+
+  }
+
+  &__cancel-button {
+    .button(@width: 230px, @height: 72px, @fontSize: 28px, @fontWeight: 400, @borderRadius: 44px, @highlight: 0);
+  }
+}

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>
+  );
+}

src/components/anchor-card/index.tsx

@@ -18,6 +18,7 @@ import './index.less';
 interface IProps {
   data: AnchorInfo;
   jobId?: string;
+  validator: (onSuccess: () => void) => void;
 }
 
 const PREFIX = 'anchor-card';
@@ -34,14 +35,17 @@ const getSalary = (data: AnchorInfo) => {
 };
 
 function AnchorCard(props: IProps) {
-  const { data, jobId } = props;
+  const { data, jobId, validator } = props;
   const style = data.isRead ? ({ '--read-color': '#999999' } as React.CSSProperties) : {};
   const cover = (data.materialVideoInfoList.find(video => video.isDefault) || data.materialVideoInfoList[0])?.coverUrl;
 
-  const handleClick = useCallback(
-    () => navigateTo(PageUrl.MaterialView, { jobId, resumeId: data.id, source: MaterialViewSource.AnchorList }),
-    [data, jobId]
-  );
+  const handleNavTo = useCallback(() => {
+    navigateTo(PageUrl.MaterialView, { jobId, resumeId: data.id, source: MaterialViewSource.AnchorList });
+  }, [data, jobId]);
+
+  const handleClick = useCallback(() => {
+    validator(handleNavTo);
+  }, [handleNavTo, validator]);
 
   return (
     <div className={PREFIX} style={style} onClick={handleClick}>

src/components/anchor-list/index.tsx

@@ -9,9 +9,13 @@ import AnchorCard from '@/components/anchor-card';
 import ListPlaceholder from '@/components/list-placeholder';
 import { EventName } from '@/constants/app';
 import { AnchorSortType } from '@/constants/material';
+import useUserInfo from '@/hooks/use-user-info';
 import { AnchorInfo, GetAnchorListRequest, IAnchorFilters } from '@/types/material';
 import { logWithPrefix } from '@/utils/common';
 import { requestAnchorList as requestData } from '@/utils/material';
+import { getAgreementSigned, isNeedPhone, setAgreementSigned } from '@/utils/user';
+
+import { AgreementPopup } from '../agreement-popup';
 
 import './index.less';
 
@@ -55,6 +59,10 @@ function AnchorList(props: IAnchorListProps) {
   const requestProps = useRef<IRequestProps>({});
   const prevRequestProps = useRef<IRequestProps>({});
   const onListEmptyRef = useRef(onListEmpty);
+  const [open, setOpen] = useState(false);
+  const successCallback = useRef<() => void>(() => {});
+  const userInfo = useUserInfo();
+  const needPhone = isNeedPhone(userInfo);
 
   const handleRefresh = useCallback(async () => {
     log('start pull refresh');
@@ -120,6 +128,27 @@ function AnchorList(props: IAnchorListProps) {
     [dataList]
   );
 
+  const handleCancel = useCallback(() => {
+    setOpen(false);
+    setAgreementSigned(false);
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    setOpen(false);
+    setAgreementSigned(true);
+    //TODO 没手机号要授权一下; 必须要开弹窗才可以，与需求不符
+    successCallback.current();
+  }, []);
+
+  const validator = (onSuccess: () => void) => {
+    if (getAgreementSigned()) {
+      onSuccess();
+    } else {
+      successCallback.current = onSuccess;
+      setOpen(true);
+    }
+  };
+
   useEffect(() => {
     onListEmptyRef.current = onListEmpty;
   }, [onListEmpty]);
@@ -183,26 +212,29 @@ function AnchorList(props: IAnchorListProps) {
   }, [jobId, ready, filters, cityCode, sortType]);
 
   return (
-    <PullRefresh
-      className={classNames(`${PREFIX}__pull-refresh`, className)}
-      loading={refreshing}
-      onRefresh={handleRefresh}
-      disabled={refreshDisabled || !ready}
-    >
-      <List
-        hasMore={hasMore}
-        onLoad={handleLoadMore}
-        loading={loadingMore || refreshing}
-        disabled={loadMoreError || !ready}
-        fixedHeight={typeof listHeight !== 'undefined'}
-        style={listHeight ? { height: `${listHeight}px` } : undefined}
+    <>
+      <PullRefresh
+        className={classNames(`${PREFIX}__pull-refresh`, className)}
+        loading={refreshing}
+        onRefresh={handleRefresh}
+        disabled={refreshDisabled || !ready}
       >
-        {dataList.map(item => (
-          <AnchorCard data={item} jobId={jobId} key={item.id} />
-        ))}
-        <ListPlaceholder hasMore={hasMore} loadingMore={loadingMore} loadMoreError={loadMoreError} />
-      </List>
-    </PullRefresh>
+        <List
+          hasMore={hasMore}
+          onLoad={handleLoadMore}
+          loading={loadingMore || refreshing}
+          disabled={loadMoreError || !ready}
+          fixedHeight={typeof listHeight !== 'undefined'}
+          style={listHeight ? { height: `${listHeight}px` } : undefined}
+        >
+          {dataList.map(item => (
+            <AnchorCard data={item} jobId={jobId} key={item.id} validator={validator} />
+          ))}
+          <ListPlaceholder hasMore={hasMore} loadingMore={loadingMore} loadMoreError={loadMoreError} />
+        </List>
+      </PullRefresh>
+      <AgreementPopup open={open} onCancel={handleCancel} onConfirm={handleConfirm} needPhone={needPhone} />
+    </>
   );
 }
 

src/constants/cache-key.ts

@@ -10,4 +10,5 @@ export enum CacheKey {
   LAST_SELECT_MY_JOB = '__last_select_my_job__',
   CLOSE_PARTNER_BANNER = '__close_partner_banner__',
   INVITE_CODE = '__invite_code__',
+  AGREEMENT_SIGNED = '__agreement_signed__'
 }

src/hooks/user-role-type.tsx

@@ -1,9 +1,10 @@
 import { useSelector } from 'react-redux';
 
 import { selectRoleType } from '@/store/selector';
+import { RoleType } from '@/constants/app';
 
 function useRoleType() {
-  return useSelector(selectRoleType);
+  return useSelector(selectRoleType) || RoleType.Anchor;
 }
 
 export default useRoleType;

src/pages/job/index.tsx

@@ -4,7 +4,6 @@ import { Tabs } from '@taroify/core';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import HomePage from '@/components/home-page';
-import LocationDialog from '@/components/location-dialog';
 import { LoginGuide } from '@/components/login-guide';
 import MaterialGuide from '@/components/material-guide';
 import { EventName, OpenSource, PageUrl } from '@/constants/app';
@@ -82,13 +81,6 @@ export default function Job() {
     }
   }, []);
 
-  const handleCloseAuthorize = useCallback(() => setShowAuthorize(false), []);
-
-  const handleClickAuthorize = useCallback(() => {
-    requestLocation(true);
-    setShowAuthorize(false);
-  }, []);
-
   useEffect(() => {
     Taro.eventCenter.on(EventName.SELECT_CITY, handleCityChange);
     return () => {
@@ -116,6 +108,7 @@ export default function Job() {
     } else {
       log('show authorize location dialog');
       setShowAuthorize(true);
+      requestLocation(true);
     }
   });
 
@@ -154,7 +147,6 @@ export default function Job() {
         ))}
       </Tabs>
       <div>
-        <LocationDialog open={showAuthorize} onClose={handleCloseAuthorize} onClick={handleClickAuthorize} />
         <LoginGuide disabled={showAuthorize} onAfterBind={handleAfterBindPhone} />
         {showMaterialGuide && <MaterialGuide onClose={() => setShowMaterialGuide(false)} />}
       </div>

src/pages/start/index.tsx

@@ -1,6 +1,9 @@
 import { Image } from '@tarojs/components';
-
 import { useLoad } from '@tarojs/taro';
+
+import { useState } from 'react';
+
+import { AgreementPopup } from '@/components/agreement-popup';
 import Slogan from '@/components/slogan';
 import { PageUrl, RoleType } from '@/constants/app';
 import { ANCHOR_TAB_LIST, COMPANY_TAB_LIST } from '@/hooks/use-config';
@@ -8,12 +11,13 @@ import store from '@/store';
 import { changeHomePage } from '@/store/actions';
 import { getRoleType, switchDefaultTab, switchRoleType } from '@/utils/app';
 import { switchTab } from '@/utils/route';
-
+import { getAgreementSigned, setAgreementSigned } from '@/utils/user';
 import './index.less';
 
 const PREFIX = 'page-start';
 
 export default function Start() {
+  const [open, setOpen] = useState(typeof getAgreementSigned() !== 'boolean');
   const mode = getRoleType();
   useLoad(() => {
     switchDefaultTab();
@@ -30,6 +34,15 @@ export default function Start() {
     await switchTab(COMPANY_TAB_LIST[0].pagePath as PageUrl);
   };
 
+  const handleCancel = () => {
+    setOpen(false);
+    setAgreementSigned(false);
+  };
+
+  const handleConfirm = () => {
+    setOpen(false);
+    setAgreementSigned(true);
+  };
   return (
     <div className={`${PREFIX} ${mode ? '' : 'color-bg'}`}>
       {mode && (
@@ -69,6 +82,7 @@ export default function Start() {
             </div>
           </div>
           <Slogan />
+          <AgreementPopup open={open} onCancel={handleCancel} onConfirm={handleConfirm} />
         </>
       )}
     </div>

src/utils/user.ts

@@ -148,3 +148,6 @@ export async function followGroup(blGroupId: FollowGroupRequest['blGroupId']) {
     return false;
   }
 }
+
+export const getAgreementSigned = (): boolean | '' => Taro.getStorageSync(CacheKey.AGREEMENT_SIGNED);
+export const setAgreementSigned = (signed: boolean) => Taro.setStorageSync(CacheKey.AGREEMENT_SIGNED, signed);