magic-csb/boluo-app-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: banner

Browse Source
This commit is contained in:
eleanor.mao 2025-04-24 00:43:55 +08:00
parent 7988725223
commit 7aafc3a789
16 changed files with 367 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/partner-entry/index.less
View File

@ -46,16 +46,31 @@
}
&__kanban {
min-height: 280px;
box-sizing: border-box;
border-radius: 16px;
margin-bottom: 24px;
padding: 36px 40px;
position: relative;
background: #6d3df5;
color: #fff;
&-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-content {
position: relative;
min-height: 280px;
box-sizing: border-box;
padding: 36px 40px;
z-index: 1;
}
&-button {
position: absolute;
z-index: 2;
top: 44px;
right: 56px;
font-size: 24px;

104
src/components/partner-entry/index.tsx
View File

@ -1,49 +1,93 @@
import { Button, Image } from '@tarojs/components';
import { BaseEventOrig, Button, ButtonProps, Image } from '@tarojs/components';
import { useState } from 'react';
import { useCallback, useState } from 'react';
import { PageUrl } from '@/constants/app';
import useUserInfo from '@/hooks/use-user-info';
import { navigateTo } from '@/utils/route';
import Toast from '@/utils/toast';
import { requestUserInfo, setPhoneNumber } from '@/utils/user';
import './index.less';
const PREFIX = 'partner-fragment-entry';
function JoinEntry() {
type JoinEntryProps = {
onBindSuccess: () => void;
};
function JoinEntry({ onBindSuccess }: JoinEntryProps) {
const userInfo = useUserInfo();
const hasPhone = !!userInfo.phone;
const handleGetPhoneNumber = useCallback(async (e: BaseEventOrig<ButtonProps.onGetPhoneNumberEventDetail>) => {
const encryptedData = e.detail.encryptedData;
const iv = e.detail.iv;
if (!encryptedData || !iv) {
return Toast.error('取消授权');
}
try {
await setPhoneNumber({ encryptedData, iv });
await requestUserInfo();
Toast.success('绑定成功');
onBindSuccess();
} catch (err) {
Toast.error('绑定失败');
}
}, []);
return (
<div className={`${PREFIX}__join`}>
<div className={`${PREFIX}__join-title`}>
加入播络合伙人，高达<span className="highlight">75%</span>分成
</div>
<div className={`${PREFIX}__join-desc`}>模式简单，分成比例高，欢迎各位群主、经纪人或机构</div>
<Button className={`${PREFIX}__join-button`}>立即加入</Button>
{hasPhone && (
<Button className={`${PREFIX}__join-button`} onClick={onBindSuccess}>
立即加入
</Button>
)}
{!hasPhone && (
<Button className={`${PREFIX}__join-button`} openType="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
立即加入
</Button>
)}
</div>
);
}
function PartnerKanban() {
const handleNavigate = useCallback(() => {
navigateTo(PageUrl.Partner);
}, []);
return (
<div className={`${PREFIX}__kanban`}>
<div className={`${PREFIX}__kanban-button`}>
查看详情
<Image
className={`${PREFIX}__kanban-button__image`}
mode="aspectFit"
src={require('@/statics/svg/caret-right.svg')}
/>
</div>
<div className={`${PREFIX}__kanban-total`}>
<div className={`${PREFIX}__kanban-title`}>总收益（元）</div>
<div className={`${PREFIX}__kanban-money`}>1666.66</div>
</div>
<div className={`${PREFIX}__kanban-details`}>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}>可提现（元）</div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
<Image className={`${PREFIX}__kanban-bg`} src={require('@/statics/png/partner_bg.png')} mode="scaleToFill" />
<div className={`${PREFIX}__kanban-content`}>
<div className={`${PREFIX}__kanban-button`} onClick={handleNavigate}>
查看详情
<Image
className={`${PREFIX}__kanban-button__image`}
mode="aspectFit"
src={require('@/statics/svg/caret-right.svg')}
/>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}>提现中（元）</div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
<div className={`${PREFIX}__kanban-total`}>
<div className={`${PREFIX}__kanban-title`}>总收益（元）</div>
<div className={`${PREFIX}__kanban-money`}>1666.66</div>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}>待分账（元）</div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
<div className={`${PREFIX}__kanban-details`}>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}>可提现（元）</div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}>提现中（元）</div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
</div>
<div className={`${PREFIX}__kanban-details-part`}>
<div className={`${PREFIX}__kanban-title`}>待分账（元）</div>
<div className={`${PREFIX}__kanban-money`}>666.23</div>
</div>
</div>
</div>
</div>
@ -51,10 +95,14 @@ function PartnerKanban() {
}
export default function PartnerEntry() {
const [state] = useState(1);
const [state, setState] = useState(1);
// TODO: 开通状态检查
const handleBindSuccess = useCallback(() => {
setState(0);
}, []);
if (state === 0) {
return <JoinEntry />;
return <JoinEntry onBindSuccess={handleBindSuccess} />;
}
return <PartnerKanban />;
}

