feat: banner
This commit is contained in:
@ -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 />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user