feat: banner

This commit is contained in:
eleanor.mao
2025-04-24 00:43:55 +08:00
parent 7988725223
commit 7aafc3a789
16 changed files with 367 additions and 52 deletions

View File

@ -1,49 +1,93 @@
import { Button, Image } from '@tarojs/components';
import { BaseEventOrig, Button, ButtonProps, Image } from '@tarojs/components';
import { useState } from 'react';
import { useCallback, useState } from 'react';
import { PageUrl } from '@/constants/app';
import useUserInfo from '@/hooks/use-user-info';
import { navigateTo } from '@/utils/route';
import Toast from '@/utils/toast';
import { requestUserInfo, setPhoneNumber } from '@/utils/user';
import './index.less';
const PREFIX = 'partner-fragment-entry';
function JoinEntry() {
type JoinEntryProps = {
onBindSuccess: () => void;
};
function JoinEntry({ onBindSuccess }: JoinEntryProps) {
const userInfo = useUserInfo();
const hasPhone = !!userInfo.phone;
const handleGetPhoneNumber = useCallback(async (e: BaseEventOrig<ButtonProps.onGetPhoneNumberEventDetail>) => {
const encryptedData = e.detail.encryptedData;
const iv = e.detail.iv;
if (!encryptedData || !iv) {
return Toast.error('取消授权');
}
try {
await setPhoneNumber({ encryptedData, iv });
await requestUserInfo();
Toast.success('绑定成功');
onBindSuccess();
} catch (err) {
Toast.error('绑定失败');
}
}, []);
return (
<div className={`${PREFIX}__join`}>
<div className={`${PREFIX}__join-title`}>
<span className="highlight">75%</span>
</div>
<div className={`${PREFIX}__join-desc`}></div>
<Button className={`${PREFIX}__join-button`}></Button>
{hasPhone && (
<Button className={`${PREFIX}__join-button`} onClick={onBindSuccess}>
</Button>
)}
{!hasPhone && (
<Button className={`${PREFIX}__join-button`} openType="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
</Button>
)}
</div>
);
}
function PartnerKanban() {
const handleNavigate = useCallback(() => {
navigateTo(PageUrl.Partner);
}, []);
return (
<div className={`${PREFIX}__kanban`}>
<div className={`${PREFIX}__kanban-button`}>
<Image
className={`${PREFIX}__kanban-button__image`}
mode="aspectFit"
src={require('@/statics/svg/caret-right.svg')}
/>
</div>
<div className={`${PREFIX}__kanban-total`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>1666.66</div>
</div>
<div className={`${PREFIX}__kanban-details`}>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
<Image className={`${PREFIX}__kanban-bg`} src={require('@/statics/png/partner_bg.png')} mode="scaleToFill" />
<div className={`${PREFIX}__kanban-content`}>
<div className={`${PREFIX}__kanban-button`} onClick={handleNavigate}>
<Image
className={`${PREFIX}__kanban-button__image`}
mode="aspectFit"
src={require('@/statics/svg/caret-right.svg')}
/>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
<div className={`${PREFIX}__kanban-total`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>1666.66</div>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
<div className={`${PREFIX}__kanban-details`}>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}></div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
</div>
</div>
</div>
</div>
@ -51,10 +95,14 @@ function PartnerKanban() {
}
export default function PartnerEntry() {
const [state] = useState(1);
const [state, setState] = useState(1);
// TODO: 开通状态检查
const handleBindSuccess = useCallback(() => {
setState(0);
}, []);
if (state === 0) {
return <JoinEntry />;
return <JoinEntry onBindSuccess={handleBindSuccess} />;
}
return <PartnerKanban />;
}