123
src/components/partner-intro/index.less Normal file
View File

@ -0,0 +1,123 @@
@import '@/styles/variables.less';
@import '@/styles/common.less';
.partner-intro {
padding-top: 112px;
padding-bottom: calc(112px + constant(safe-area-inset-bottom));
padding-bottom: calc(112px + env(safe-area-inset-bottom));
&__banner {
background: fade(@blHighlightBg, 8);
height: 88px;
line-height: 88px;
text-align: center;
font-size: 28px;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100vw;
}
&__main {
padding-left: 24px;
padding-right: 24px;
}
&__highlight {
color: @blHighlightColor;
font-family: 'DIN Alternate';
padding: 0 8px;
font-weight: 700;
display: inline-block;
font-size: 40px;
}
&__block {
margin-bottom: 40px;
}
&__card {
background: #fff;
border-radius: 24px;
padding: 24px 32px;
}
&__h1 {
font-weight: 500;
font-size: 32px;
line-height: 40px;
color: #1d2129;
margin-bottom: 16px;
margin-top: 32px;
&:first-child {
margin-top: 0;
}
}
&__body {
font-weight: 400;
font-size: 28px;
line-height: 40px;
}
&__title {
margin-bottom: 24px;
font-weight: 500;
font-size: 32px;
line-height: 32px;
color: #1d2129;
}
&__special {
padding: 32px;
.flex-column();
.partner-intro__body {
text-align: center;
}
}
&__service {
.button(@height: 72px; @width: 384px; @fontSize: 28px; @fontWeight: 400; @borderRadius: 44px; @highlight: 0);
margin-top: 32px;
}
&__tip {
margin-top: 24px;
font-size: 24px;
line-height: 40px;
color: #999999;
}
&__footer {
position: fixed;
bottom: 0;
width: 100vw;
background: #ffffff;
padding: 12px 32px;
padding-bottom: calc(constant(safe-area-inset-bottom) + 12px);
/* 兼容 iOS < 11.2 */
padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
/* 兼容 iOS >= 11.2 */
box-shadow: 0px -4px 20px 0px #00000014;
display: flex;
flex-direction: row;
box-sizing: border-box;
}
&__download-button {
flex: 1 1;
.button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px; @highlight: 0);
}
&__share-button {
flex: 2 2;
.button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
margin-left: 32px;
}
}

61
src/components/partner-intro/index.tsx Normal file
View File

