221 lines
8.0 KiB
TypeScript
221 lines
8.0 KiB
TypeScript
import { Button, Canvas, Image } from '@tarojs/components';
|
||
|
||
import { Swiper } from '@taroify/core';
|
||
import { GoodJob } from '@taroify/icons';
|
||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||
|
||
import LoginDialog from '@/components/login-dialog';
|
||
import { PageUrl } from '@/constants/app';
|
||
import useUserInfo from '@/hooks/use-user-info';
|
||
import { EarnType, UserProfitListItem } from '@/types/partner';
|
||
import { openCustomerServiceChat } from '@/utils/common';
|
||
import { becomePartner, formatMoney, formatTimestamp, formatUserId, getLastProfitList } from '@/utils/partner';
|
||
import { navigateTo } from '@/utils/route';
|
||
import { isNeedPhone, requestUserInfo } from '@/utils/user';
|
||
|
||
import './index.less';
|
||
|
||
const PREFIX = 'partner-intro';
|
||
|
||
export default function PartnerIntro() {
|
||
const userInfo = useUserInfo();
|
||
const needPhone = isNeedPhone(userInfo);
|
||
const [loginVisible, setLoginVisible] = useState(false);
|
||
|
||
const handleOpenService = useCallback(() => {
|
||
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
|
||
}, []);
|
||
|
||
const handleBindSuccess = useCallback(async () => {
|
||
await becomePartner();
|
||
await requestUserInfo();
|
||
setLoginVisible(false);
|
||
}, []);
|
||
const handleBecomePartner = useCallback(() => {
|
||
if (needPhone) {
|
||
setLoginVisible(true);
|
||
return false;
|
||
} else {
|
||
handleBindSuccess();
|
||
return true;
|
||
}
|
||
}, [handleBindSuccess, needPhone]);
|
||
|
||
const handleConfirm = useCallback(() => {
|
||
if (!userInfo.isPartner && !handleBecomePartner()) {
|
||
return;
|
||
}
|
||
navigateTo(PageUrl.GroupOwnerCertificate);
|
||
}, [handleBecomePartner, userInfo.isPartner]);
|
||
|
||
const handleJump = useCallback(() => {
|
||
if (!userInfo.isPartner && !handleBecomePartner()) {
|
||
return;
|
||
}
|
||
navigateTo(PageUrl.PartnerShareVip);
|
||
}, [handleBecomePartner, userInfo.isPartner]);
|
||
|
||
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
||
const [bannerList, setBannerList] = useState<UserProfitListItem[]>([]);
|
||
|
||
const getBannerList = useCallback(async () => {
|
||
if (timerRef.current) {
|
||
clearTimeout(timerRef.current);
|
||
timerRef.current = null;
|
||
}
|
||
|
||
const list = await getLastProfitList();
|
||
setBannerList(list);
|
||
|
||
timerRef.current = setTimeout(
|
||
() => {
|
||
getBannerList();
|
||
},
|
||
3000 * (list.length || 10)
|
||
);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
getBannerList();
|
||
|
||
return () => {
|
||
if (timerRef.current) {
|
||
clearTimeout(timerRef.current);
|
||
timerRef.current = null;
|
||
}
|
||
};
|
||
}, [getBannerList]);
|
||
|
||
const showedRef = useRef(false);
|
||
|
||
useEffect(() => {
|
||
if (showedRef.current || !userInfo.userId) {
|
||
return;
|
||
}
|
||
showedRef.current = true;
|
||
if (!userInfo.isPartner) {
|
||
handleBecomePartner();
|
||
}
|
||
}, [userInfo]);
|
||
|
||
return (
|
||
<div className={PREFIX}>
|
||
<Image
|
||
src="https://publiccdn.neighbourhood.com.cn/img/partner-intro-bg.png"
|
||
className={`${PREFIX}__bg`}
|
||
mode="aspectFill"
|
||
/>
|
||
<div className={`${PREFIX}__slogan`}>
|
||
<div>邀请朋友加入播络</div>
|
||
<div>
|
||
高达<div className={`${PREFIX}__slogan-highlight`}>75%</div>分成
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__main`}>
|
||
<div className={`${PREFIX}__swiper-wrapper`}>
|
||
<Image
|
||
className={`${PREFIX}__swiper-bg`}
|
||
src="https://publiccdn.neighbourhood.com.cn/img/partner-swipe-item.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<Swiper className={`${PREFIX}__swiper`} autoplay={3000} touchable={false}>
|
||
{bannerList.map((item, index) => (
|
||
<Swiper.Item className={`${PREFIX}__swiper-item`} key={`${item.userId}-${index}`}>
|
||
<div className={`${PREFIX}__swiper-item-top-line`}>
|
||
<div className={`${PREFIX}__swiper-item-time`}>{formatTimestamp(item.updatedAt)}</div>
|
||
<div className={`${PREFIX}__swiper-item-id`}>
|
||
用户 <div className="id">{formatUserId(item.userId)}</div>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__swiper-item-details`}>
|
||
<div>
|
||
<div className={`${PREFIX}__swiper-item-tag`}>分成收入</div>
|
||
<div className={`${PREFIX}__swiper-item-info`}>
|
||
{[EarnType.CHAT_ACTIVITY_SHARE_L1, EarnType.CHAT_ACTIVITY_SHARE_L2].includes(item.earnType)
|
||
? '主播被开聊'
|
||
: '会员支付'}
|
||
<div className="money">+{formatMoney(item.amount)}</div>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__swiper-item-info`}>
|
||
累计<div className="money">{formatMoney(item.total)}</div>
|
||
</div>
|
||
</div>
|
||
</Swiper.Item>
|
||
))}
|
||
</Swiper>
|
||
</div>
|
||
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>
|
||
群主认证
|
||
<div className={`${PREFIX}__recommend`}>
|
||
<GoodJob />
|
||
强烈推荐
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__card ${PREFIX}__special`}>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div className="center">
|
||
完成群主认证后，群成员通过该群访问任何人分享的播络小程序进行注册，你都能获得分成
|
||
</div>
|
||
</div>
|
||
<Button className={`${PREFIX}__service`} onClick={handleConfirm}>
|
||
立即认证
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>3重收益</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__h1`}>直接分成：</div>
|
||
<div className={`${PREFIX}__body`}>
|
||
直接获得被邀请人付款金额的<span className={`${PREFIX}__highlight`}>20%</span>
|
||
</div>
|
||
<div className={`${PREFIX}__h1`}>主播分成：</div>
|
||
<div className={`${PREFIX}__body`}>
|
||
邀请的主播创建模卡，被企业开聊，每日可获得收益，分成比例高达
|
||
<span className={`${PREFIX}__highlight`}>50%</span>
|
||
</div>
|
||
<div className={`${PREFIX}__h1`}>邀请合伙人：</div>
|
||
<div className={`${PREFIX}__body`}>
|
||
你邀请的人也加入合伙人，你可获得所邀合伙人收益的<span className={`${PREFIX}__highlight`}>5%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>邀请方法</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div className={`${PREFIX}__h1`}>方法一：</div>
|
||
<div>点击下方“赠送会员给好友”，给群员、好友送会员，每周可以送一次</div>
|
||
<div className={`${PREFIX}__h1`}>方法二：</div>
|
||
<div>分享通告列表页、通告详情页等页面至群、好友</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>交流群</div>
|
||
<div className={`${PREFIX}__card ${PREFIX}__special`}>
|
||
<div className={`${PREFIX}__h1 no-dot`}>加入播络合伙人交流群，分享经验</div>
|
||
<Button className={`${PREFIX}__service`} onClick={handleOpenService}>
|
||
点击加入
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Canvas id="posterCanvas" canvas-id="posterCanvas" type="2d" style="width: 750px; height: 1334px;" />
|
||
|
||
<div className={`${PREFIX}__footer`}>
|
||
<Button className={`${PREFIX}__share-button`} onClick={handleJump}>
|
||
赠送会员给好友
|
||
</Button>
|
||
</div>
|
||
|
||
{loginVisible && (
|
||
<LoginDialog onCancel={() => setLoginVisible(false)} onSuccess={handleBindSuccess} needPhone={needPhone} />
|
||
)}
|
||
</div>
|
||
);
|
||
}
|