104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import { Image, Button } from '@tarojs/components';
|
||
import { useLoad } from '@tarojs/taro';
|
||
|
||
import { Fragment, useCallback, useState } from 'react';
|
||
|
||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||
import { PageUrl } from '@/constants/app';
|
||
import { logWithPrefix } from '@/utils/common';
|
||
import { claimMembershipCoupon, getCouponCodeFromQuery } from '@/utils/coupon';
|
||
import { getPageQuery, switchTab } from '@/utils/route';
|
||
import { formatTime } from '@/utils/time';
|
||
import './index.less';
|
||
|
||
const PREFIX = 'give-vip';
|
||
const log = logWithPrefix(PREFIX);
|
||
|
||
enum State {
|
||
PENDING,
|
||
SUCCESS,
|
||
FAILED,
|
||
}
|
||
export default function GiveVip() {
|
||
const [state, setState] = useState<State>(State.PENDING);
|
||
const [expireAt, setExpireAt] = useState('');
|
||
const [usedBefore, setUsedBefore] = useState(false);
|
||
const handleNavigate = useCallback(() => {
|
||
switchTab(PageUrl.Job);
|
||
}, []);
|
||
|
||
useLoad(() => {
|
||
const query = getPageQuery<{ d: string }>();
|
||
const code = getCouponCodeFromQuery(query);
|
||
claimMembershipCoupon(code!)
|
||
.then(res => {
|
||
setUsedBefore(res.usedBefore);
|
||
setExpireAt(res.usageExpireAt);
|
||
setState(Date.now() > new Date(res.usageExpireAt).getTime() ? State.FAILED : State.SUCCESS);
|
||
})
|
||
.catch(err => {
|
||
console.error(err);
|
||
setState(State.FAILED);
|
||
});
|
||
});
|
||
|
||
return (
|
||
<div className={PREFIX}>
|
||
{state === State.SUCCESS && (
|
||
<Fragment>
|
||
<div className={`${PREFIX}__title`}>
|
||
<Image src="https://publiccdn.neighbourhood.com.cn/img/partner-yes.svg" className={`${PREFIX}__icon`} />
|
||
<div>{usedBefore ? '宝子，你已经领过了，下周再来' : '宝子，播络会员领取成功'}</div>
|
||
</div>
|
||
<div className={`${PREFIX}__coupon-info`}>
|
||
<Image src="https://publiccdn.neighbourhood.com.cn/img/parnet-share-bg.png" className={`${PREFIX}__bg`} />
|
||
<div className={`${PREFIX}__coupon-title`}>播络日会员</div>
|
||
<div className={`${PREFIX}__coupon-intro`}>
|
||
会员有效期内可增加<div className="highlight">10次</div>报单机会
|
||
</div>
|
||
<div className={`${PREFIX}__coupon-valid`}>
|
||
有效期至：{formatTime(expireAt, 'YYYY/MM/DD HH:mm:ss', false)}
|
||
</div>
|
||
</div>
|
||
</Fragment>
|
||
)}
|
||
{state === State.FAILED && (
|
||
<Fragment>
|
||
<div className={`${PREFIX}__hint`}>
|
||
<Image
|
||
src="https://publiccdn.neighbourhood.com.cn/img/link-invalid.svg"
|
||
mode="aspectFit"
|
||
className={`${PREFIX}__icon`}
|
||
/>
|
||
<div className={`${PREFIX}__hint-title`}>宝子，链接已失效</div>
|
||
</div>
|
||
<div className={`${PREFIX}__title`}>
|
||
请联系分享人<div className="highlight">再次分享</div>
|
||
</div>
|
||
</Fragment>
|
||
)}
|
||
<div className={`${PREFIX}__info-block`}>
|
||
<div className={`${PREFIX}__info-title`}>播络简介</div>
|
||
<div className={`${PREFIX}__info-card`}>
|
||
<div className={`${PREFIX}__info-body`}>
|
||
播络通告整理汇集了本地每日新增带货主播通告，方便大家及时找到高薪工作
|
||
</div>
|
||
<Image
|
||
className={`${PREFIX}__info-img`}
|
||
src="https://publiccdn.neighbourhood.com.cn/img/partner-share-coupon-img.png"
|
||
mode="heightFix"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__footer`}>
|
||
<div className={`${PREFIX}__footer-body`}>
|
||
<Button className={`${PREFIX}__button`} onClick={handleNavigate}>
|
||
立即使用
|
||
</Button>
|
||
</div>
|
||
<SafeBottomPadding />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|