diff --git a/src/components/agreement-popup/index.less b/src/components/agreement-popup/index.less new file mode 100644 index 0000000..7717248 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/components/agreement-popup/index.tsx b/src/components/agreement-popup/index.tsx new file mode 100644 index 0000000..acf98c3 --- /dev/null +++ b/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 ( + +
+
提示
+
+
你好,以下是播络隐私协议与用户协议
+
同意后可使用全部功能,不同意你也可以浏览
+
+ +
+ + {needPhone ? ( + + 同意 + + ) : ( + + )} +
+
+ +
+ ); +} diff --git a/src/components/anchor-card/index.tsx b/src/components/anchor-card/index.tsx index 7ee500c..920393a 100644 --- a/src/components/anchor-card/index.tsx +++ b/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 (
diff --git a/src/components/anchor-list/index.tsx b/src/components/anchor-list/index.tsx index d459f41..085beca 100644 --- a/src/components/anchor-list/index.tsx +++ b/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({}); const prevRequestProps = useRef({}); 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 ( - - + - {dataList.map(item => ( - - ))} - - - + + {dataList.map(item => ( + + ))} + + + + + ); } diff --git a/src/constants/cache-key.ts b/src/constants/cache-key.ts index 3a0563c..3b82f17 100644 --- a/src/constants/cache-key.ts +++ b/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__' } diff --git a/src/hooks/user-role-type.tsx b/src/hooks/user-role-type.tsx index ab2785b..db4969c 100644 --- a/src/hooks/user-role-type.tsx +++ b/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; diff --git a/src/pages/job/index.tsx b/src/pages/job/index.tsx index 384c54b..c6cb001 100644 --- a/src/pages/job/index.tsx +++ b/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() { ))}
- {showMaterialGuide && setShowMaterialGuide(false)} />}
diff --git a/src/pages/start/index.tsx b/src/pages/start/index.tsx index 6fef234..9dc13e5 100644 --- a/src/pages/start/index.tsx +++ b/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 (
{mode && ( @@ -69,6 +82,7 @@ export default function Start() {
+ )} diff --git a/src/utils/user.ts b/src/utils/user.ts index 98cc251..3915838 100644 --- a/src/utils/user.ts +++ b/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);