Merge branch 'trunk' into feat/material-list-updat
This commit is contained in:
chashaobao
@ -1 +1,130 @@
|
||||
.give-vip {}
|
||||
@import '@/styles/variables.less';
|
||||
@import '@/styles/common.less';
|
||||
|
||||
.give-vip {
|
||||
padding: 40px 24px 200px 24px;
|
||||
&__hint {
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
color: @blColorG2;
|
||||
gap: 12px;
|
||||
.flex-row();
|
||||
justify-content: center;
|
||||
}
|
||||
&__icon {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
}
|
||||
&__title {
|
||||
margin-top: 24px;
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
color: @blColor;
|
||||
text-align: center;
|
||||
flex: 0 1 auto;
|
||||
gap: 12px;
|
||||
.flex-row();
|
||||
justify-content: center;
|
||||
.highlight {
|
||||
margin-left: -12px;
|
||||
display: inline-block;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
}
|
||||
&__bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
&__info {
|
||||
&-block {
|
||||
margin-top: 48px;
|
||||
}
|
||||
&-title {
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
color: #1d2129;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
&-card {
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
}
|
||||
&-body {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: #333333;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: 614px;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 12px 32px;
|
||||
box-shadow: 0px -4px 20px 0px #00000014;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&__footer-body {
|
||||
.flex-row();
|
||||
justify-content: center;
|
||||
}
|
||||
&__button {
|
||||
.button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
|
||||
width: 400px;
|
||||
}
|
||||
&__coupon {
|
||||
&-info {
|
||||
position: relative;
|
||||
margin-top: 32px;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24px;
|
||||
|
||||
.flex-column();
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
color: @blHighlightColor;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&-intro {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 12px;
|
||||
color: @blColor;
|
||||
gap: 4px;
|
||||
.flex-row();
|
||||
.highlight {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 56px;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
}
|
||||
&-valid {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
|
||||
color: @blColorG2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,103 @@
|
||||
import { Button } from '@taroify/core';
|
||||
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);
|
||||
|
||||
export default function GiveVip() {
|
||||
return <div className={PREFIX}></div>;
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,7 +6,9 @@ import { useState } from 'react';
|
||||
import PartnerIntro from '@/components/partner-intro';
|
||||
import PartnerInviteList from '@/components/partner-invite-list';
|
||||
import PartnerProfit from '@/components/partner-profit';
|
||||
import { PageUrl } from '@/constants/app';
|
||||
import useInviteCode from '@/hooks/use-invite-code';
|
||||
import { generateMembershipCoupon } from '@/utils/coupon';
|
||||
import { getCommonShareMessage } from '@/utils/share';
|
||||
import './index.less';
|
||||
|
||||
@ -18,9 +20,17 @@ export default function Partner() {
|
||||
const handleChange = v => {
|
||||
setTab(v);
|
||||
};
|
||||
useShareAppMessage(() => {
|
||||
useShareAppMessage(async () => {
|
||||
console.log('Partner inviteCode', inviteCode);
|
||||
return getCommonShareMessage({ useCapture: false, inviteCode });
|
||||
const { code } = await generateMembershipCoupon();
|
||||
return getCommonShareMessage({
|
||||
useCapture: false,
|
||||
inviteCode,
|
||||
title: '宝子，送你个播络会员，免费找主播工作',
|
||||
path: PageUrl.GiveVip,
|
||||
params: { d: code },
|
||||
imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-coupon1.png',
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user