@ -0,0 +1,61 @@
import { Button } from '@tarojs/components';
import { useCallback } from 'react';
import { openCustomerServiceChat } from '@/utils/common';
import './index.less';
const PREFIX = 'partner-intro';
export default function PartnerIntro() {
const handleOpenService = useCallback(() => {
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
}, []);
return (
<div className={PREFIX}>
<div className={`${PREFIX}__banner`}>
邀请朋友加入播络，高达<span className={`${PREFIX}__highlight`}>75%</span>分成
</div>
<div className={`${PREFIX}__main`}>
<div className={`${PREFIX}__block`}>
<div className={`${PREFIX}__card`}>
<div className={`${PREFIX}__h1`}>收益一</div>
<div className={`${PREFIX}__body`}>
直接获得被邀请人付款金额的<span className={`${PREFIX}__highlight`}>20%</span>
</div>
<div className={`${PREFIX}__h1`}>收益二</div>
<div className={`${PREFIX}__body`}>
邀请的主播创建模卡，被企业开聊，每日可获得收益，分成比例高达
<span className={`${PREFIX}__highlight`}>50%</span>
</div>
<div className={`${PREFIX}__h1`}>收益三</div>
<div className={`${PREFIX}__body`}>
邀请朋友加入合伙人，可额外获得所邀合伙人收益的<span className={`${PREFIX}__highlight`}>5%</span>
</div>
</div>
</div>
<div className={`${PREFIX}__block`}>
<div className={`${PREFIX}__title`}>群主特别通道</div>
<div className={`${PREFIX}__card ${PREFIX}__special`}>
<div className={`${PREFIX}__body`}>如果您是主播群群主，请务必添加播络小伙计</div>
<div className={`${PREFIX}__body`}>我们会为您提供专属服务，让您的收益最大化</div>
<Button className={`${PREFIX}__service`} onClick={handleOpenService}>
点击添加播络伙计
</Button>
</div>
<div className={`${PREFIX}__tip`}>注：收益不设时限，可重复享有，播络保留活动最终解释权</div>
</div>
</div>
</div>
);
}
export function PartnerIntroFooter() {
return (
<div className={`${PREFIX}__footer`}>
<Button className={`${PREFIX}__download-button`}>下载海报</Button>
<Button className={`${PREFIX}__share-button`} openType="share">
分享邀请
</Button>
</div>
);
}

1
src/constants/cache-key.ts
View File

@ -8,4 +8,5 @@ export enum CacheKey {
APP_MODE = '__bl_app_mode__',
APP_MODE_NEW = '__bl_app_mode_2__',
LAST_SELECT_MY_JOB = '__last_select_my_job__',
CLOSE_PARTNER_BANNER = '__last_close_partner_banner__',
}

26
src/fragments/job/base/index.less
View File

