magic-csb/boluo-app-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 分享的文案 + 点击头像看模卡 + 提现文案 + 协议弹窗 + 进群限制

Browse Source
This commit is contained in:
chashaobao 2025-06-17 00:03:58 +08:00
parent 828497fcd6
commit 0ec366cc2e
14 changed files with 140 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/agreement-popup/index.tsx
View File

@ -1,4 +1,4 @@
import { Button } from '@tarojs/components';
import { Button, ITouchEvent } from '@tarojs/components';
import { Popup } from '@taroify/core';
import { useCallback } from 'react';
@ -13,17 +13,18 @@ import './index.less';
interface IProps {
open: boolean;
onCancel: () => void;
onConfirm: () => void;
onConfirm: (e: ITouchEvent) => void;
needPhone?: boolean;
needBindPhone?: boolean;
}
const PREFIX = 'agreement-popup';
export function AgreementPopup({ open, onCancel, onConfirm, needPhone }: IProps) {
export function AgreementPopup({ open, onCancel, onConfirm, needPhone, needBindPhone }: IProps) {
const handleBindPhone = useCallback(
status => {
(status: BindPhoneStatus, e: ITouchEvent) => {
if (status === BindPhoneStatus.Success) {
onConfirm();
onConfirm(e);
} else {
onCancel();
}
@ -48,8 +49,8 @@ export function AgreementPopup({ open, onCancel, onConfirm, needPhone }: IProps)
<Button className={`${PREFIX}__cancel-button`} onClick={onCancel}>
拒绝
</Button>
{needPhone ? (
<PhoneButton className={`${PREFIX}__confirm-button`} needPhone onBindPhone={handleBindPhone}>
{needBindPhone ? (
<PhoneButton className={`${PREFIX}__confirm-button`} needPhone={needPhone} onBindPhone={handleBindPhone}>
同意
</PhoneButton>
) : (

40
src/components/anchor-list/index.tsx
View File

@ -7,13 +7,14 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import AnchorCard from '@/components/anchor-card';
import ListPlaceholder from '@/components/list-placeholder';
import LoginDialog from '@/components/login-dialog';
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 { getAgreementSigned, isNeedLogin, setAgreementSigned } from '@/utils/user';
import { AgreementPopup } from '../agreement-popup';
@ -59,10 +60,11 @@ function AnchorList(props: IAnchorListProps) {
const requestProps = useRef<IRequestProps>({});
const prevRequestProps = useRef<IRequestProps>({});
const onListEmptyRef = useRef(onListEmpty);
const [open, setOpen] = useState(false);
const [openLogin, setLoginOpen] = useState(false);
const [openAssignment, setAssignmentOpen] = useState(false);
const successCallback = useRef<() => void>(() => {});
const userInfo = useUserInfo();
const needPhone = isNeedPhone(userInfo);
const needLogin = isNeedLogin(userInfo);
const handleRefresh = useCallback(async () => {
log('start pull refresh');
@ -129,23 +131,33 @@ function AnchorList(props: IAnchorListProps) {
);
const handleCancel = useCallback(() => {
setOpen(false);
setAssignmentOpen(false);
setAgreementSigned(false);
}, []);
const handleConfirm = useCallback(() => {
setOpen(false);
setAssignmentOpen(false);
setAgreementSigned(true);
//TODO 没手机号要授权一下; 必须要开弹窗才可以，与需求不符
successCallback.current();
}, []);
const handleLoginSuccess = useCallback(() => {
setLoginOpen(false);
successCallback.current();
}, []);
const handleLoginCancel = useCallback(() => {
setLoginOpen(false);
}, []);
const validator = (onSuccess: () => void) => {
if (getAgreementSigned()) {
onSuccess();
successCallback.current = onSuccess;
if (!getAgreementSigned()) {
setAssignmentOpen(true);
} else if (needLogin) {
setLoginOpen(true);
} else {
successCallback.current = onSuccess;
setOpen(true);
onSuccess();
}
};
@ -233,7 +245,13 @@ function AnchorList(props: IAnchorListProps) {
<ListPlaceholder hasMore={hasMore} loadingMore={loadingMore} loadMoreError={loadMoreError} />
</List>
</PullRefresh>
<AgreementPopup open={open} onCancel={handleCancel} onConfirm={handleConfirm} needPhone={needPhone} />
<AgreementPopup
open={openAssignment}
onCancel={handleCancel}
onConfirm={handleConfirm}
needBindPhone={needLogin}
/>
{openLogin && <LoginDialog onCancel={handleLoginCancel} onSuccess={handleLoginSuccess} />}
</>
);
}

67
src/components/login-button/index.tsx
View File

@ -1,11 +1,12 @@
import { Button, ButtonProps } from '@tarojs/components';
import { Button, ButtonProps, ITouchEvent } from '@tarojs/components';
import classNames from 'classnames';
import { useCallback, useState } from 'react';
import { AgreementPopup } from '@/components/agreement-popup';
import LoginDialog from '@/components/login-dialog';
import useUserInfo from '@/hooks/use-user-info';
import { getAgreementSigned, isNeedLogin } from '@/utils/user';
import { getAgreementSigned, isNeedLogin, setAgreementSigned } from '@/utils/user';
import './index.less';
@ -17,6 +18,7 @@ export enum BindPhoneStatus {
export interface ILoginButtonProps extends ButtonProps {
needPhone?: boolean;
needAssignment?: boolean;
}
const PREFIX = 'login-button';
@ -24,13 +26,50 @@ const PREFIX = 'login-button';
function LoginButton(props: ILoginButtonProps) {
const { className, children, needPhone, onClick, ...otherProps } = props;
const userInfo = useUserInfo();
const [visible, setVisible] = useState(false);
const [loginVisible, setLoginVisible] = useState(false);
const [assignVisible, setAssignVisible] = useState(false);
const needLogin = isNeedLogin(userInfo);
const needSign = !getAgreementSigned();
// 点击按钮时，协议同意也手机也授权了 -> 下一步
//
// 点击按钮时，协议同意但是手机授权没给 -> 弹登录
// -> 如果授权了手机号就进行下一步
// -> 不给授权没下一步
//
// 点击按钮时，协议不同意 -> 弹协议窗口
// -> 如果同意就进行下一步
// -> 不同意没下一步
const handleClick = useCallback(
(e: ITouchEvent) => {
if (!getAgreementSigned()) {
setAssignVisible(true);
} else if (needLogin) {
setLoginVisible(true);
} else if (onClick) {
onClick(e);
}
},
[needLogin, onClick]
);
const onSuccess = useCallback(
const handleConfirm = useCallback(
(e: ITouchEvent) => {
setAssignVisible(false);
setAgreementSigned(true);
if (onClick) {
onClick(e);
}
},
[onClick]
);
const handleCancel = useCallback(() => {
setAgreementSigned(false);
setAssignVisible(false);
}, []);
const handleLoginSuccess = useCallback(
e => {
setVisible(false);
setLoginVisible(false);
onClick?.(e);
},
[onClick]
@ -38,15 +77,17 @@ function LoginButton(props: ILoginButtonProps) {
return (
<>
<Button
{...otherProps}
className={classNames(PREFIX, className)}
onClick={needLogin || needSign ? () => setVisible(true) : onClick}
>
<Button {...otherProps} className={classNames(PREFIX, className)} onClick={handleClick}>
{children}
</Button>
{visible && (
<LoginDialog disableCheck onCancel={() => setVisible(false)} onSuccess={onSuccess} needPhone={needPhone} />
<AgreementPopup
open={assignVisible}
onCancel={handleCancel}
onConfirm={handleConfirm}
needBindPhone={needLogin}
/>
{loginVisible && (
<LoginDialog onCancel={() => setLoginVisible(false)} onSuccess={handleLoginSuccess} needPhone={needPhone} />
)}
</>
);

18
src/components/login-dialog/index.less
View File

@ -17,22 +17,4 @@
.button(@width: 360px, @height: 72px, @fontSize: 28px, @fontWeight: 400, @borderRadius: 44px);
margin-top: 40px;
}
&__cancel-button {
min-width: fit-content;
font-size: 28px;
line-height: 32px;
color: @blHighlightColor;
background: transparent;
border: none;
margin-top: 40px;
&::after {
border-color: transparent
}
}
&__checkbox {
margin-top: 40px;
}
}

49
src/components/login-dialog/index.tsx
View File

@ -1,18 +1,12 @@
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;
disableCheck?: boolean;
needPhone?: IPhoneButtonProps['needPhone'];
onSuccess?: IPhoneButtonProps['onSuccess'];
onBindPhone?: IPhoneButtonProps['onBindPhone'];
@ -21,46 +15,21 @@ interface IProps {
const PREFIX = 'login-dialog';
export default function LoginDialog(props: IProps) {
const {
title = '使用播络服务前，请先登录',
disableCheck = false,
needPhone,
onSuccess,
onCancel,
onBindPhone,
} = props;
const [checked, setChecked] = useState(disableCheck);
const handleTipCheck = useCallback(() => {
Toast.info('请先阅读并同意协议');
}, []);
const { title = '使用播络服务前，请先登录', needPhone, onSuccess, onCancel, onBindPhone } = props;
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>
{!disableCheck && (
<ProtocolPrivacyCheckbox checked={checked} onChange={setChecked} className={`${PREFIX}__checkbox`} />
)}
<PhoneButton
className={`${PREFIX}__confirm-button`}
onSuccess={onSuccess}
onBindPhone={onBindPhone}
needPhone={needPhone}
>
登录
</PhoneButton>
</div>
</Dialog.Content>
</Dialog>

4
src/components/partner-kanban/index.tsx
View File

@ -74,7 +74,7 @@ function WithdrawDialog(props: { open: boolean; onClose: () => void; count: numb
{+props.count}
<div className="yuan">元</div>
</div>
<div className={`${PREFIX}-withdraw-dialog__hint`}>单笔最大500元</div>
<div className={`${PREFIX}-withdraw-dialog__hint`}>单日提现最大200元</div>
<Button className={`${PREFIX}-withdraw-dialog__confirm-button`} onClick={handleWithdraw}>
提现
</Button>
@ -193,7 +193,7 @@ export default function PartnerKanban({ simple }: PartnerKanbanProps) {
{!simple && <TipDialog open={tipOpen} onClose={handleTipClose} />}
{!simple && (
<WithdrawDialog
count={Math.min(Number(formatMoney(stats.availableBalance)), 500)}
count={Math.min(Number(formatMoney(stats.availableBalance)), 200)}
open={withdrawOpen}
onClose={handleWithdrawClose}
/>

8
src/components/phone-button/index.tsx
View File

@ -19,7 +19,7 @@ export interface IPhoneButtonProps extends ButtonProps {
message?: string;
// 绑定后是否需要刷新接口获取手机号
needPhone?: boolean;
onBindPhone?: (status: BindPhoneStatus) => void;
onBindPhone?: (status: BindPhoneStatus, e: ITouchEvent) => void;
onSuccess?: (e: ITouchEvent) => void;
}
@ -44,17 +44,17 @@ export default function PhoneButton(props: IPhoneButtonProps) {
const encryptedData = e.detail.encryptedData;
const iv = e.detail.iv;
if (!encryptedData || !iv) {
onBindPhone?.(BindPhoneStatus.Cancel);
onBindPhone?.(BindPhoneStatus.Cancel, e as ITouchEvent);
return Toast.error('取消授权');
}
try {
await setPhoneNumber({ encryptedData, iv });
needPhone && (await requestUserInfo());
Toast.success(message);
onBindPhone?.(BindPhoneStatus.Success);
onBindPhone?.(BindPhoneStatus.Success, e as ITouchEvent);
onSuccess?.(e as ITouchEvent);
} catch (err) {
onBindPhone?.(BindPhoneStatus.Error);
onBindPhone?.(BindPhoneStatus.Error, e as ITouchEvent);
Toast.error('绑定失败');
log('bind phone fail', err);
}

3
src/constants/cache-key.ts
View File

@ -10,5 +10,6 @@ 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__'
AGREEMENT_SIGNED = '__agreement_signed__',
CITY_CODES = '__city_codes__',
}

2
src/pages/anchor/index.tsx
View File

@ -186,7 +186,7 @@ export default function AnchorPage() {
});
useShareAppMessage(() => {
return getCommonShareMessage(true, inviteCode);
return getCommonShareMessage(true, inviteCode, '数万名优质主播等你来挑');
});
useDidShow(() => requestUnreadMessageCount());

4
src/pages/group-v2/index.tsx
View File

@ -11,6 +11,7 @@ import { getCurrentCityCode } from '@/utils/location';
import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
import { getPageQuery } from '@/utils/route';
import { getCommonShareMessage } from '@/utils/share';
import { checkCityCode } from '@/utils/user';
import './index.less';
const PREFIX = 'group-v2-page';
@ -26,6 +27,9 @@ export default function GroupV2() {
useShareAppMessage(() => getCommonShareMessage(true, inviteCode));
const handleSelectCity = useCallback(cityCode => {
if (!checkCityCode(cityCode)) {
return;
}
const group = GROUPS.find(g => String(g.cityCode) === cityCode);
if (group) {
openCustomerServiceChat(group.serviceUrl);

1
src/pages/job-detail/index.tsx
View File

@ -112,7 +112,6 @@ const AnchorFooter = (props: { data: JobDetails }) => {
}, [data]);
const handleDialogHidden = useCallback(() => setDialogVisible(false), []);
return (
<>
<div className={`${PREFIX}__footer`}>

4
src/pages/user-batch-publish/index.tsx
View File

@ -11,6 +11,7 @@ import useInviteCode from '@/hooks/use-invite-code';
import { openCustomerServiceChat } from '@/utils/common';
import { getCurrentCityCode } from '@/utils/location';
import { getCommonShareMessage } from '@/utils/share';
import { checkCityCode } from '@/utils/user';
import './index.less';
const PREFIX = 'page-biz-service';
@ -22,6 +23,9 @@ export default function BizService() {
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfcd60708731367168d');
}, []);
const handleSelectCity = useCallback(cityCode => {
if (!checkCityCode(cityCode)) {
return;
}
const group = GROUPS.find(g => String(g.cityCode) === cityCode);
if (group) {
openCustomerServiceChat(group.serviceUrl);

8
src/utils/share.ts
View File

@ -15,10 +15,14 @@ const getRandomCount = () => {
return (seed % 300) + 500;
};
export const getCommonShareMessage = (useCapture: boolean = true, inviteCode?: string): ShareAppMessageReturn => {
export const getCommonShareMessage = (
useCapture: boolean = true,
inviteCode?: string,
title?: string
): ShareAppMessageReturn => {
console.log('share share message', getJumpUrl(PageUrl.Job, inviteCode ? { c: inviteCode } : undefined));
return {
title: `昨天新增了${getRandomCount()}条主播通告，宝子快来看看`,
title: title || `昨天新增了${getRandomCount()}条主播通告，宝子快来看看`,
path: getJumpUrl(PageUrl.Job, inviteCode ? { c: inviteCode } : undefined),
imageUrl: useCapture ? undefined : imageUrl,
};

17
src/utils/user.ts
View File

@ -151,3 +151,20 @@ export async function followGroup(blGroupId: FollowGroupRequest['blGroupId']) {
export const getAgreementSigned = (): boolean | '' => Taro.getStorageSync(CacheKey.AGREEMENT_SIGNED);
export const setAgreementSigned = (signed: boolean) => Taro.setStorageSync(CacheKey.AGREEMENT_SIGNED, signed);
export const getCityCodes = (): string[] => {
const cachedValue = Taro.getStorageSync(CacheKey.CITY_CODES);
return !cachedValue || !Array.isArray(cachedValue) ? [] : cachedValue;
};
export const setCityCodes = (cityCode: string[]) => Taro.setStorageSync(CacheKey.CITY_CODES, cityCode);
export const checkCityCode = (cityCode: string): boolean => {
const cachedCityCodes = getCityCodes();
const isNewCityCode = cachedCityCodes.indexOf(cityCode) === -1;
if (cachedCityCodes.length === 2 && isNewCityCode) {
Toast.info('最多只能进入2个城市');
return false;
}
if (isNewCityCode) {
setCityCodes([...cachedCityCodes, cityCode]);
}
return true;
};