feat: 模卡更新

This commit is contained in:
chashaobao
2025-11-03 22:18:39 +08:00
parent fde2027588
commit 5e3e6903cb
31 changed files with 479 additions and 193 deletions

View File

@ -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;
}
}
}
}

View File

@ -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>
);

View File

@ -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;

View File

@ -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>
);
}