This commit is contained in:
chashaobao
2025-08-31 22:43:00 +08:00
parent 61686950bd
commit aea8323d95
7 changed files with 122 additions and 49 deletions

View File

@ -1,50 +1,80 @@
import { Image, Button } from '@tarojs/components';
import { useLoad } from '@tarojs/taro';
import { Fragment, useCallback } from 'react';
import { Fragment, useCallback, useState } from 'react';
import SafeBottomPadding from '@/components/safe-bottom-padding';
import { PageUrl } from '@/constants/app';
import { logWithPrefix } from '@/utils/common';
import { switchTab } from '@/utils/route';
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 handleNavigate = useCallback(() => {
switchTab(PageUrl.Job);
}, []);
useLoad(() => {
const query = getPageQuery<{ d: string }>();
const code = getCouponCodeFromQuery(query);
claimMembershipCoupon(code!)
.then(res => {
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}>
<Fragment>
<div className={`${PREFIX}__title`}>
<Image src="https://publiccdn.neighbourhood.com.cn/img/partner-yes.svg" className={`${PREFIX}__icon`} />
<div></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>
{state === State.SUCCESS && (
<Fragment>
<div className={`${PREFIX}__title`}>
<Image src="https://publiccdn.neighbourhood.com.cn/img/partner-yes.svg" className={`${PREFIX}__icon`} />
<div></div>
</div>
<div className={`${PREFIX}__coupon-valid`}>2025/8/26 22:23:56</div>
</div>
</Fragment>
<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}__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`}>