feat: 模卡更新
This commit is contained in:
@ -2,20 +2,36 @@
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.profile-checkbox {
|
||||
|
||||
&__group {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.flex-row();
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
flex: 0 1 auto;
|
||||
padding: 34px 36px;
|
||||
line-height: 32px;
|
||||
border-radius: 16px;
|
||||
border: 2px solid #fff;
|
||||
background: #fff;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
&.active {
|
||||
background: rgba(109, 61, 245, 0.12);
|
||||
border: 2px solid #6d3df5;
|
||||
|
||||
&__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
.taroify-checkbox__label {
|
||||
color: #6d3df5;
|
||||
}
|
||||
}
|
||||
|
||||
.taroify-checkbox__label {
|
||||
line-height: 32px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,42 +1,44 @@
|
||||
import { Image } from '@tarojs/components';
|
||||
|
||||
import { Checkbox } from '@taroify/core';
|
||||
import { CheckboxProps, CheckboxGroupProps } from '@taroify/core/checkbox';
|
||||
import CheckboxGroupContext from '@taroify/core/checkbox/checkbox-group.context';
|
||||
import { useContext } from 'react';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface IProps extends CheckboxProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface IGroupProps extends CheckboxGroupProps {
|
||||
value: BL.Anything[];
|
||||
}
|
||||
|
||||
interface IGroupProps extends CheckboxGroupProps {}
|
||||
|
||||
const PREFIX = 'profile-checkbox';
|
||||
|
||||
export function BlCheckboxGroup(props: IGroupProps) {
|
||||
return <Checkbox.Group className={`${PREFIX}__group`} direction="horizontal" {...props} />;
|
||||
export function BlCheckboxGroup({ value, onChange, children }: IGroupProps) {
|
||||
return (
|
||||
<Checkbox.Group className={`${PREFIX}__group`} value={value} onChange={onChange}>
|
||||
{children}
|
||||
</Checkbox.Group>
|
||||
);
|
||||
}
|
||||
|
||||
export function BlCheckbox(props: IProps) {
|
||||
const { name, text, value } = props;
|
||||
const { name, text } = props;
|
||||
const { value: names = [], onChange: onNamesChange } = useContext(CheckboxGroupContext);
|
||||
const checked = names.includes(name);
|
||||
const handleClick = () => {
|
||||
if (!name) return;
|
||||
|
||||
if (checked) {
|
||||
onNamesChange?.(names.filter(aName => aName !== name));
|
||||
} else {
|
||||
onNamesChange?.([...names, name]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
className={`${PREFIX}__item`}
|
||||
name={name}
|
||||
icon={
|
||||
<Image
|
||||
className={`${PREFIX}__icon`}
|
||||
mode="aspectFit"
|
||||
src={
|
||||
value.includes(name)
|
||||
? require('@/statics/svg/radio-checked.svg')
|
||||
: require('@/statics/svg/radio-uncheck.svg')
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Checkbox className={`${PREFIX}__item ${checked ? 'active' : ''}`} name={name} icon={null} onClick={handleClick}>
|
||||
{text}
|
||||
</Checkbox>
|
||||
);
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
padding-right: 9px;
|
||||
font-size: 64px;
|
||||
line-height: 62px;
|
||||
background: linear-gradient(87.53deg, #683DE3 0.4%, #39227D 84.55%);
|
||||
background: linear-gradient(87.53deg, #683de3 0.4%, #39227d 84.55%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@ -87,31 +87,48 @@
|
||||
box-sizing: border-box;
|
||||
height: 130px;
|
||||
padding: 24px 32px;
|
||||
&-time {
|
||||
&-top-line {
|
||||
.flex-row();
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
.noWrap();
|
||||
}
|
||||
&-id {
|
||||
.id {
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
&-time {
|
||||
padding-right: 55px;
|
||||
}
|
||||
&-details {
|
||||
margin-top: 5px;
|
||||
white-space: nowrap;
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-id {
|
||||
&-tag {
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #6d3df5;
|
||||
border-radius: 4px;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
color: #999999;
|
||||
padding-right: 22px;
|
||||
color: #6d3df5;
|
||||
display: inline-block;
|
||||
}
|
||||
&-info {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: #333333;
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -257,7 +274,7 @@
|
||||
|
||||
&__share-button {
|
||||
//flex: 2 2;
|
||||
flex: 0 0 406px;
|
||||
flex: 0 0 406px;
|
||||
width: 406px;
|
||||
.button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
|
||||
//margin-left: 32px;
|
||||
|
||||
@ -4,28 +4,56 @@ 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 { formatMoney, formatTimestamp, formatUserId, getLastProfitList } from '@/utils/partner';
|
||||
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 handleConfirm = useCallback(() => {
|
||||
navigateTo(PageUrl.GroupOwnerCertificate);
|
||||
}, []);
|
||||
const userInfo = useUserInfo();
|
||||
const needPhone = isNeedPhone(userInfo);
|
||||
const [loginVisible, setLoginVisible] = useState(false);
|
||||
|
||||
const handleOpenService = useCallback(() => {
|
||||
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
|
||||
}, []);
|
||||
|
||||
const handleJump = useCallback(() => {
|
||||
navigateTo(PageUrl.PartnerShareVip);
|
||||
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[]>([]);
|
||||
@ -57,6 +85,19 @@ export default function PartnerIntro() {
|
||||
}
|
||||
};
|
||||
}, [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
|
||||
@ -80,17 +121,24 @@ export default function PartnerIntro() {
|
||||
<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-time`}>{formatTimestamp(item.updatedAt)}</div>
|
||||
<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 className={`${PREFIX}__swiper-item-id`}>{formatUserId(item.userId)}</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, 1)}</div>
|
||||
<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, 1)}</div>
|
||||
累计<div className="money">{formatMoney(item.total)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Swiper.Item>
|
||||
@ -163,6 +211,10 @@ export default function PartnerIntro() {
|
||||
赠送会员给好友
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loginVisible && (
|
||||
<LoginDialog onCancel={() => setLoginVisible(false)} onSuccess={handleBindSuccess} needPhone={needPhone} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user