@ -1,4 +1,5 @@
@import '@/styles/variables.less';
@import '@/styles/common.less';
.all-job-fragment {
&__container {
@ -76,7 +77,7 @@
flex-direction: row;
align-items: center;
justify-content: center;
border-left: solid 2px #E0E0E0;
border-left: solid 2px #e0e0e0;
font-size: 28px;
line-height: 32px;
@ -118,7 +119,7 @@
&__empty-box {
width: 386px;
height: 278px;
}
}
&__tips-title {
font-size: 28px;
@ -138,10 +139,29 @@
&__add-group-button {
font-size: 28px;
line-height: 40px;
color: #FFFFFF;
color: #ffffff;
background-color: @blHighlightColor;
border-radius: 48px;
padding: 20px 30px;
margin-top: 30px;
}
}
.partner-banner {
width: 100%;
height: 90px;
position: relative;
&__image {
width: 100%;
height: 100%;
}
&__close {
width: 64px;
height: 38px;
position: absolute;
right: 0;
top: 0;
}
}

24
src/fragments/job/base/index.tsx
View File

@ -4,7 +4,7 @@ import { NodesRef, useDidHide } from '@tarojs/taro';
import { Tabs } from '@taroify/core';
import { ArrowUp, ArrowDown } from '@taroify/icons';
import classNames from 'classnames';
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useState, MouseEvent } from 'react';
import JobList, { IJobListProps } from '@/components/job-list';
import Overlay from '@/components/overlay';
@ -18,6 +18,7 @@ import { SalaryRange } from '@/types/job';
import { Coordinate } from '@/types/location';
import { logWithPrefix } from '@/utils/common';
import { navigateTo } from '@/utils/route';
import { getPartnerBannerClose, setPartnerBannerClose } from '@/utils/partner';
import './index.less';
@ -42,6 +43,18 @@ const CALC_LIST_PROPS: IUseListHeightProps = {
const log = logWithPrefix(PREFIX);
const PartnerBanner = (props: { onClose: (e: MouseEvent) => void }) => {
const handleClick = useCallback(() => {
navigateTo(PageUrl.Partner);
}, []);
return (
<div className="partner-banner" onClick={handleClick}>
<Image className="partner-banner__image" src={require('@/statics/png/partner_banner.png')} mode="aspectFill" />
<div className="partner-banner__close" onClick={props.onClose} />
</div>
);
};
const NoGroupTips = (props: { className?: string; height?: number }) => {
const { className, height } = props;
return (
@ -80,6 +93,7 @@ function JobFragment(props: IProps) {
const [salaryRange, setSalaryRange] = useState<SalaryRange | undefined>();
const [showSalarySelect, setShowSalarySelect] = useState<boolean>(false);
const { latitude, longitude } = coordinate;
const [bannerClose, setBannerClose] = useState<boolean>(getPartnerBannerClose());
const handleClickSearch = useCallback(() => navigateTo(PageUrl.JobSearch, { city: cityCode }), [cityCode]);
@ -103,6 +117,13 @@ function JobFragment(props: IProps) {
[setTabType]
);
const handlePartnerBannerClose = useCallback(e => {
e.preventDefault();
e.stopPropagation();
setBannerClose(true);
setPartnerBannerClose();
}, []);
useDidHide(() => setShowSalarySelect(false));
return (
@ -132,6 +153,7 @@ function JobFragment(props: IProps) {
<Tabs className={`${PREFIX}__type-tabs`} value={tabType} onChange={onTypeChange}>
{JOB_TABS.map(tab => (
<Tabs.TabPane title={tab.title} key={tab.type} value={tab.type}>
{!bannerClose && <PartnerBanner onClose={handlePartnerBannerClose} />}
<ListWrapper
category={tab.type}
cityCode={cityCode}

2
src/fragments/job/my-group/index.tsx
View File

@ -5,7 +5,7 @@ import classNames from 'classnames';
import { useCallback, useEffect, useState } from 'react';
import JobList from '@/components/job-list';
import ProductGroupDialog from '@/components/product-group-dialog';
import ProductGroupDialog from '@/components/product-dialog/group';
import { APP_TAB_BAR_ID } from '@/constants/app';
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
import { logWithPrefix } from '@/utils/common';

17
src/pages/certification/index.tsx
View File

@ -92,7 +92,7 @@ const uploadIdCard = async () => {
export default function Certification() {
const { phone } = useUserInfo();
const [revisedPhone, setRevisedPhone] = useState('')
const [revisedPhone, setRevisedPhone] = useState('');
const [leftIdCardUrl, setLeftIdCardUrl] = useState('');
const [rightIdCardUrl, setRightIdCardUrl] = useState('');
const [name, setName] = useState('');
@ -171,9 +171,8 @@ export default function Certification() {
const handleGetPhoneNumber = async (e: BaseEventOrig<ButtonProps.onGetRealTimePhoneNumberEventDetail>) => {
if (e.detail.code) {
try {
const { phoneNumber } = await getPhone(e.detail.code);
setRevisedPhone(phoneNumber)
setRevisedPhone(phoneNumber);
} catch (e) {
Toast.error('获取手机号失败');
}
@ -237,9 +236,17 @@ export default function Certification() {
<BlFormInput value={idNumber} onInput={handleInputIdNumber} type="idcard" maxlength={18} />
</BlFormItem>
<BlFormItem title="手机号" subTitle="请使用本人名下的手机号" contentClassName={`${PREFIX}__verify`} dynamicHeight>
<BlFormInput className={`${PREFIX}__verify__input`} value={revisedPhone || phone} type="number" maxlength={11} disabled />
<BlFormInput
className={`${PREFIX}__verify__input`}
value={revisedPhone || phone}
type="number"
maxlength={11}
disabled
/>
<div className={`${PREFIX}__verify__update`}>
<Button openType="getRealtimePhoneNumber" onGetRealTimePhoneNumber={handleGetPhoneNumber}>修改</Button>
<Button openType="getRealtimePhoneNumber" onGetRealTimePhoneNumber={handleGetPhoneNumber}>
修改
</Button>
</div>
</BlFormItem>
<BlFormItem title="公司全称" subTitle={false}>

18
src/pages/partner/index.tsx
View File

@ -1,15 +1,26 @@
import { Tabs } from '@taroify/core';
import { useShareAppMessage } from '@tarojs/taro';
import { Tabs } from '@taroify/core';
import { useState } from 'react';
import PartnerIntro, { PartnerIntroFooter } from '@/components/partner-intro';
import { getCommonShareMessage } from '@/utils/share';
import './index.less';
const PREFIX = 'partner';
export default function Partner() {
const [tab, setTab] = useState(0);
useShareAppMessage(() => {
return getCommonShareMessage(false);
});
return (
<div className={PREFIX}>
<Tabs swipeable className={`${PREFIX}__tabs`}>
<Tabs swipeable className={`${PREFIX}__tabs`} value={tab} onChange={setTab}>
<Tabs.TabPane value={0} title="简介">
简介
<PartnerIntro />
</Tabs.TabPane>
<Tabs.TabPane value={1} title="邀请名单">
邀请名单
@ -18,6 +29,7 @@ export default function Partner() {
我的收益
</Tabs.TabPane>
</Tabs>
{tab === 0 && <PartnerIntroFooter />}
</div>
);
}

2
src/pages/user/index.tsx
View File

@ -69,7 +69,7 @@ export default function User() {
/>
</Button>
</div>
<PartnerEntry />
{roleType === RoleType.Anchor && <PartnerEntry />}
{roleType === RoleType.Anchor && <AnchorFragment />}
{roleType === RoleType.Company && <CompanyFragment />}
</div>

BIN
src/statics/png/partner_banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/statics/png/partner_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 560 KiB

5
src/utils/company.ts
View File

@ -9,7 +9,6 @@ export const postCertification = async (data: ICertificationRequest) => {
return result;
};
export const getPhone = async (code: string): Promise<{ code: string }> => {
const result = await http.post<{ code: string }>(API.GET_PHONE, { data: { code } });
return result;
export const getPhone = async (code: string) => {
return await http.post<{ phoneNumber: string }>(API.GET_PHONE, { data: { code } });
};

8
src/utils/job.ts
View File

@ -27,12 +27,12 @@ import { collectEvent } from '@/utils/event';
import { getCityValues } from '@/utils/location';
export const isFullTimePriceRequired = (employType?: JobDetails['employType']) => {
return employType === EmployType.Full || employType === EmployType.All
}
return employType === EmployType.Full || employType === EmployType.All;
};
export const isPartTimePriceRequired = (employType?: JobDetails['employType']) => {
return employType === EmployType.Part || employType === EmployType.All
}
return employType === EmployType.Part || employType === EmployType.All;
};
export const getJobSalary = (data: Partial<JobDetails>) => {
const { salary, employType, lowPriceForFullTime, highPriceForFullTime, lowPriceForPartyTime, highPriceForPartyTime } =

7
src/utils/partner.ts Normal file
View File

@ -0,0 +1,7 @@
import Taro from '@tarojs/taro';
import { CacheKey } from '@/constants/cache-key';
export const getPartnerBannerClose = (): boolean => Taro.getStorageSync(CacheKey.CLOSE_PARTNER_BANNER);
export const setPartnerBannerClose = () => Taro.setStorageSync(CacheKey.CLOSE_PARTNER_BANNER, true);