Compare commits
12 Commits
2585f88774
...
451add0e7d
Author | SHA1 | Date | |
---|---|---|---|
|
451add0e7d | ||
|
ed99c7b1ae | ||
|
fa30ec2988 | ||
|
6762973e14 | ||
|
c0a2c66280 | ||
|
8ebd3363b8 | ||
|
c92ad08148 | ||
|
74579f09e3 | ||
|
276107722e | ||
|
9d6c89e0b6 | ||
|
fc37a612cc | ||
|
f60a753e5a |
@ -7,16 +7,16 @@ import { REFRESH_UNREAD_COUNT_TIME } from '@/constants/message';
|
||||
import http from '@/http';
|
||||
import store from '@/store';
|
||||
import { requestUnreadMessageCount } from '@/utils/message';
|
||||
import { getInviteCode } from '@/utils/partner';
|
||||
import { getInviteCode, getInviteCodeFromQuery } from '@/utils/partner';
|
||||
import qiniuUpload from '@/utils/qiniu-upload';
|
||||
import { requestUserInfo, updateLastLoginTime } from '@/utils/user';
|
||||
|
||||
import './app.less';
|
||||
|
||||
function App({ children }: PropsWithChildren<BL.Anything>) {
|
||||
useLaunch(async () => {
|
||||
useLaunch(async ({ query }) => {
|
||||
console.log('App launched.');
|
||||
await http.init();
|
||||
await http.init(getInviteCodeFromQuery(query));
|
||||
requestUserInfo().then(userInfo => {
|
||||
if (userInfo.isPartner) {
|
||||
getInviteCode();
|
||||
|
@ -61,6 +61,10 @@
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
|
||||
&.grey {
|
||||
color: @blColorG2
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
@ -142,12 +142,18 @@ export default function PartnerIntro() {
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__block`}>
|
||||
<div className={`${PREFIX}__title`}>群主特别通道</div>
|
||||
<div className={`${PREFIX}__title`}>分享方法</div>
|
||||
<div className={`${PREFIX}__card`}>
|
||||
<div className={`${PREFIX}__body`}>分享小程序任意页面到群、朋友圈、好友即可</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>
|
||||
<div className={`${PREFIX}__h1`}>加入播络合伙人交流群</div>
|
||||
<div className={`${PREFIX}__body grey`}>学习分享邀请经验,一起赚钱</div>
|
||||
<Button className={`${PREFIX}__service`} onClick={handleOpenService}>
|
||||
点击添加播络伙计
|
||||
点击加入
|
||||
</Button>
|
||||
</div>
|
||||
<div className={`${PREFIX}__tip`}>注:收益不设时限,可重复享有,播络保留活动最终解释权</div>
|
||||
|
@ -41,14 +41,18 @@
|
||||
height: 131px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 24px 32px;
|
||||
padding: 24px 32px 0 32px;
|
||||
box-sizing: border-box;
|
||||
font-size: 28px;
|
||||
|
||||
&-border {
|
||||
border-bottom: 1px solid #e6e7e8;
|
||||
}
|
||||
|
||||
&-content {
|
||||
.flex-row();
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e6e7e8;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
&-time-id {
|
||||
|
@ -12,6 +12,8 @@ import './index.less';
|
||||
const PREFIX = 'partner-invite-list';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
|
||||
const FIRST_PAGE = 0;
|
||||
|
||||
function PartnerList(props: {
|
||||
refreshDisabled?: boolean;
|
||||
visible?: boolean;
|
||||
@ -20,10 +22,12 @@ function PartnerList(props: {
|
||||
onListEmpty?: () => void;
|
||||
}) {
|
||||
const { className, listHeight, refreshDisabled, visible = true, onListEmpty } = props;
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [loadMoreError, setLoadMoreError] = useState(false);
|
||||
const [dataList, setDataList] = useState<InviteUserInfo[]>([]);
|
||||
const currentPage = useRef<number>(FIRST_PAGE);
|
||||
const onListEmptyRef = useRef(onListEmpty);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
@ -31,19 +35,44 @@ function PartnerList(props: {
|
||||
try {
|
||||
setRefreshing(true);
|
||||
setLoadMoreError(false);
|
||||
const list = await requestData();
|
||||
setDataList(list);
|
||||
!list.length && onListEmptyRef.current?.();
|
||||
const { content, totalPages } = await requestData({ page: 1 });
|
||||
setDataList(content);
|
||||
currentPage.current = 1;
|
||||
setHasMore(currentPage.current < totalPages);
|
||||
!content.length && onListEmptyRef.current?.();
|
||||
log('pull refresh success');
|
||||
} catch (e) {
|
||||
setDataList([]);
|
||||
setHasMore(false);
|
||||
setLoadMoreError(true);
|
||||
currentPage.current = FIRST_PAGE;
|
||||
log('pull refresh failed');
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleLoadMore = useCallback(async () => {
|
||||
log('start load more', hasMore);
|
||||
if (!hasMore) {
|
||||
return;
|
||||
}
|
||||
setLoadMoreError(false);
|
||||
setLoadingMore(true);
|
||||
try {
|
||||
const { totalPages, content } = await requestData({ page: currentPage.current + 1 });
|
||||
setDataList([...dataList, ...content]);
|
||||
currentPage.current = currentPage.current + 1;
|
||||
setHasMore(currentPage.current < totalPages);
|
||||
log('load more success');
|
||||
} catch (e) {
|
||||
setLoadMoreError(true);
|
||||
log('load more failed');
|
||||
} finally {
|
||||
setLoadingMore(false);
|
||||
}
|
||||
}, [dataList, hasMore]);
|
||||
|
||||
useEffect(() => {
|
||||
onListEmptyRef.current = onListEmpty;
|
||||
}, [onListEmpty]);
|
||||
@ -62,11 +91,14 @@ function PartnerList(props: {
|
||||
setDataList([]);
|
||||
setLoadingMore(true);
|
||||
setLoadMoreError(false);
|
||||
const list = await requestData();
|
||||
setDataList(list);
|
||||
!list.length && onListEmptyRef.current?.();
|
||||
const { totalPages, content } = await requestData({ page: 1 });
|
||||
setDataList(content);
|
||||
currentPage.current = 1;
|
||||
setHasMore(currentPage.current < totalPages);
|
||||
!content.length && onListEmptyRef.current?.();
|
||||
} catch (e) {
|
||||
setDataList([]);
|
||||
setHasMore(false);
|
||||
setLoadMoreError(true);
|
||||
} finally {
|
||||
log('visible changed, refresh list data end');
|
||||
@ -90,8 +122,8 @@ function PartnerList(props: {
|
||||
disabled={refreshDisabled}
|
||||
>
|
||||
<List
|
||||
hasMore={false}
|
||||
onLoad={() => {}}
|
||||
hasMore={hasMore}
|
||||
onLoad={handleLoadMore}
|
||||
loading={loadingMore || refreshing}
|
||||
disabled={loadMoreError}
|
||||
fixedHeight={typeof listHeight !== 'undefined'}
|
||||
@ -99,13 +131,15 @@ function PartnerList(props: {
|
||||
>
|
||||
{dataList.map(item => (
|
||||
<div className={`${PREFIX}__item`} key={item.id || item.userId}>
|
||||
<div className={`${PREFIX}__item-content`}>
|
||||
<div className={`${PREFIX}__item-time-id`}>
|
||||
<div className={`${PREFIX}__item-time`}>{formatTimestamp(item.created)}</div>
|
||||
<div className={`${PREFIX}__item-id`}>{formatUserId(item.userId)}</div>
|
||||
<div className={`${PREFIX}__item-border`}>
|
||||
<div className={`${PREFIX}__item-content`}>
|
||||
<div className={`${PREFIX}__item-time-id`}>
|
||||
<div className={`${PREFIX}__item-time`}>{formatTimestamp(item.created)}</div>
|
||||
<div className={`${PREFIX}__item-id`}>{formatUserId(item.userId)}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__item-created`}>{item.isCreateResume ? '已创建' : '未创建'}</div>
|
||||
<div className={`${PREFIX}__item-joined`}>{item.isPartner ? '已加入' : '未加入'}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__item-created`}>{item.isCreateResume ? '已创建' : '未创建'}</div>
|
||||
<div className={`${PREFIX}__item-joined`}>{item.isPartner ? '已加入' : '未加入'}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
@ -3,12 +3,12 @@ import classNames from 'classnames';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import ListPlaceholder from '@/components/list-placeholder';
|
||||
import { ProfitStatusDescriptions } from '@/constants/partner';
|
||||
import { GetProfitRequest, PartnerProfitItem, ProfitType } from '@/types/partner';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { formatMoney, formatTimestamp, getProfitList as requestData } from '@/utils/partner';
|
||||
|
||||
import './index.less';
|
||||
import { PROFIT_STATUS_MAP, PROFIT_TYPE_MAP } from '@/constants/partner';
|
||||
|
||||
export interface IPartnerProfitListProps extends GetProfitRequest {
|
||||
visible?: boolean;
|
||||
@ -22,7 +22,7 @@ const PREFIX = 'partner-profit';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
|
||||
function ProfitList(props: IPartnerProfitListProps) {
|
||||
const { className, listHeight, refreshDisabled, visible = true, profitType, onListEmpty } = props;
|
||||
const { className, listHeight, refreshDisabled, visible = true, type, onListEmpty } = props;
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [loadMoreError, setLoadMoreError] = useState(false);
|
||||
@ -34,7 +34,7 @@ function ProfitList(props: IPartnerProfitListProps) {
|
||||
try {
|
||||
setRefreshing(true);
|
||||
setLoadMoreError(false);
|
||||
const list = await requestData({ profitType });
|
||||
const list = await requestData({ type });
|
||||
setDataList(list);
|
||||
!list.length && onListEmptyRef.current?.();
|
||||
log('pull refresh success');
|
||||
@ -65,7 +65,7 @@ function ProfitList(props: IPartnerProfitListProps) {
|
||||
setDataList([]);
|
||||
setLoadingMore(true);
|
||||
setLoadMoreError(false);
|
||||
const list = await requestData({ profitType });
|
||||
const list = await requestData({ type });
|
||||
setDataList(list);
|
||||
!list.length && onListEmptyRef.current?.();
|
||||
} catch (e) {
|
||||
@ -77,7 +77,7 @@ function ProfitList(props: IPartnerProfitListProps) {
|
||||
}
|
||||
};
|
||||
refresh();
|
||||
}, [visible, profitType]);
|
||||
}, [visible, type]);
|
||||
|
||||
return (
|
||||
<div className={`${PREFIX}__tab-content`}>
|
||||
@ -95,18 +95,21 @@ function ProfitList(props: IPartnerProfitListProps) {
|
||||
fixedHeight={typeof listHeight !== 'undefined'}
|
||||
style={listHeight ? { height: `${listHeight}px` } : undefined}
|
||||
>
|
||||
{dataList.map(item => (
|
||||
<div className={`${PREFIX}__row`} key={item.id}>
|
||||
<div className={`${PREFIX}__row-content`}>
|
||||
<div className={`${PREFIX}__item time`}>{formatTimestamp(item.created)}</div>
|
||||
<div className={`${PREFIX}__item project`}>{PROFIT_TYPE_MAP[profitType]}</div>
|
||||
<div className={`${PREFIX}__item status`}>
|
||||
{profitType === ProfitType.Anchor ? '已结算' : PROFIT_STATUS_MAP[item.status]}
|
||||
{dataList.map(item => {
|
||||
const isChat = type === ProfitType.CHAT_SHARE || item.earnType.toString().toLowerCase().indexOf('chat') > -1;
|
||||
return (
|
||||
<div className={`${PREFIX}__row`} key={item.id}>
|
||||
<div className={`${PREFIX}__row-content`}>
|
||||
<div className={`${PREFIX}__item time`}>{formatTimestamp(item.created)}</div>
|
||||
<div className={`${PREFIX}__item project`}>{isChat ? '主播被开聊' : '会员支付'}</div>
|
||||
<div className={`${PREFIX}__item status`}>
|
||||
{isChat ? '已结算' : ProfitStatusDescriptions[item.status]}
|
||||
</div>
|
||||
<div className={`${PREFIX}__item income`}>+{formatMoney(item.amount)}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__item income`}>+{formatMoney(item.profit)}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
<ListPlaceholder hasMore={false} loadingMore={loadingMore} loadMoreError={loadMoreError} />
|
||||
</List>
|
||||
</PullRefresh>
|
||||
|
@ -28,6 +28,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__help-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
|
@ -1,7 +1,10 @@
|
||||
import { Image } from '@tarojs/components';
|
||||
|
||||
import { Tabs } from '@taroify/core';
|
||||
|
||||
import PartnerKanban from '@/components/partner-kanban';
|
||||
import { ProfitType } from '@/types/partner';
|
||||
import Toast from '@/utils/toast';
|
||||
|
||||
import ProfitList from './ProfitList';
|
||||
|
||||
@ -21,24 +24,66 @@ function TableTitle() {
|
||||
}
|
||||
|
||||
export default function PartnerProfit() {
|
||||
const handleClickHelpChat = () => {
|
||||
Toast.info('主播被开聊14天后会显示收益');
|
||||
};
|
||||
const handleClickHelpPay = () => {
|
||||
Toast.info('会员支付15日后结算收益');
|
||||
};
|
||||
const handleClickHelpInvite = () => {
|
||||
Toast.info('所邀合伙人获得收益后自动获得收益');
|
||||
};
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__top`}>
|
||||
<PartnerKanban />
|
||||
</div>
|
||||
<div className={`${PREFIX}__main`}>
|
||||
<Tabs className={`${PREFIX}__tabs`}>
|
||||
<Tabs.TabPane title="推荐主播收益">
|
||||
<Tabs className={`${PREFIX}__tabs`} ellipsis={false}>
|
||||
<Tabs.TabPane
|
||||
title={
|
||||
<>
|
||||
推荐主播收益
|
||||
<Image
|
||||
className={`${PREFIX}__help-icon`}
|
||||
src={require('@/statics/svg/help.svg')}
|
||||
onClick={handleClickHelpChat}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<TableTitle />
|
||||
<ProfitList profitType={ProfitType.Anchor} />
|
||||
<ProfitList type={ProfitType.CHAT_SHARE} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane title="推荐会员权益">
|
||||
<Tabs.TabPane
|
||||
title={
|
||||
<>
|
||||
推荐会员权益
|
||||
<Image
|
||||
className={`${PREFIX}__help-icon`}
|
||||
src={require('@/statics/svg/help.svg')}
|
||||
onClick={handleClickHelpPay}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<TableTitle />
|
||||
<ProfitList profitType={ProfitType.Member} />
|
||||
<ProfitList type={ProfitType.PAYMENT_SHARE} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane title="推荐合伙人收益">
|
||||
<Tabs.TabPane
|
||||
title={
|
||||
<>
|
||||
推荐合伙人收益
|
||||
<Image
|
||||
className={`${PREFIX}__help-icon`}
|
||||
src={require('@/statics/svg/help.svg')}
|
||||
onClick={handleClickHelpInvite}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<TableTitle />
|
||||
<ProfitList profitType={ProfitType.Partner} />
|
||||
<ProfitList type={ProfitType.INDIRECT_MEMBER_REFERRAL} />
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
162
src/components/search-city/index.less
Normal file
162
src/components/search-city/index.less
Normal file
@ -0,0 +1,162 @@
|
||||
@import '@/styles/variables.less';
|
||||
@import '@/styles/common.less';
|
||||
|
||||
.search-city {
|
||||
background: #fff;
|
||||
|
||||
&__position-title {
|
||||
font-size: 24px;
|
||||
color: @blColorG1;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__position-city {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: @blColor;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-title {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: #999;
|
||||
background: #f2f5f7;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
width: 630px;
|
||||
padding: 12px 90px 26px 30px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&__hot-city-item {
|
||||
width: 140px;
|
||||
height: 58px;
|
||||
font-size: 28px;
|
||||
line-height: 58px;
|
||||
text-align: center;
|
||||
border-radius: 58px;
|
||||
border: 2px solid @blColorG1;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__indexes-list {
|
||||
width: 100%;
|
||||
/* 兼容 iOS < 11.2 */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS >= 11.2 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
&__indexes-fragment {
|
||||
}
|
||||
|
||||
&__indexes-anchor {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: @blColorG1;
|
||||
background: #f2f5f7;
|
||||
}
|
||||
|
||||
&__indexes-cell {
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
padding: 30px 24px;
|
||||
color: @blColor;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__indexes-bar {
|
||||
width: 44rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&__indexes-bar-item {
|
||||
font-size: 22px;
|
||||
color: @blColor;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__indexes-index-alert {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -80px;
|
||||
margin-top: -80px;
|
||||
border-radius: 80px;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
font-size: 70px;
|
||||
color: #ffffff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
&__search-wrapper {
|
||||
&.group {
|
||||
background: linear-gradient(2.75deg, #ffffff 7.9%, #f2edff 97.24%);
|
||||
.search-city__search {
|
||||
background-color: transparent;
|
||||
.taroify-search__content--rounded {
|
||||
border: @blHighlightColor 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__banner {
|
||||
padding: 32px 24px 0;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: @blHighlightColor;
|
||||
.flex-row();
|
||||
|
||||
.text {
|
||||
padding: 0 12px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.dash {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
background: linear-gradient(270deg, #6d3df5 0%, #f7f4ff 100%);
|
||||
}
|
||||
&:last-child {
|
||||
background: linear-gradient(90deg, #6d3df5 0%, #f7f4ff 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
241
src/components/search-city/index.tsx
Normal file
241
src/components/search-city/index.tsx
Normal file
@ -0,0 +1,241 @@
|
||||
import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Search } from '@taroify/core';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST, GROUP_CITY_INDEXES_LIST } from '@/constants/city';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface Item {
|
||||
cityCode: number | string;
|
||||
cityName: string;
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
const PREFIX = 'search-city';
|
||||
const HOT_CITY = [
|
||||
{ cityCode: 110100, cityName: '北京' },
|
||||
{ cityCode: 310100, cityName: '上海' },
|
||||
{ cityCode: 440100, cityName: '广州' },
|
||||
{ cityCode: 440300, cityName: '深圳' },
|
||||
{ cityCode: 330100, cityName: '杭州' },
|
||||
{ cityCode: 430100, cityName: '长沙' },
|
||||
{ cityCode: 420100, cityName: '武汉' },
|
||||
{ cityCode: 350200, cityName: '厦门' },
|
||||
{ cityCode: 610100, cityName: '西安' },
|
||||
{ cityCode: 410100, cityName: '郑州' },
|
||||
{ cityCode: 510100, cityName: '成都' },
|
||||
{ cityCode: 340100, cityName: '合肥' },
|
||||
];
|
||||
|
||||
const OFFSET_INDEX_SIZE = 2;
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const realtimeLogger = Taro.getRealtimeLogManager();
|
||||
realtimeLogger.tag(PREFIX);
|
||||
const useHeight = () => {
|
||||
const [winHeight, setWinHeight] = useState(0);
|
||||
const [indexItemHeight, setIndexItemHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const windowInfo = Taro.getWindowInfo();
|
||||
const windowHeight = windowInfo.windowHeight;
|
||||
setWinHeight(windowHeight);
|
||||
// 上下预留两个选项高度的空白
|
||||
setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
|
||||
}, []);
|
||||
|
||||
return [winHeight, indexItemHeight];
|
||||
};
|
||||
export interface SearchCityProps {
|
||||
onSelectCity: (cityCode: string) => void;
|
||||
currentCity?: string;
|
||||
forGroup?: boolean;
|
||||
banner?: string;
|
||||
offset?: number;
|
||||
}
|
||||
|
||||
export default function SearchCity({
|
||||
onSelectCity,
|
||||
currentCity = '',
|
||||
banner = '',
|
||||
forGroup = false,
|
||||
offset = 0,
|
||||
}: SearchCityProps) {
|
||||
const [winHeight, indexItemHeight] = useHeight();
|
||||
const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
|
||||
const [touchMoving, setTouchMoving] = useState(false);
|
||||
const [searchResult, setSearchResult] = useState<Item[]>([]);
|
||||
const showSearchList = searchResult.length > 0;
|
||||
const CITY_LIST = forGroup ? GROUP_CITY_INDEXES_LIST : CITY_INDEXES_LIST;
|
||||
|
||||
const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||||
const value = event.detail.value;
|
||||
log('handleSearchChange', value);
|
||||
if (!value) {
|
||||
setSearchResult([]);
|
||||
return;
|
||||
}
|
||||
const result: Item[] = [];
|
||||
CITY_LIST.forEach(obj => {
|
||||
obj.data.forEach(city => {
|
||||
if (city.keyword.includes(value.toLocaleUpperCase())) {
|
||||
result.push({ ...city });
|
||||
}
|
||||
});
|
||||
});
|
||||
setSearchResult(result);
|
||||
}, []);
|
||||
|
||||
const handleSelectCity = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const cityCode = e.currentTarget.dataset.code;
|
||||
onSelectCity(String(cityCode));
|
||||
},
|
||||
[onSelectCity]
|
||||
);
|
||||
|
||||
const handleTouchStart = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_LIST[index];
|
||||
if (item) {
|
||||
setTouchMoving(true);
|
||||
setTouchAnchor(item.letter);
|
||||
}
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchMove = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_LIST[index];
|
||||
item && setTouchAnchor(item.letter);
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation();
|
||||
setTouchMoving(false);
|
||||
log('touch end');
|
||||
}, []);
|
||||
|
||||
const handleClickAnchor = useCallback((anchor: string) => {
|
||||
setTouchAnchor(anchor);
|
||||
log('click anchor', anchor);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<ScrollView scrollY style={{ height: winHeight - offset }} scrollIntoView={touchAnchor}>
|
||||
<div className={`${PREFIX}__search-wrapper ${forGroup ? 'group' : ''}`}>
|
||||
{forGroup && banner ? (
|
||||
<div className={`${PREFIX}__banner`}>
|
||||
<div className="dash"></div>
|
||||
<div className="text">{banner}</div>
|
||||
<div className="dash"></div>
|
||||
</div>
|
||||
) : null}
|
||||
<Search
|
||||
className={`${PREFIX}__search`}
|
||||
placeholder="输入城市名称"
|
||||
shape="rounded"
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
{showSearchList && (
|
||||
<div className={`${PREFIX}__search-list`}>
|
||||
{searchResult.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!showSearchList && (
|
||||
<div>
|
||||
<div className={`${PREFIX}__position-title`}>当前城市</div>
|
||||
<div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
|
||||
<div className={`${PREFIX}__hot-city-title`}>热门城市</div>
|
||||
<div className={`${PREFIX}__hot-city-container`}>
|
||||
{HOT_CITY.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__hot-city-item`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`${PREFIX}__indexes-list`}>
|
||||
{CITY_LIST.map(item => {
|
||||
return (
|
||||
<div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
|
||||
<div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
|
||||
{item.letter}
|
||||
</div>
|
||||
{item.data.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ScrollView>
|
||||
<div>
|
||||
{!showSearchList && (
|
||||
<div
|
||||
className={`${PREFIX}__indexes-bar`}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onTouchCancel={handleTouchEnd}
|
||||
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE + (forGroup ? 72 : 0) }}
|
||||
>
|
||||
{CITY_LIST.map(item => {
|
||||
return (
|
||||
<div
|
||||
key={item.letter}
|
||||
className={`${PREFIX}__indexes-bar-item`}
|
||||
style={{ height: indexItemHeight }}
|
||||
onClick={() => handleClickAnchor(item.letter)}
|
||||
>
|
||||
{item.letter}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
89
src/components/user-batch-publish/index.less
Normal file
89
src/components/user-batch-publish/index.less
Normal file
@ -0,0 +1,89 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.user-batch-publish {
|
||||
padding: 16px 24px;
|
||||
|
||||
&__header-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
margin-top: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
height: 100px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__cost-describe {
|
||||
height: 100px;
|
||||
padding: 0 32px;
|
||||
border-radius: 16px;
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
margin-top: 24px;
|
||||
|
||||
&__price {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
|
||||
&__original_price {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
line-height: 34px;
|
||||
font-weight: 400;
|
||||
color: @blColorG1;
|
||||
margin-left: 16px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
&__illustrate {
|
||||
padding: 24px 32px;
|
||||
margin-top: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
&__describe {
|
||||
.flex-row();
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
margin-top: 8px;
|
||||
|
||||
&__view {
|
||||
color: @blHighlightColor;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-button {
|
||||
.button(@width: 100%; @height: 80px; @fontSize: 32px);
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
195
src/components/user-batch-publish/index.tsx
Normal file
195
src/components/user-batch-publish/index.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
import { Button, Image, Text } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Cell } from '@taroify/core';
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
|
||||
import PageLoading from '@/components/page-loading';
|
||||
import { PublishJobQrCodeDialog } from '@/components/product-dialog/publish-job';
|
||||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||||
import { ISelectOption, PopupSelect } from '@/components/select';
|
||||
import { PageUrl } from '@/constants/app';
|
||||
import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
|
||||
import { BatchPublishGroup } from '@/types/group';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import {
|
||||
getOrderPrice,
|
||||
isCancelPay,
|
||||
requestAllBuyProduct,
|
||||
requestCreatePayInfo,
|
||||
requestOrderInfo,
|
||||
requestPayment,
|
||||
} from '@/utils/product';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import Toast from '@/utils/toast';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface CityValue extends BatchPublishGroup {
|
||||
cityName: string;
|
||||
}
|
||||
|
||||
interface CityOption extends ISelectOption<CityValue> {
|
||||
value: CityValue;
|
||||
}
|
||||
|
||||
const PREFIX = 'user-batch-publish';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const SERVICE_ILLUSTRATE = `群发次数:每日一次,连发3天
|
||||
群发内容:仅限主播招聘通告,违规内容不发
|
||||
联系方法:通告中留通告主联系方式,主播直接联系`;
|
||||
const cityValues: CityValue[] = [
|
||||
{ cityCode: '440100', cityName: '广州', count: 300 },
|
||||
{ cityCode: '440300', cityName: '深圳', count: 100 },
|
||||
{ cityCode: '330100', cityName: '杭州', count: 300 },
|
||||
{ cityCode: '110100', cityName: '北京', count: 100 },
|
||||
{ cityCode: '510100', cityName: '成都', count: 50 },
|
||||
{ cityCode: '430100', cityName: '长沙', count: 50 },
|
||||
{ cityCode: '350200', cityName: '厦门', count: 50 },
|
||||
{ cityCode: '310100', cityName: '上海', count: 100 },
|
||||
{ cityCode: '420100', cityName: '武汉', count: 50 },
|
||||
{ cityCode: '610100', cityName: '西安', count: 50 },
|
||||
{ cityCode: '410100', cityName: '郑州', count: 100 },
|
||||
].sort((a, b) => b.count - a.count);
|
||||
const MIN_GROUP_SIZE = 20;
|
||||
const GROUP_OPTIONS = [
|
||||
{ value: MIN_GROUP_SIZE, productSpecId: ProductSpecId.GroupBatchPublish20, label: '20', price: 18 },
|
||||
{ value: 50, productSpecId: ProductSpecId.GroupBatchPublish50, label: '50', price: 40 },
|
||||
{ value: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
|
||||
{ value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
|
||||
{ value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 188 },
|
||||
{ value: 1000, productSpecId: ProductSpecId.GroupBatchPublish1000, label: '1000', price: 288 },
|
||||
];
|
||||
|
||||
const calcPrice = (city: CityValue | null) => {
|
||||
if (!city) {
|
||||
return {};
|
||||
}
|
||||
const { count } = city;
|
||||
const originalPrice = count * 1;
|
||||
const price = GROUP_OPTIONS.find(o => o.value === count)?.price || 18;
|
||||
const productSpecId = GROUP_OPTIONS.find(o => o.value === count)?.productSpecId || ProductSpecId.GroupBatchPublish20;
|
||||
return { price, originalPrice, productSpecId };
|
||||
};
|
||||
|
||||
export default function UserBatchPublish() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showCitySelect, setShowCitySelect] = useState(false);
|
||||
const [showQrCode, setShowQrCode] = useState(false);
|
||||
const [city, setCity] = useState<CityOption['value'] | null>(null);
|
||||
const [cityOptions, setCityOptions] = useState<CityOption[]>([]);
|
||||
const { price, originalPrice, productSpecId } = calcPrice(city);
|
||||
|
||||
const handleClickCity = useCallback(() => setShowCitySelect(true), []);
|
||||
|
||||
const handleSelectCity = useCallback(value => {
|
||||
setCity(value);
|
||||
setShowCitySelect(false);
|
||||
}, []);
|
||||
|
||||
const handleClickViewGroup = useCallback(() => navigateTo(PageUrl.GroupList, { city: city?.cityCode }), [city]);
|
||||
|
||||
const handleClickBuy = useCallback(async () => {
|
||||
// if (1 < 2) {
|
||||
// await new Promise(r => setTimeout(r, 3000));
|
||||
// setShowQrCode(true);
|
||||
// return;
|
||||
// }
|
||||
if (!price || !productSpecId) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
Taro.showLoading();
|
||||
const allowBuy = await requestAllBuyProduct(ProductType.GroupBatchPublish);
|
||||
if (!allowBuy) {
|
||||
Taro.hideLoading();
|
||||
Toast.info('您最近已购买过,可直接联系客服');
|
||||
setShowQrCode(true);
|
||||
return;
|
||||
}
|
||||
const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
|
||||
type: OrderType.GroupBatchPublish,
|
||||
amt: getOrderPrice(price),
|
||||
// amt: 1,
|
||||
productCode: ProductType.GroupBatchPublish,
|
||||
productSpecId: productSpecId,
|
||||
});
|
||||
log('handleBuy payInfo', payOrderNo, createPayInfo);
|
||||
await requestPayment({
|
||||
timeStamp: createPayInfo.timeStamp,
|
||||
nonceStr: createPayInfo.nonceStr,
|
||||
package: createPayInfo.packageVal,
|
||||
signType: createPayInfo.signType,
|
||||
paySign: createPayInfo.paySign,
|
||||
});
|
||||
const { status } = await requestOrderInfo({ payOrderNo });
|
||||
log('handleBuy orderInfo', status);
|
||||
if (status !== OrderStatus.Success) {
|
||||
throw new Error('order status error');
|
||||
}
|
||||
Taro.hideLoading();
|
||||
setShowQrCode(true);
|
||||
} catch (e) {
|
||||
Taro.hideLoading();
|
||||
Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
|
||||
log('handleBuy error', e);
|
||||
}
|
||||
}, [price, productSpecId]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const cOptions: CityOption[] = cityValues.map(value => ({ value, label: value.cityName }));
|
||||
const initCity = cOptions[0].value;
|
||||
|
||||
setLoading(false);
|
||||
setCity(initCity);
|
||||
setCityOptions(cOptions);
|
||||
log('init data done', cOptions);
|
||||
} catch (e) {
|
||||
Toast.error('加载失败请重试');
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <PageLoading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<Image mode="widthFix" className={`${PREFIX}__header-image`} src="https://neighbourhood.cn/pubJob.png" />
|
||||
<div className={`${PREFIX}__title`}>请选择城市</div>
|
||||
<Cell isLink align="center" className={`${PREFIX}__cell`} title={city?.cityName} onClick={handleClickCity} />
|
||||
<div className={`${PREFIX}__title`}>可购买群数</div>
|
||||
<Cell align="center" className={`${PREFIX}__cell`} title={city?.count} />
|
||||
<div className={`${PREFIX}__title`}>服务费用</div>
|
||||
<div className={`${PREFIX}__cost-describe`}>
|
||||
<div className={`${PREFIX}__cost-describe__price`}>{`${price}元`}</div>
|
||||
<div className={`${PREFIX}__cost-describe__original_price`}>{`原价:${originalPrice}元`}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__title`}>服务说明</div>
|
||||
<div className={`${PREFIX}__illustrate`}>
|
||||
<Text>{SERVICE_ILLUSTRATE}</Text>
|
||||
<div className={`${PREFIX}__illustrate__describe`}>
|
||||
<div>附:</div>
|
||||
<div className={`${PREFIX}__illustrate__describe__view`} onClick={handleClickViewGroup}>
|
||||
播络合作群列表
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className={`${PREFIX}__buy-button`} onClick={handleClickBuy}>
|
||||
立即购买
|
||||
</Button>
|
||||
<SafeBottomPadding />
|
||||
<div>
|
||||
<PopupSelect
|
||||
value={city}
|
||||
options={cityOptions}
|
||||
open={showCitySelect}
|
||||
onSelect={handleSelectCity}
|
||||
onClose={() => setShowCitySelect(false)}
|
||||
/>
|
||||
<PublishJobQrCodeDialog onClose={() => setShowQrCode(false)} open={showQrCode} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -5859,3 +5859,151 @@ export const CITY_INDEXES_LIST = [
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const GROUP_CITY_INDEXES_LIST = [
|
||||
{
|
||||
letter: 'C',
|
||||
data: [
|
||||
{
|
||||
cityCode: '500100',
|
||||
cityName: '重庆',
|
||||
keyword: 'CHONGQING重庆',
|
||||
},
|
||||
{
|
||||
cityCode: '510100',
|
||||
cityName: '成都',
|
||||
keyword: 'CHENGDOU成都',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'D',
|
||||
data: [
|
||||
{
|
||||
cityCode: '441900',
|
||||
cityName: '东莞',
|
||||
keyword: 'DONGGUAN东莞',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'F',
|
||||
data: [
|
||||
{
|
||||
cityCode: '440600',
|
||||
cityName: '佛山',
|
||||
keyword: 'FUSHAN佛山',
|
||||
},
|
||||
{
|
||||
cityCode: '350100',
|
||||
cityName: '福州',
|
||||
keyword: 'FUZHOU福州',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'G',
|
||||
data: [
|
||||
{
|
||||
cityCode: '440100',
|
||||
cityName: '广州',
|
||||
keyword: 'GUANGZHOU广州',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'H',
|
||||
data: [
|
||||
{
|
||||
cityCode: '340100',
|
||||
cityName: '合肥',
|
||||
keyword: 'HEFEI合肥',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'N',
|
||||
data: [
|
||||
{
|
||||
cityCode: '320100',
|
||||
cityName: '南京',
|
||||
keyword: 'NANJING南京',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'Q',
|
||||
data: [
|
||||
{
|
||||
cityCode: '370200',
|
||||
cityName: '青岛',
|
||||
keyword: 'QINGDAO青岛',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'S',
|
||||
data: [
|
||||
{
|
||||
cityCode: '310100',
|
||||
cityName: '上海',
|
||||
keyword: 'SHANGHAI上海',
|
||||
},
|
||||
{
|
||||
cityCode: '440300',
|
||||
cityName: '深圳',
|
||||
keyword: 'SHENZHEN深圳',
|
||||
},
|
||||
{
|
||||
cityCode: '320500',
|
||||
cityName: '苏州',
|
||||
keyword: 'SUZHOU苏州',
|
||||
},
|
||||
{
|
||||
cityCode: '330300',
|
||||
cityName: '温州',
|
||||
keyword: 'WENZHOU温州',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'T',
|
||||
data: [
|
||||
{
|
||||
cityCode: '120100',
|
||||
cityName: '天津',
|
||||
keyword: 'TIANJIN天津',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'W',
|
||||
data: [
|
||||
{
|
||||
cityCode: '420100',
|
||||
cityName: '武汉',
|
||||
keyword: 'WUHAN武汉',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'X',
|
||||
data: [
|
||||
{
|
||||
cityCode: '610100',
|
||||
cityName: '西安',
|
||||
keyword: 'XIAN西安',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
letter: 'Z',
|
||||
data: [
|
||||
{
|
||||
cityCode: '410100',
|
||||
cityName: '郑州',
|
||||
keyword: 'ZHENGZHOU郑州',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
@ -1,3 +1,5 @@
|
||||
import { GroupItem } from '@/types/group';
|
||||
|
||||
export enum GroupType {
|
||||
// 所有可加入的群
|
||||
All = 'ALL',
|
||||
@ -29,3 +31,30 @@ export const GROUP_STATUS_OPTIONS = [
|
||||
{ label: '全部', value: GroupStatus.All },
|
||||
{ label: '已申请', value: GroupStatus.Requested },
|
||||
];
|
||||
|
||||
export const GROUPS: GroupItem[] = [
|
||||
{ title: '【杭州】', cityCode: 330100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
|
||||
{ title: '【广州】', cityCode: 440100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
|
||||
{ title: '【深圳】', cityCode: 440300, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
|
||||
{ title: '【北京】', cityCode: 110100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
|
||||
{ title: '【上海】', cityCode: 310100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
|
||||
{ title: '【郑州】', cityCode: 410100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
|
||||
{ title: '【长沙】', cityCode: 430100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
|
||||
{ title: '【成都】', cityCode: 510100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
|
||||
{ title: '【重庆】', cityCode: 500100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
|
||||
{ title: '【武汉】', cityCode: 420100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
|
||||
{ title: '【厦门】', cityCode: 350200, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
|
||||
{ title: '【西安】', cityCode: 610100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
|
||||
{ title: '【合肥】', cityCode: 340100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
|
||||
{ title: '【南京】', cityCode: 320100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
|
||||
{ title: '【青岛】', cityCode: 370200, serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
||||
{ title: '【佛山】', cityCode: 440600, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
|
||||
{ title: '【东莞】', cityCode: 441900, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
|
||||
{ title: '【苏州】', cityCode: 320500, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
|
||||
{ title: '【福州】', cityCode: 350100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
|
||||
{ title: '【泉州】', cityCode: 350500, serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
|
||||
{ title: '【温州】', cityCode: 330300, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
|
||||
{ title: '【天津】', cityCode: 120100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
|
||||
{ title: '【昆明】', cityCode: 530100, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
|
||||
{ title: '【全国】', cityCode: 440300, serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
|
||||
];
|
||||
|
@ -1,21 +1,54 @@
|
||||
export enum ProfitType {
|
||||
Anchor = '1',
|
||||
Member = '2',
|
||||
Partner = '3',
|
||||
}
|
||||
export enum ProfitStatus {
|
||||
AVAILABLE = '1',
|
||||
WITHDRAWING = '2',
|
||||
WITHDRAW = '3',
|
||||
/**
|
||||
* 待处理/待计算 (例如,等待上游数据或条件满足)
|
||||
*/
|
||||
PENDING_CALCULATION = 'PENDING_CALCULATION',
|
||||
|
||||
/**
|
||||
* 待直接结算/待直接分账 (例如,T+7 到账)
|
||||
* 这种类型的佣金会计入银行账户,而非平台余额
|
||||
*/
|
||||
DIRECT_SETTLEMENT_PENDING = 'DIRECT_SETTLEMENT_PENDING',
|
||||
|
||||
/**
|
||||
* 直接结算已完成/直接分账已完成
|
||||
*/
|
||||
DIRECT_SETTLEMENT_PROCESSING = 'DIRECT_SETTLEMENT_PROCESSING',
|
||||
|
||||
/**
|
||||
* 间接收益已结算到合伙人余额 (例如,主播推荐奖金进入可提现余额)
|
||||
*/
|
||||
INDIRECT_SETTLED_TO_BALANCE = 'INDIRECT_SETTLED_TO_BALANCE',
|
||||
|
||||
/**
|
||||
* 佣金已取消 (例如,订单退款,不满足条件等)
|
||||
*/
|
||||
CANCELLED = 'CANCELLED',
|
||||
|
||||
/**
|
||||
* 佣金处理失败
|
||||
*/
|
||||
FAILED = 'FAILED',
|
||||
|
||||
/**
|
||||
* 其他状态
|
||||
*/
|
||||
OTHER = 'OTHER',
|
||||
|
||||
/**
|
||||
* 已完成
|
||||
*/
|
||||
FINISHED = 'FINISHED',
|
||||
}
|
||||
|
||||
export const PROFIT_TYPE_MAP = {
|
||||
[ProfitType.Anchor]: '主播被开聊',
|
||||
[ProfitType.Member]: '会员支付',
|
||||
[ProfitType.Partner]: '合伙人收益分成',
|
||||
};
|
||||
export const PROFIT_STATUS_MAP = {
|
||||
[ProfitStatus.AVAILABLE]: '可提现',
|
||||
[ProfitStatus.WITHDRAWING]: '提现中',
|
||||
[ProfitStatus.WITHDRAW]: '已提现',
|
||||
// 如果需要为每个枚举值添加描述,可以使用一个单独的映射对象
|
||||
export const ProfitStatusDescriptions = {
|
||||
PENDING_CALCULATION: '',
|
||||
DIRECT_SETTLEMENT_PENDING: '待分账',
|
||||
DIRECT_SETTLEMENT_PROCESSING: '',
|
||||
INDIRECT_SETTLED_TO_BALANCE: '',
|
||||
CANCELLED: '',
|
||||
FAILED: '',
|
||||
OTHER: '',
|
||||
FINISHED: '已分账',
|
||||
};
|
||||
|
@ -12,8 +12,8 @@ import { EmployType, EMPLOY_TYPE_TITLE_MAP, FULL_PRICE_OPTIONS, PART_PRICE_OPTIO
|
||||
import { SalaryRange } from '@/types/job';
|
||||
import { MaterialProfile } from '@/types/material';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { isFullTimePriceRequired, isPartTimePriceRequired } from '@/utils/job'
|
||||
import { getCurrentCity } from '@/utils/location';
|
||||
import { isFullTimePriceRequired, isPartTimePriceRequired } from '@/utils/job';
|
||||
import { getCurrentCityCode } from '@/utils/location';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
|
||||
import './index.less';
|
||||
@ -76,9 +76,9 @@ function ProfileIntentionFragment(props: IProps, ref) {
|
||||
);
|
||||
|
||||
const handleClickAddCity = useCallback(() => {
|
||||
const currentCity = getCurrentCity();
|
||||
const currentCityCode = getCurrentCityCode();
|
||||
realtimeLogger.info('handleClickAddCity', OpenSource.AddIndentCity);
|
||||
navigateTo(PageUrl.CitySearchProfile, { city: currentCity, source: OpenSource.AddIndentCity });
|
||||
navigateTo(PageUrl.CitySearchProfile, { city: currentCityCode, source: OpenSource.AddIndentCity });
|
||||
}, []);
|
||||
|
||||
const handleSelectCity = useCallback(
|
||||
@ -98,10 +98,10 @@ function ProfileIntentionFragment(props: IProps, ref) {
|
||||
const handleEmployTypeChange = useCallback((value: EmployType) => {
|
||||
setEmployType(value);
|
||||
if (value === EmployType.Full) {
|
||||
setPartSalary({ minSalary: 0, maxSalary: 0 })
|
||||
setPartSalary({ minSalary: 0, maxSalary: 0 });
|
||||
}
|
||||
if (value === EmployType.Part) {
|
||||
setFullSalary({ minSalary: 0, maxSalary: 0 })
|
||||
setFullSalary({ minSalary: 0, maxSalary: 0 });
|
||||
}
|
||||
}, []);
|
||||
|
||||
@ -173,24 +173,26 @@ function ProfileIntentionFragment(props: IProps, ref) {
|
||||
<BlFormRadio name={EmployType.All} text={EMPLOY_TYPE_TITLE_MAP[EmployType.All]} value={employType} />
|
||||
</BlFormRadioGroup>
|
||||
</BlFormItem>
|
||||
{isFullTimePriceRequired(employType) &&
|
||||
(<BlFormItem title="期望全职薪资">
|
||||
{isFullTimePriceRequired(employType) && (
|
||||
<BlFormItem title="期望全职薪资">
|
||||
<BlFormSelect
|
||||
title="期望全职薪资"
|
||||
value={fullSalary}
|
||||
options={FULL_PRICE_OPTIONS}
|
||||
onSelect={handleSelectFullSalary}
|
||||
/>
|
||||
</BlFormItem>)}
|
||||
{isPartTimePriceRequired(employType) &&
|
||||
(<BlFormItem title="期望兼职薪资">
|
||||
</BlFormItem>
|
||||
)}
|
||||
{isPartTimePriceRequired(employType) && (
|
||||
<BlFormItem title="期望兼职薪资">
|
||||
<BlFormSelect
|
||||
title="期望兼职薪资"
|
||||
value={partSalary}
|
||||
options={PART_PRICE_OPTIONS}
|
||||
onSelect={handleSelectPartSalary}
|
||||
/>
|
||||
</BlFormItem>)}
|
||||
</BlFormItem>
|
||||
)}
|
||||
<BlFormItem title="是否接受坐班">
|
||||
<BlFormRadioGroup direction="horizontal" value={acceptWorkForSit} onChange={handleAcceptSittingChange}>
|
||||
<BlFormRadio name text="接受" value={acceptWorkForSit} />
|
||||
|
@ -48,7 +48,7 @@ const CompanyTabs: TabItemType[] = [
|
||||
{
|
||||
type: PageType.BatchPublish,
|
||||
pagePath: PageUrl.UserBatchPublish,
|
||||
text: '群代发',
|
||||
text: '代招代发',
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
// export const DOMAIN = 'http://192.168.60.120:8082';
|
||||
// export const DOMAIN = 'http://192.168.60.148:8082';
|
||||
export const DOMAIN = 'https://neighbourhood.cn';
|
||||
export const BASE_URL = `${DOMAIN}/api`;
|
||||
|
||||
@ -80,6 +80,6 @@ export enum API {
|
||||
GET_INVITE_CODE = '/user/getUserInviteCode',
|
||||
GET_INVITE_LIST = '/user/inviteUsers',
|
||||
BECOME_PARTNER = '/user/becomePartner',
|
||||
GET_PROFIT_LIST = '/profit/profits',
|
||||
GET_PROFIT_LIST = '/user/profit/list',
|
||||
GET_PROFIT_STAT = '/user/profits',
|
||||
}
|
||||
|
@ -107,14 +107,14 @@ class Http {
|
||||
url: BASE_URL + url,
|
||||
data,
|
||||
method: method,
|
||||
header: { 'content-type': contentType /*, 'user-Id': '588002047871053824' */ },
|
||||
header: { 'content-type': contentType /*'user-Id': '588002047871053824' */ },
|
||||
};
|
||||
return this.request(option);
|
||||
};
|
||||
|
||||
async init() {
|
||||
async init(inviteCode?: string) {
|
||||
if (isTokenExpired()) {
|
||||
await refreshToken();
|
||||
await refreshToken(inviteCode);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { getRoleType } from '@/utils/app';
|
||||
import { getRoleTypeWithDefault } from '@/utils/app';
|
||||
import { isDev } from '@/utils/common';
|
||||
|
||||
import { getToken } from './utils';
|
||||
@ -20,7 +20,7 @@ const tokenInterceptor: Taro.interceptor = (chain: Taro.Chain) => {
|
||||
|
||||
const roleInterceptor: Taro.interceptor = (chain: Taro.Chain) => {
|
||||
const requestParams = chain.requestParams;
|
||||
const roleType = getRoleType();
|
||||
const roleType = getRoleTypeWithDefault();
|
||||
requestParams.header = {
|
||||
...requestParams.header,
|
||||
'role-type': roleType,
|
||||
|
@ -24,10 +24,10 @@ const clearToken = () => {
|
||||
Taro.setStorageSync(TOKEN_EXPIRES_TIME, 0);
|
||||
};
|
||||
|
||||
const requestToken = (): Promise<string> => {
|
||||
const requestToken = (inviteCode?: string): Promise<string> => {
|
||||
return getCode()
|
||||
.then(code => {
|
||||
return http.post<LoginResponse>(API.LOGIN, { data: { code } }).then(data => {
|
||||
return http.post<LoginResponse>(API.LOGIN, { data: { code, inviteCode } }).then(data => {
|
||||
const newToken = data?.token || '';
|
||||
const expires = data?.expires || 0;
|
||||
if (newToken) {
|
||||
@ -47,12 +47,12 @@ const requestToken = (): Promise<string> => {
|
||||
|
||||
export const isTokenExpired = () => (Taro.getStorageSync(TOKEN_EXPIRES_TIME) || 0) < Date.now();
|
||||
|
||||
export const refreshToken = () => {
|
||||
export const refreshToken = (inviteCode?: string) => {
|
||||
if (_fetchTokenPromise) {
|
||||
return _fetchTokenPromise;
|
||||
}
|
||||
clearToken();
|
||||
_fetchTokenPromise = requestToken();
|
||||
_fetchTokenPromise = requestToken(inviteCode);
|
||||
return _fetchTokenPromise;
|
||||
};
|
||||
|
||||
|
@ -27,8 +27,7 @@ import { logWithPrefix } from '@/utils/common';
|
||||
import { getLastSelectMyJobId, requestJobManageList, setLastSelectMyJobId } from '@/utils/job';
|
||||
import { getWxLocation } from '@/utils/location';
|
||||
import { requestUnreadMessageCount } from '@/utils/message';
|
||||
import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
|
||||
import { getPageQuery, navigateTo } from '@/utils/route';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import { getCommonShareMessage } from '@/utils/share';
|
||||
import Toast from '@/utils/toast';
|
||||
import './index.less';
|
||||
@ -165,9 +164,6 @@ export default function AnchorPage() {
|
||||
}, [location]);
|
||||
|
||||
useLoad(async () => {
|
||||
const query = getPageQuery();
|
||||
getInviteCodeFromQueryAndUpdate(query);
|
||||
|
||||
try {
|
||||
const { jobResults = [] } = await requestJobManageList({ status: JobManageStatus.Open });
|
||||
if (!jobResults.length) {
|
||||
|
@ -2,77 +2,7 @@
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.group-v2-page {
|
||||
padding: 24px;
|
||||
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
|
||||
&__left-line,
|
||||
&__right-line {
|
||||
width: 88px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&__left-line {
|
||||
background: linear-gradient(270deg, #CCCCCC -0.05%, rgba(204, 204, 204, 0) 99.95%);
|
||||
}
|
||||
|
||||
&__right-line {
|
||||
background: linear-gradient(90deg, #CCCCCC 0%, rgba(204, 204, 204, 0) 100%);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__group-card {
|
||||
.flex-row();
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
&__avatar {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 6px;
|
||||
border: 4px solid #D9D9D9;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
align-self: flex-start;
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
.button(@width: 176px; @height: 56px; @fontSize: 28px; @fontWeight: 500);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-padding {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
padding-bottom: 200px;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
@ -1,101 +1,40 @@
|
||||
import { Image } from '@tarojs/components';
|
||||
import { NodesRef, useLoad, useShareAppMessage } from '@tarojs/taro';
|
||||
import { useShareAppMessage } from '@tarojs/taro';
|
||||
|
||||
import { List } from '@taroify/core';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import HomePage from '@/components/home-page';
|
||||
import LoginButton from '@/components/login-button';
|
||||
import { APP_TAB_BAR_ID } from '@/constants/app';
|
||||
import SearchCity from '@/components/search-city';
|
||||
import { GROUPS } from '@/constants/group';
|
||||
import useInviteCode from '@/hooks/use-invite-code';
|
||||
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
|
||||
import { openCustomerServiceChat } from '@/utils/common';
|
||||
import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
|
||||
import { getPageQuery } from '@/utils/route';
|
||||
import { getCurrentCityCode } from '@/utils/location';
|
||||
import { getCommonShareMessage } from '@/utils/share';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface GroupItem {
|
||||
title: string;
|
||||
serviceUrl: string;
|
||||
}
|
||||
|
||||
const PREFIX = 'group-v2-page';
|
||||
const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
|
||||
const CALC_LIST_PROPS: IUseListHeightProps = {
|
||||
selectors: [`.${LIST_CONTAINER_CLASS}`, `#${APP_TAB_BAR_ID}`],
|
||||
calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
|
||||
const [rect, diffRect] = rects;
|
||||
return diffRect.top - rect.top;
|
||||
},
|
||||
};
|
||||
const GROUPS: GroupItem[] = [
|
||||
{ title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
|
||||
{ title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
|
||||
{ title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
|
||||
{ title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
|
||||
{ title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
|
||||
{ title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
|
||||
{ title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
|
||||
{ title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
|
||||
{ title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
|
||||
{ title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
|
||||
{ title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
|
||||
{ title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
|
||||
{ title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
|
||||
{ title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
|
||||
{ title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
||||
{ title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
|
||||
{ title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
|
||||
{ title: '【苏州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
|
||||
{ title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
|
||||
{ title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
|
||||
{ title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
|
||||
{ title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
|
||||
{ title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
|
||||
{ title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
|
||||
];
|
||||
|
||||
export default function GroupV2() {
|
||||
const listHeight = useListHeight(CALC_LIST_PROPS);
|
||||
const inviteCode = useInviteCode();
|
||||
|
||||
const handleClick = useCallback((group: GroupItem) => openCustomerServiceChat(group.serviceUrl), []);
|
||||
|
||||
useLoad(() => {
|
||||
const query = getPageQuery();
|
||||
getInviteCodeFromQueryAndUpdate(query);
|
||||
});
|
||||
|
||||
useShareAppMessage(() => getCommonShareMessage(true, inviteCode));
|
||||
|
||||
const handleSelectCity = useCallback(cityCode => {
|
||||
const group = GROUPS.find(g => String(g.cityCode) === cityCode);
|
||||
if (group) {
|
||||
openCustomerServiceChat(group.serviceUrl);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<HomePage>
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__header`}>
|
||||
<div className={`${PREFIX}__header__left-line`} />
|
||||
<div className={`${PREFIX}__header__title`}>进本地通告群,高薪通告早知道</div>
|
||||
<div className={`${PREFIX}__header__right-line`} />
|
||||
</div>
|
||||
<div className={LIST_CONTAINER_CLASS}>
|
||||
<List style={{ height: `${listHeight}px` }} disabled fixedHeight>
|
||||
{GROUPS.map(group => (
|
||||
<div className={`${PREFIX}__group-card`} key={group.serviceUrl}>
|
||||
<Image
|
||||
mode="aspectFit"
|
||||
className={`${PREFIX}__group-card__avatar`}
|
||||
src="https://neighbourhood.cn/addGroup.jpg"
|
||||
/>
|
||||
<div className={`${PREFIX}__group-card__title`}>{group.title}</div>
|
||||
<LoginButton className={`${PREFIX}__group-card__button`} onClick={() => handleClick(group)}>
|
||||
我要进群
|
||||
</LoginButton>
|
||||
</div>
|
||||
))}
|
||||
<div className={`${PREFIX}__bottom-padding`} />
|
||||
</List>
|
||||
</div>
|
||||
<SearchCity
|
||||
onSelectCity={handleSelectCity}
|
||||
currentCity={getCurrentCityCode()}
|
||||
forGroup
|
||||
offset={72}
|
||||
banner="点击城市加入本地通告群,高薪工作早知道"
|
||||
/>
|
||||
</div>
|
||||
</HomePage>
|
||||
);
|
||||
|
@ -28,7 +28,6 @@ import { getJobTitle, getJobSalary, postPublishJob, requestJobDetail } from '@/u
|
||||
import { calcDistance, isValidLocation } from '@/utils/location';
|
||||
import { requestProfileDetail } from '@/utils/material';
|
||||
import { isChatWithSelf, postCreateChat } from '@/utils/message';
|
||||
import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
|
||||
import { getJumpUrl, getPageQuery, navigateTo } from '@/utils/route';
|
||||
import { getCommonShareMessage } from '@/utils/share';
|
||||
import { formatDate } from '@/utils/time';
|
||||
@ -219,8 +218,7 @@ export default function JobDetail() {
|
||||
}, []);
|
||||
|
||||
useLoad(async () => {
|
||||
const query = getPageQuery<Pick<JobDetails, 'id'> & { c: string }>();
|
||||
getInviteCodeFromQueryAndUpdate(query);
|
||||
const query = getPageQuery<Pick<JobDetails, 'id'>>();
|
||||
const jobId = query?.id;
|
||||
if (!jobId) {
|
||||
return;
|
||||
|
@ -17,7 +17,6 @@ import { Coordinate } from '@/types/location';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { getWxLocation, isNotNeedAuthorizeLocation, requestLocation } from '@/utils/location';
|
||||
import { requestUnreadMessageCount } from '@/utils/message';
|
||||
import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
|
||||
import { getJumpUrl, getPageQuery, navigateTo } from '@/utils/route';
|
||||
import { getCommonShareMessage } from '@/utils/share';
|
||||
import Toast from '@/utils/toast';
|
||||
@ -109,7 +108,6 @@ export default function Job() {
|
||||
if (type === SortType.CREATE_TIME) {
|
||||
setSortType(type);
|
||||
}
|
||||
getInviteCodeFromQueryAndUpdate(query);
|
||||
if (await isNotNeedAuthorizeLocation()) {
|
||||
log('not need authorize location');
|
||||
requestLocation();
|
||||
|
@ -21,7 +21,6 @@ import { collectEvent } from '@/utils/event';
|
||||
import { requestHasPublishedJob, requestJobDetail } from '@/utils/job';
|
||||
import { getMaterialShareMessage, requestReadProfile, requestShareProfile } from '@/utils/material';
|
||||
import { isChatWithSelf, postCreateChat } from '@/utils/message';
|
||||
import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
|
||||
import { getPageQuery, navigateBack, navigateTo, redirectTo } from '@/utils/route';
|
||||
import Toast from '@/utils/toast';
|
||||
import './index.less';
|
||||
@ -142,7 +141,6 @@ export default function MaterialViewPage() {
|
||||
|
||||
useLoad(async () => {
|
||||
const context = getPageQuery<IViewContext | IShareContext>();
|
||||
getInviteCodeFromQueryAndUpdate(context as BL.Anything);
|
||||
try {
|
||||
const profileDetail = await requestProfile(context);
|
||||
setProfile(profileDetail);
|
||||
|
@ -1,123 +1,4 @@
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.search-city-profile {
|
||||
background: #FFF;
|
||||
|
||||
&__position-title {
|
||||
font-size: 24px;
|
||||
color: @blColorG1;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__position-city {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: @blColor;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-title {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: #999;
|
||||
background: #f2f5f7;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
width: 630px;
|
||||
padding: 12px 90px 26px 30px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
&__hot-city-item {
|
||||
width: 140px;
|
||||
height: 58px;
|
||||
font-size: 28px;
|
||||
line-height: 58px;
|
||||
text-align: center;
|
||||
border-radius: 58px;
|
||||
border: 2px solid @blColorG1;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__indexes-list {
|
||||
width: 100%;
|
||||
/* 兼容 iOS < 11.2 */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS >= 11.2 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
&__indexes-fragment {}
|
||||
|
||||
&__indexes-anchor {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: @blColorG1;
|
||||
background: #f2f5f7;
|
||||
}
|
||||
|
||||
&__indexes-cell {
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
padding: 30px 24px;
|
||||
color: @blColor;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__indexes-bar {
|
||||
width: 44rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&__indexes-bar-item {
|
||||
font-size: 22px;
|
||||
color: @blColor;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__indexes-index-alert {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -80px;
|
||||
margin-top: -80px;
|
||||
border-radius: 80px;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
font-size: 70px;
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
@ -1,130 +1,29 @@
|
||||
import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
|
||||
import Taro, { useLoad } from '@tarojs/taro';
|
||||
|
||||
import { Search } from '@taroify/core';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
|
||||
import SearchCity from '@/components/search-city';
|
||||
import { EventName, OpenSource } from '@/constants/app';
|
||||
import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST } from '@/constants/city';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { getPageQuery, navigateBack } from '@/utils/route';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface Item {
|
||||
cityCode: number | string;
|
||||
cityName: string;
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
const PREFIX = 'search-city-profile';
|
||||
const HOT_CITY = [
|
||||
{ cityCode: 110100, cityName: '北京' },
|
||||
{ cityCode: 310100, cityName: '上海' },
|
||||
{ cityCode: 440100, cityName: '广州' },
|
||||
{ cityCode: 440300, cityName: '深圳' },
|
||||
{ cityCode: 330100, cityName: '杭州' },
|
||||
{ cityCode: 430100, cityName: '长沙' },
|
||||
{ cityCode: 420100, cityName: '武汉' },
|
||||
{ cityCode: 350200, cityName: '厦门' },
|
||||
{ cityCode: 610100, cityName: '西安' },
|
||||
{ cityCode: 410100, cityName: '郑州' },
|
||||
{ cityCode: 510100, cityName: '成都' },
|
||||
{ cityCode: 340100, cityName: '合肥' },
|
||||
];
|
||||
const OFFSET_INDEX_SIZE = 2;
|
||||
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const realtimeLogger = Taro.getRealtimeLogManager();
|
||||
realtimeLogger.tag(PREFIX);
|
||||
const useHeight = () => {
|
||||
const [winHeight, setWinHeight] = useState(0);
|
||||
const [indexItemHeight, setIndexItemHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const windowInfo = Taro.getWindowInfo();
|
||||
const windowHeight = windowInfo.windowHeight;
|
||||
setWinHeight(windowHeight);
|
||||
// 上下预留两个选项高度的空白
|
||||
setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
|
||||
}, []);
|
||||
|
||||
return [winHeight, indexItemHeight];
|
||||
};
|
||||
|
||||
export default function SearchCity() {
|
||||
const [winHeight, indexItemHeight] = useHeight();
|
||||
export default function SearchCityProfilePage() {
|
||||
const [currentCity, setCurrentCity] = useState<string>('');
|
||||
const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
|
||||
const [touchMoving, setTouchMoving] = useState(false);
|
||||
const [searchResult, setSearchResult] = useState<Item[]>([]);
|
||||
const openSourceRef = useRef<OpenSource>(OpenSource.None);
|
||||
const showSearchList = searchResult.length > 0;
|
||||
|
||||
const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||||
const value = event.detail.value;
|
||||
log('handleSearchChange', value);
|
||||
if (!value) {
|
||||
setSearchResult([]);
|
||||
return;
|
||||
}
|
||||
const result: Item[] = [];
|
||||
CITY_INDEXES_LIST.forEach(obj => {
|
||||
obj.data.forEach(city => {
|
||||
if (city.keyword.includes(value.toLocaleUpperCase())) {
|
||||
result.push({ ...city });
|
||||
}
|
||||
});
|
||||
});
|
||||
setSearchResult(result);
|
||||
}, []);
|
||||
|
||||
const handleSelectCity = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const cityCode = e.currentTarget.dataset.code;
|
||||
const handleSelectCity = useCallback(cityCode => {
|
||||
realtimeLogger.info('handleSelectCity openSource', openSourceRef.current);
|
||||
Taro.eventCenter.trigger(EventName.SELECT_CITY, { openSource: openSourceRef.current, cityCode: String(cityCode) });
|
||||
navigateBack(1);
|
||||
}, []);
|
||||
|
||||
const handleTouchStart = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_INDEXES_LIST[index];
|
||||
if (item) {
|
||||
setTouchMoving(true);
|
||||
setTouchAnchor(item.letter);
|
||||
}
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchMove = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_INDEXES_LIST[index];
|
||||
item && setTouchAnchor(item.letter);
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation();
|
||||
setTouchMoving(false);
|
||||
log('touch end');
|
||||
}, []);
|
||||
|
||||
const handleClickAnchor = useCallback((anchor: string) => {
|
||||
setTouchAnchor(anchor);
|
||||
log('click anchor', anchor);
|
||||
}, []);
|
||||
|
||||
useLoad(() => {
|
||||
const query = getPageQuery<{ city: string; source: OpenSource }>();
|
||||
log('query', query);
|
||||
@ -139,94 +38,7 @@ export default function SearchCity() {
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<ScrollView scrollY style={{ height: winHeight }} scrollIntoView={touchAnchor}>
|
||||
<Search
|
||||
className={`${PREFIX}__search`}
|
||||
placeholder="输入城市名称"
|
||||
shape="rounded"
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
{showSearchList && (
|
||||
<div className={`${PREFIX}__search-list`}>
|
||||
{searchResult.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!showSearchList && (
|
||||
<div>
|
||||
<div className={`${PREFIX}__position-title`}>当前城市</div>
|
||||
<div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
|
||||
<div className={`${PREFIX}__hot-city-title`}>热门城市</div>
|
||||
<div className={`${PREFIX}__hot-city-container`}>
|
||||
{HOT_CITY.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__hot-city-item`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`${PREFIX}__indexes-list`}>
|
||||
{CITY_INDEXES_LIST.map(item => {
|
||||
return (
|
||||
<div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
|
||||
<div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
|
||||
{item.letter}
|
||||
</div>
|
||||
{item.data.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ScrollView>
|
||||
<div>
|
||||
{!showSearchList && (
|
||||
<div
|
||||
className={`${PREFIX}__indexes-bar`}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onTouchCancel={handleTouchEnd}
|
||||
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE }}
|
||||
>
|
||||
{CITY_INDEXES_LIST.map(item => {
|
||||
return (
|
||||
<div
|
||||
key={item.letter}
|
||||
className={`${PREFIX}__indexes-bar-item`}
|
||||
style={{ height: indexItemHeight }}
|
||||
onClick={() => handleClickAnchor(item.letter)}
|
||||
>
|
||||
{item.letter}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
|
||||
</div>
|
||||
<SearchCity onSelectCity={handleSelectCity} currentCity={currentCity} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,123 +1,4 @@
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.search-city {
|
||||
background: #FFF;
|
||||
|
||||
&__position-title {
|
||||
font-size: 24px;
|
||||
color: @blColorG1;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__position-city {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: @blColor;
|
||||
padding: 0 24px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-title {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: #999;
|
||||
background: #f2f5f7;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__hot-city-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
width: 630px;
|
||||
padding: 12px 90px 26px 30px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
&__hot-city-item {
|
||||
width: 140px;
|
||||
height: 58px;
|
||||
font-size: 28px;
|
||||
line-height: 58px;
|
||||
text-align: center;
|
||||
border-radius: 58px;
|
||||
border: 2px solid @blColorG1;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
&__indexes-list {
|
||||
width: 100%;
|
||||
/* 兼容 iOS < 11.2 */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS >= 11.2 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
&__indexes-fragment {}
|
||||
|
||||
&__indexes-anchor {
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
padding: 0 24px;
|
||||
color: @blColorG1;
|
||||
background: #f2f5f7;
|
||||
}
|
||||
|
||||
&__indexes-cell {
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
padding: 30px 24px;
|
||||
color: @blColor;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__indexes-bar {
|
||||
width: 44rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&__indexes-bar-item {
|
||||
font-size: 22px;
|
||||
color: @blColor;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__indexes-index-alert {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -80px;
|
||||
margin-top: -80px;
|
||||
border-radius: 80px;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
font-size: 70px;
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.page.search-city {
|
||||
}
|
||||
|
@ -1,129 +1,29 @@
|
||||
import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
|
||||
import Taro, { useLoad } from '@tarojs/taro';
|
||||
|
||||
import { Search } from '@taroify/core';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
|
||||
import SearchCity from '@/components/search-city';
|
||||
import { EventName, OpenSource } from '@/constants/app';
|
||||
import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST } from '@/constants/city';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { getPageQuery, navigateBack } from '@/utils/route';
|
||||
|
||||
import './index.less';
|
||||
|
||||
interface Item {
|
||||
cityCode: number | string;
|
||||
cityName: string;
|
||||
keyword: string;
|
||||
}
|
||||
const PREFIX = 'page-search-city';
|
||||
|
||||
const PREFIX = 'search-city';
|
||||
const HOT_CITY = [
|
||||
{ cityCode: 110100, cityName: '北京' },
|
||||
{ cityCode: 310100, cityName: '上海' },
|
||||
{ cityCode: 440100, cityName: '广州' },
|
||||
{ cityCode: 440300, cityName: '深圳' },
|
||||
{ cityCode: 330100, cityName: '杭州' },
|
||||
{ cityCode: 430100, cityName: '长沙' },
|
||||
{ cityCode: 420100, cityName: '武汉' },
|
||||
{ cityCode: 350200, cityName: '厦门' },
|
||||
{ cityCode: 610100, cityName: '西安' },
|
||||
{ cityCode: 410100, cityName: '郑州' },
|
||||
{ cityCode: 510100, cityName: '成都' },
|
||||
{ cityCode: 340100, cityName: '合肥' },
|
||||
];
|
||||
const OFFSET_INDEX_SIZE = 2;
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const realtimeLogger = Taro.getRealtimeLogManager();
|
||||
realtimeLogger.tag(PREFIX);
|
||||
const useHeight = () => {
|
||||
const [winHeight, setWinHeight] = useState(0);
|
||||
const [indexItemHeight, setIndexItemHeight] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const windowInfo = Taro.getWindowInfo();
|
||||
const windowHeight = windowInfo.windowHeight;
|
||||
setWinHeight(windowHeight);
|
||||
// 上下预留两个选项高度的空白
|
||||
setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
|
||||
}, []);
|
||||
|
||||
return [winHeight, indexItemHeight];
|
||||
};
|
||||
|
||||
export default function SearchCity() {
|
||||
const [winHeight, indexItemHeight] = useHeight();
|
||||
export default function SearchCityPage() {
|
||||
const [currentCity, setCurrentCity] = useState<string>('');
|
||||
const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
|
||||
const [touchMoving, setTouchMoving] = useState(false);
|
||||
const [searchResult, setSearchResult] = useState<Item[]>([]);
|
||||
const openSourceRef = useRef<OpenSource>(OpenSource.None);
|
||||
const showSearchList = searchResult.length > 0;
|
||||
|
||||
const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
|
||||
const value = event.detail.value;
|
||||
log('handleSearchChange', value);
|
||||
if (!value) {
|
||||
setSearchResult([]);
|
||||
return;
|
||||
}
|
||||
const result: Item[] = [];
|
||||
CITY_INDEXES_LIST.forEach(obj => {
|
||||
obj.data.forEach(city => {
|
||||
if (city.keyword.includes(value.toLocaleUpperCase())) {
|
||||
result.push({ ...city });
|
||||
}
|
||||
});
|
||||
});
|
||||
setSearchResult(result);
|
||||
}, []);
|
||||
|
||||
const handleSelectCity = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const cityCode = e.currentTarget.dataset.code;
|
||||
const handleSelectCity = useCallback(cityCode => {
|
||||
Taro.eventCenter.trigger(EventName.SELECT_CITY, { openSource: openSourceRef.current, cityCode: String(cityCode) });
|
||||
navigateBack(1);
|
||||
}, []);
|
||||
|
||||
const handleTouchStart = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_INDEXES_LIST[index];
|
||||
if (item) {
|
||||
setTouchMoving(true);
|
||||
setTouchAnchor(item.letter);
|
||||
}
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchMove = useCallback(
|
||||
(e: React.TouchEvent<HTMLDivElement>) => {
|
||||
const pageY = e.touches[0].pageY;
|
||||
const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
|
||||
if (index < 0 || index >= CITY_INDEXES_LIST.length) {
|
||||
return;
|
||||
}
|
||||
const item = CITY_INDEXES_LIST[index];
|
||||
item && setTouchAnchor(item.letter);
|
||||
},
|
||||
[indexItemHeight]
|
||||
);
|
||||
|
||||
const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation();
|
||||
setTouchMoving(false);
|
||||
log('touch end');
|
||||
}, []);
|
||||
|
||||
const handleClickAnchor = useCallback((anchor: string) => {
|
||||
setTouchAnchor(anchor);
|
||||
log('click anchor', anchor);
|
||||
}, []);
|
||||
|
||||
useLoad(() => {
|
||||
const query = getPageQuery<{ city: string; source: OpenSource }>();
|
||||
log('query', query);
|
||||
@ -138,94 +38,7 @@ export default function SearchCity() {
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<ScrollView scrollY style={{ height: winHeight }} scrollIntoView={touchAnchor}>
|
||||
<Search
|
||||
className={`${PREFIX}__search`}
|
||||
placeholder="输入城市名称"
|
||||
shape="rounded"
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
{showSearchList && (
|
||||
<div className={`${PREFIX}__search-list`}>
|
||||
{searchResult.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!showSearchList && (
|
||||
<div>
|
||||
<div className={`${PREFIX}__position-title`}>当前城市</div>
|
||||
<div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
|
||||
<div className={`${PREFIX}__hot-city-title`}>热门城市</div>
|
||||
<div className={`${PREFIX}__hot-city-container`}>
|
||||
{HOT_CITY.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__hot-city-item`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`${PREFIX}__indexes-list`}>
|
||||
{CITY_INDEXES_LIST.map(item => {
|
||||
return (
|
||||
<div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
|
||||
<div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
|
||||
{item.letter}
|
||||
</div>
|
||||
{item.data.map(city => (
|
||||
<div
|
||||
key={city.cityCode}
|
||||
className={`${PREFIX}__indexes-cell`}
|
||||
data-code={city.cityCode}
|
||||
onClick={handleSelectCity}
|
||||
>
|
||||
{city.cityName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ScrollView>
|
||||
<div>
|
||||
{!showSearchList && (
|
||||
<div
|
||||
className={`${PREFIX}__indexes-bar`}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onTouchCancel={handleTouchEnd}
|
||||
style={{ top: indexItemHeight * OFFSET_INDEX_SIZE }}
|
||||
>
|
||||
{CITY_INDEXES_LIST.map(item => {
|
||||
return (
|
||||
<div
|
||||
key={item.letter}
|
||||
className={`${PREFIX}__indexes-bar-item`}
|
||||
style={{ height: indexItemHeight }}
|
||||
onClick={() => handleClickAnchor(item.letter)}
|
||||
>
|
||||
{item.letter}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
|
||||
</div>
|
||||
<SearchCity onSelectCity={handleSelectCity} currentCity={currentCity} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,3 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
});
|
||||
|
@ -6,6 +6,12 @@
|
||||
height: 100vh;
|
||||
.flex-column();
|
||||
|
||||
&.color-bg {
|
||||
background: linear-gradient(180deg, #efecff 0%, #f7f5ff 100%);
|
||||
padding-top: 347px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__app {
|
||||
margin-top: 50%;
|
||||
}
|
||||
@ -22,4 +28,68 @@
|
||||
color: @blColorG2;
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__role-app {
|
||||
padding: 64px;
|
||||
}
|
||||
|
||||
&__greet {
|
||||
font-size: 28px;
|
||||
line-height: 56px;
|
||||
color: @blColorG1;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 57px;
|
||||
color: @blColor;
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
|
||||
&__card {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 56px 40px 56px;
|
||||
.flex-row();
|
||||
|
||||
& + & {
|
||||
margin-top: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-left: 34px;
|
||||
.flex-column();
|
||||
flex: 1;
|
||||
align-items: start;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
|
||||
color: @blColor;
|
||||
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.desc {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: @blColorG1;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
@ -1,23 +1,76 @@
|
||||
import { Image } from '@tarojs/components';
|
||||
import { useLoad } from '@tarojs/taro';
|
||||
|
||||
import { switchDefaultTab } from '@/utils/app';
|
||||
import { useLoad } from '@tarojs/taro';
|
||||
import Slogan from '@/components/slogan';
|
||||
import { PageUrl, RoleType } from '@/constants/app';
|
||||
import { ANCHOR_TAB_LIST, COMPANY_TAB_LIST } from '@/hooks/use-config';
|
||||
import store from '@/store';
|
||||
import { changeHomePage } from '@/store/actions';
|
||||
import { getRoleType, switchDefaultTab, switchRoleType } from '@/utils/app';
|
||||
import { switchTab } from '@/utils/route';
|
||||
|
||||
import './index.less';
|
||||
|
||||
const PREFIX = 'page-start';
|
||||
|
||||
export default function Start() {
|
||||
const mode = getRoleType();
|
||||
useLoad(() => {
|
||||
switchDefaultTab();
|
||||
});
|
||||
const handleAnchor = async () => {
|
||||
await switchRoleType(RoleType.Anchor);
|
||||
store.dispatch(changeHomePage(ANCHOR_TAB_LIST[0].type));
|
||||
await switchTab(ANCHOR_TAB_LIST[0].pagePath as PageUrl);
|
||||
};
|
||||
|
||||
const handleCompany = async () => {
|
||||
await switchRoleType(RoleType.Company);
|
||||
store.dispatch(changeHomePage(COMPANY_TAB_LIST[0].type));
|
||||
await switchTab(COMPANY_TAB_LIST[0].pagePath as PageUrl);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__app`}>
|
||||
<Image className={`${PREFIX}__icon`} mode="aspectFit" src={require('@/statics/svg/slogan.svg')} />
|
||||
<div className={`${PREFIX}__text`}>每天推荐海量高薪通告 </div>
|
||||
</div>
|
||||
<div className={`${PREFIX} ${mode ? '' : 'color-bg'}`}>
|
||||
{mode && (
|
||||
<div className={`${PREFIX}__app`}>
|
||||
<Image className={`${PREFIX}__icon`} mode="aspectFit" src={require('@/statics/svg/slogan.svg')} />
|
||||
<div className={`${PREFIX}__text`}>每天推荐海量高薪通告 </div>
|
||||
</div>
|
||||
)}
|
||||
{!mode && (
|
||||
<>
|
||||
<div className={`${PREFIX}__role-app`}>
|
||||
<div className={`${PREFIX}__greet`}>Hi,很高兴见到你</div>
|
||||
<div className={`${PREFIX}__title`}>请选择您的身份</div>
|
||||
<div className={`${PREFIX}__card`} onClick={handleAnchor}>
|
||||
<Image
|
||||
className={`${PREFIX}__avatar anchor`}
|
||||
src="https://publiccdn.neighbourhood.com.cn/img/avatar_f.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<div className={`${PREFIX}__content`}>
|
||||
<div className="title">我是主播</div>
|
||||
<div className="desc">我要找工作</div>
|
||||
</div>
|
||||
<Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
|
||||
</div>
|
||||
<div className={`${PREFIX}__card`} onClick={handleCompany}>
|
||||
<Image
|
||||
className={`${PREFIX}__avatar company`}
|
||||
src="https://publiccdn.neighbourhood.com.cn/img/avatar_m.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<div className={`${PREFIX}__content`}>
|
||||
<div className="title">我是企业</div>
|
||||
<div className="desc">我要招主播</div>
|
||||
</div>
|
||||
<Image src={require('@/statics/svg/arrow-right.svg')} mode="aspectFill" className={`${PREFIX}__arrow`} />
|
||||
</div>
|
||||
</div>
|
||||
<Slogan />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,90 +1,64 @@
|
||||
@import '@/styles/common.less';
|
||||
@import '@/styles/variables.less';
|
||||
|
||||
.page-user-batch-publish {
|
||||
padding: 24px;
|
||||
.page-biz-service {
|
||||
padding-bottom: 200px;
|
||||
|
||||
&__header-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
&__tabs {
|
||||
--tabs-active-color: @blHighlightColor;
|
||||
--tabs-nav-background-color: #fff;
|
||||
--tabs-wrap-height: 98px;
|
||||
|
||||
&__title {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 500;
|
||||
color: @blColor;
|
||||
margin-top: 24px;
|
||||
> .taroify-tabs__wrap {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
> .taroify-tabs__content {
|
||||
padding-top: var(--tabs-wrap-height);
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
height: 100px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__cost-describe {
|
||||
height: 100px;
|
||||
padding: 0 32px;
|
||||
border-radius: 16px;
|
||||
.flex-row();
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
margin-top: 24px;
|
||||
|
||||
&__price {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
&__recruitment {
|
||||
padding: 24px;
|
||||
&-card {
|
||||
background: #fff;
|
||||
padding: 32px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
&-h5 {
|
||||
font-weight: 500;
|
||||
color: @blHighlightColor;
|
||||
}
|
||||
|
||||
&__original_price {
|
||||
flex: 1;
|
||||
font-size: 32px;
|
||||
line-height: 34px;
|
||||
font-weight: 400;
|
||||
color: @blColorG1;
|
||||
margin-left: 16px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
line-height: 40px;
|
||||
color: #1d2129;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 40px;
|
||||
|
||||
&__illustrate {
|
||||
padding: 24px 32px;
|
||||
margin-top: 24px;
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
||||
&__describe {
|
||||
.flex-row();
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
color: @blColorG2;
|
||||
margin-top: 8px;
|
||||
|
||||
&__view {
|
||||
color: @blHighlightColor;
|
||||
margin-left: 4px;
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-button {
|
||||
.button(@width: 100%; @height: 80px; @fontSize: 32px);
|
||||
margin-top: 40px;
|
||||
&-body {
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
|
||||
& + & {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn-group {
|
||||
.flex-row();
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
.button(@height: 72px; @width: 384px; @fontSize: 28px; @fontWeight: 400; @borderRadius: 44px; @highlight: 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,197 +1,76 @@
|
||||
import { Button, Image, Text } from '@tarojs/components';
|
||||
import Taro, { useLoad } from '@tarojs/taro';
|
||||
import { useShareAppMessage } from '@tarojs/taro';
|
||||
|
||||
import { Cell } from '@taroify/core';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { Button, Tabs } from '@taroify/core';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import HomePage from '@/components/home-page';
|
||||
import PageLoading from '@/components/page-loading';
|
||||
import { PublishJobQrCodeDialog } from '@/components/product-dialog/publish-job';
|
||||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||||
import { ISelectOption, PopupSelect } from '@/components/select';
|
||||
import { PageUrl } from '@/constants/app';
|
||||
import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
|
||||
import { BatchPublishGroup } from '@/types/group';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import {
|
||||
getOrderPrice,
|
||||
isCancelPay,
|
||||
requestAllBuyProduct,
|
||||
requestCreatePayInfo,
|
||||
requestOrderInfo,
|
||||
requestPayment,
|
||||
} from '@/utils/product';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import Toast from '@/utils/toast';
|
||||
|
||||
import SearchCity from '@/components/search-city';
|
||||
import UserBatchPublish from '@/components/user-batch-publish';
|
||||
import { GROUPS } from '@/constants/group';
|
||||
import useInviteCode from '@/hooks/use-invite-code';
|
||||
import { openCustomerServiceChat } from '@/utils/common';
|
||||
import { getCurrentCityCode } from '@/utils/location';
|
||||
import { getCommonShareMessage } from '@/utils/share';
|
||||
import './index.less';
|
||||
|
||||
interface CityValue extends BatchPublishGroup {
|
||||
cityName: string;
|
||||
}
|
||||
const PREFIX = 'page-biz-service';
|
||||
|
||||
interface CityOption extends ISelectOption<CityValue> {
|
||||
value: CityValue;
|
||||
}
|
||||
export default function BizService() {
|
||||
const inviteCode = useInviteCode();
|
||||
|
||||
const PREFIX = 'page-user-batch-publish';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
const SERVICE_ILLUSTRATE = `群发次数:每日一次,连发3天
|
||||
群发内容:仅限主播招聘通告,违规内容不发
|
||||
联系方法:通告中留通告主联系方式,主播直接联系`;
|
||||
const cityValues: CityValue[] = [
|
||||
{ cityCode: '440100', cityName: '广州', count: 300 },
|
||||
{ cityCode: '440300', cityName: '深圳', count: 100 },
|
||||
{ cityCode: '330100', cityName: '杭州', count: 300 },
|
||||
{ cityCode: '110100', cityName: '北京', count: 100 },
|
||||
{ cityCode: '510100', cityName: '成都', count: 50 },
|
||||
{ cityCode: '430100', cityName: '长沙', count: 50 },
|
||||
{ cityCode: '350200', cityName: '厦门', count: 50 },
|
||||
{ cityCode: '310100', cityName: '上海', count: 100 },
|
||||
{ cityCode: '420100', cityName: '武汉', count: 50 },
|
||||
{ cityCode: '610100', cityName: '西安', count: 50 },
|
||||
{ cityCode: '410100', cityName: '郑州', count: 100 },
|
||||
].sort((a, b) => b.count - a.count);
|
||||
const MIN_GROUP_SIZE = 20;
|
||||
const GROUP_OPTIONS = [
|
||||
{ value: MIN_GROUP_SIZE, productSpecId: ProductSpecId.GroupBatchPublish20, label: '20', price: 18 },
|
||||
{ value: 50, productSpecId: ProductSpecId.GroupBatchPublish50, label: '50', price: 40 },
|
||||
{ value: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
|
||||
{ value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
|
||||
{ value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 188 },
|
||||
{ value: 1000, productSpecId: ProductSpecId.GroupBatchPublish1000, label: '1000', price: 288 },
|
||||
];
|
||||
|
||||
const calcPrice = (city: CityValue | null) => {
|
||||
if (!city) {
|
||||
return {};
|
||||
}
|
||||
const { count } = city;
|
||||
const originalPrice = count * 1;
|
||||
const price = GROUP_OPTIONS.find(o => o.value === count)?.price || 18;
|
||||
const productSpecId = GROUP_OPTIONS.find(o => o.value === count)?.productSpecId || ProductSpecId.GroupBatchPublish20;
|
||||
return { price, originalPrice, productSpecId };
|
||||
};
|
||||
|
||||
export default function UserBatchPublish() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showCitySelect, setShowCitySelect] = useState(false);
|
||||
const [showQrCode, setShowQrCode] = useState(false);
|
||||
const [city, setCity] = useState<CityOption['value'] | null>(null);
|
||||
const [cityOptions, setCityOptions] = useState<CityOption[]>([]);
|
||||
const { price, originalPrice, productSpecId } = calcPrice(city);
|
||||
|
||||
const handleClickCity = useCallback(() => setShowCitySelect(true), []);
|
||||
|
||||
const handleSelectCity = useCallback(value => {
|
||||
setCity(value);
|
||||
setShowCitySelect(false);
|
||||
const handleOpenService = useCallback(() => {
|
||||
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfcd60708731367168d');
|
||||
}, []);
|
||||
|
||||
const handleClickViewGroup = useCallback(() => navigateTo(PageUrl.GroupList, { city: city?.cityCode }), [city]);
|
||||
|
||||
const handleClickBuy = useCallback(async () => {
|
||||
// if (1 < 2) {
|
||||
// await new Promise(r => setTimeout(r, 3000));
|
||||
// setShowQrCode(true);
|
||||
// return;
|
||||
// }
|
||||
if (!price || !productSpecId) {
|
||||
return;
|
||||
const handleSelectCity = useCallback(cityCode => {
|
||||
const group = GROUPS.find(g => String(g.cityCode) === cityCode);
|
||||
if (group) {
|
||||
openCustomerServiceChat(group.serviceUrl);
|
||||
}
|
||||
try {
|
||||
Taro.showLoading();
|
||||
const allowBuy = await requestAllBuyProduct(ProductType.GroupBatchPublish);
|
||||
if (!allowBuy) {
|
||||
Taro.hideLoading();
|
||||
Toast.info('您最近已购买过,可直接联系客服');
|
||||
setShowQrCode(true);
|
||||
return;
|
||||
}
|
||||
const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
|
||||
type: OrderType.GroupBatchPublish,
|
||||
amt: getOrderPrice(price),
|
||||
// amt: 1,
|
||||
productCode: ProductType.GroupBatchPublish,
|
||||
productSpecId: productSpecId,
|
||||
});
|
||||
log('handleBuy payInfo', payOrderNo, createPayInfo);
|
||||
await requestPayment({
|
||||
timeStamp: createPayInfo.timeStamp,
|
||||
nonceStr: createPayInfo.nonceStr,
|
||||
package: createPayInfo.packageVal,
|
||||
signType: createPayInfo.signType,
|
||||
paySign: createPayInfo.paySign,
|
||||
});
|
||||
const { status } = await requestOrderInfo({ payOrderNo });
|
||||
log('handleBuy orderInfo', status);
|
||||
if (status !== OrderStatus.Success) {
|
||||
throw new Error('order status error');
|
||||
}
|
||||
Taro.hideLoading();
|
||||
setShowQrCode(true);
|
||||
} catch (e) {
|
||||
Taro.hideLoading();
|
||||
Toast.error(isCancelPay(e) ? '取消购买' : '购买失败请重试');
|
||||
log('handleBuy error', e);
|
||||
}
|
||||
}, [price, productSpecId]);
|
||||
|
||||
useLoad(async () => {
|
||||
try {
|
||||
const cOptions: CityOption[] = cityValues.map(value => ({ value, label: value.cityName }));
|
||||
const initCity = cOptions[0].value;
|
||||
|
||||
setLoading(false);
|
||||
setCity(initCity);
|
||||
setCityOptions(cOptions);
|
||||
log('init data done', cOptions);
|
||||
} catch (e) {
|
||||
Toast.error('加载失败请重试');
|
||||
}
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return <PageLoading />;
|
||||
}
|
||||
}, []);
|
||||
useShareAppMessage(() => getCommonShareMessage(true, inviteCode));
|
||||
|
||||
return (
|
||||
<HomePage>
|
||||
<div className={PREFIX}>
|
||||
<Image mode="widthFix" className={`${PREFIX}__header-image`} src="https://neighbourhood.cn/pubJob.png" />
|
||||
<div className={`${PREFIX}__title`}>请选择城市</div>
|
||||
<Cell isLink align="center" className={`${PREFIX}__cell`} title={city?.cityName} onClick={handleClickCity} />
|
||||
<div className={`${PREFIX}__title`}>可购买群数</div>
|
||||
<Cell align="center" className={`${PREFIX}__cell`} title={city?.count} />
|
||||
<div className={`${PREFIX}__title`}>服务费用</div>
|
||||
<div className={`${PREFIX}__cost-describe`}>
|
||||
<div className={`${PREFIX}__cost-describe__price`}>{`${price}元`}</div>
|
||||
<div className={`${PREFIX}__cost-describe__original_price`}>{`原价:${originalPrice}元`}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__title`}>服务说明</div>
|
||||
<div className={`${PREFIX}__illustrate`}>
|
||||
<Text>{SERVICE_ILLUSTRATE}</Text>
|
||||
<div className={`${PREFIX}__illustrate__describe`}>
|
||||
<div>附:</div>
|
||||
<div className={`${PREFIX}__illustrate__describe__view`} onClick={handleClickViewGroup}>
|
||||
播络合作群列表
|
||||
<Tabs className={`${PREFIX}__tabs`} defaultValue={0}>
|
||||
<Tabs.TabPane value={0} title="主播群">
|
||||
<SearchCity
|
||||
onSelectCity={handleSelectCity}
|
||||
currentCity={getCurrentCityCode()}
|
||||
forGroup
|
||||
offset={72}
|
||||
banner="点击城市名称,进本地通告群,免费招主播"
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane value={1} title="群代发">
|
||||
<UserBatchPublish />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane value={2} title="代招">
|
||||
<div className={`${PREFIX}__recruitment`}>
|
||||
<div className={`${PREFIX}__recruitment-card`}>
|
||||
<div className={`${PREFIX}__recruitment-h5`}>服务城市</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>江、沪、皖-上海、南京、合肥</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>粤、闽-广州、深圳、佛山、厦门、福州、泉州</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>京、鲁-北京、青岛</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>鄂、豫、湘、陕-长沙、武汉、郑州、西安</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>川、渝、云-成都、重庆、昆明</div>
|
||||
<div className={`${PREFIX}__recruitment-h5`}>服务方式及收费标准</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>服务方式:提供录屏和基本资料供挑选,挑中安排面试</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>收费标准:安排一场面试200元</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>收费方式:预付费,按安排面试场数扣费</div>
|
||||
<div className={`${PREFIX}__recruitment-h5`}>服务能力</div>
|
||||
<div className={`${PREFIX}__recruitment-body`}>
|
||||
我们在每个城市均有数量众多的主播群,少则几十个,多则上千个,有各种类型和层次的带货主播资源
|
||||
</div>
|
||||
<div className={`${PREFIX}__recruitment-btn-group`}>
|
||||
<Button className={`${PREFIX}__recruitment-btn`} onClick={handleOpenService}>
|
||||
点此咨询
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className={`${PREFIX}__buy-button`} onClick={handleClickBuy}>
|
||||
立即购买
|
||||
</Button>
|
||||
<SafeBottomPadding />
|
||||
<div>
|
||||
<PopupSelect
|
||||
value={city}
|
||||
options={cityOptions}
|
||||
open={showCitySelect}
|
||||
onSelect={handleSelectCity}
|
||||
onClose={() => setShowCitySelect(false)}
|
||||
/>
|
||||
<PublishJobQrCodeDialog onClose={() => setShowQrCode(false)} open={showQrCode} />
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</HomePage>
|
||||
);
|
||||
|
@ -18,10 +18,10 @@ const DEFAULT_LOCATION: LocationInfo = {
|
||||
longitude: 113.280637,
|
||||
};
|
||||
|
||||
const defaultAppMode = Taro.getStorageSync<RoleType>(CacheKey.APP_MODE_NEW) || RoleType.Anchor;
|
||||
const defaultAppMode = Taro.getStorageSync<RoleType>(CacheKey.APP_MODE_NEW);
|
||||
const INIT_STATE: AppState = {
|
||||
roleType: defaultAppMode,
|
||||
homePageType: defaultAppMode === RoleType.Anchor ? PageType.JOB : PageType.Anchor,
|
||||
homePageType: defaultAppMode === RoleType.Company ? PageType.Anchor : PageType.JOB,
|
||||
location: Taro.getStorageSync<LocationInfo>(CacheKey.CACHE_LOCATION_INFO) || DEFAULT_LOCATION,
|
||||
};
|
||||
|
||||
|
@ -49,3 +49,8 @@ export interface GetGroupsResponse extends IPaginationResponse {
|
||||
export interface GetGroupDetailsRequest {
|
||||
blGroupId: string;
|
||||
}
|
||||
export interface GroupItem {
|
||||
title: string;
|
||||
cityCode: number;
|
||||
serviceUrl: string;
|
||||
}
|
||||
|
@ -36,9 +36,9 @@ export interface InviteUserInfo {
|
||||
roleType: string; // 角色类型,可选
|
||||
}
|
||||
export enum ProfitType {
|
||||
Anchor = '1',
|
||||
Member = '2',
|
||||
Partner = '3',
|
||||
PAYMENT_SHARE = 'PAYMENT_SHARE',
|
||||
CHAT_SHARE = 'CHAT_SHARE',
|
||||
INDIRECT_MEMBER_REFERRAL = 'INDIRECT_MEMBER_REFERRAL',
|
||||
}
|
||||
export enum ProfitStatus {
|
||||
AVAILABLE = '1',
|
||||
@ -46,18 +46,21 @@ export enum ProfitStatus {
|
||||
WITHDRAW = '3',
|
||||
}
|
||||
export interface GetProfitRequest {
|
||||
profitType: ProfitType;
|
||||
type: ProfitType;
|
||||
}
|
||||
export interface PartnerProfitItem {
|
||||
id: number; // 唯一标识
|
||||
userId: string; // 用户ID
|
||||
profit: number; // 利润
|
||||
profitType: ProfitType; // 利润类型
|
||||
partnerId: string;
|
||||
sourceUserId: string;
|
||||
originatingUserId: string; // 用户ID
|
||||
relatedEntityId: string;
|
||||
relatedEntityType: string;
|
||||
amount: number; // 利润
|
||||
earnType: ProfitType; // 利润类型
|
||||
status: ProfitStatus; // 状态
|
||||
relatedId: string; // 相关ID
|
||||
remark: string; // 备注
|
||||
created: string; // 创建时间
|
||||
updated: string; // 更新时间
|
||||
profitTypeEnum: string; // 利润类型枚举
|
||||
statusEnum: string; // 状态枚举
|
||||
expectedSettlementDate: string;
|
||||
actualSettlementDate: string;
|
||||
}
|
||||
|
@ -1,10 +1,10 @@
|
||||
import { RoleType, PageUrl } from '@/constants/app';
|
||||
import { PageUrl, RoleType } from '@/constants/app';
|
||||
import { CollectEventName } from '@/constants/event';
|
||||
import { ANCHOR_TAB_LIST, COMPANY_TAB_LIST } from '@/hooks/use-config';
|
||||
import http from '@/http';
|
||||
import { API } from '@/http/api';
|
||||
import store from '@/store';
|
||||
import { changeRoleType, changeHomePage } from '@/store/actions';
|
||||
import { changeHomePage, changeRoleType } from '@/store/actions';
|
||||
import { selectRoleType } from '@/store/selector';
|
||||
import { sleep } from '@/utils/common';
|
||||
import { collectEvent } from '@/utils/event';
|
||||
@ -18,13 +18,18 @@ const postSwitchRoleType = (appMode: RoleType) => {
|
||||
|
||||
export const getRoleType = () => selectRoleType(store.getState());
|
||||
|
||||
export const isAnchorMode = () => getRoleType() === RoleType.Anchor;
|
||||
export const getRoleTypeWithDefault = () => getRoleType() || RoleType.Anchor;
|
||||
|
||||
export const isAnchorMode = () => getRoleTypeWithDefault() === RoleType.Anchor;
|
||||
|
||||
export const isCompanyMode = () => getRoleType() === RoleType.Company;
|
||||
|
||||
export const switchDefaultTab = async () => {
|
||||
await sleep(1);
|
||||
const mode = getRoleType();
|
||||
if (!mode) {
|
||||
return;
|
||||
}
|
||||
const tabList = mode === RoleType.Anchor ? ANCHOR_TAB_LIST : COMPANY_TAB_LIST;
|
||||
const item = tabList[0];
|
||||
store.dispatch(changeHomePage(item.type));
|
||||
|
@ -33,9 +33,12 @@ export const calcDistance = (distance: number, fractionDigits = 2) => {
|
||||
}
|
||||
return '999km';
|
||||
};
|
||||
export const getCurrentCityCode = () => {
|
||||
return selectLocation(store.getState()).cityCode;
|
||||
};
|
||||
|
||||
export const getCurrentCity = () => {
|
||||
const cityCode = selectLocation(store.getState()).cityCode;
|
||||
const cityCode = getCurrentCityCode();
|
||||
return CITY_CODE_TO_NAME_MAP.get(cityCode) || '';
|
||||
};
|
||||
|
||||
|
@ -18,7 +18,7 @@ import {
|
||||
IChatActionDetail,
|
||||
ChatWatchRequest,
|
||||
} from '@/types/message';
|
||||
import { getRoleType } from '@/utils/app';
|
||||
import { getRoleTypeWithDefault } from '@/utils/app';
|
||||
import { logWithPrefix, oncePromise } from '@/utils/common';
|
||||
import { collectEvent } from '@/utils/event';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
@ -60,12 +60,12 @@ export const requestMessageList = oncePromise(async () => {
|
||||
});
|
||||
|
||||
export const requestChatDetail = (chatId: string) => {
|
||||
const data = { chatId, roleType: getRoleType() };
|
||||
const data = { chatId, roleType: getRoleTypeWithDefault() };
|
||||
return http.post<IChatInfo>(API.MESSAGE_CHAT, { data, contentType: 'application/x-www-form-urlencoded' });
|
||||
};
|
||||
|
||||
export const requestNewChatMessages = (params: GetNewChatMessagesRequest) => {
|
||||
const data = { ...params, roleType: getRoleType() };
|
||||
const data = { ...params, roleType: getRoleTypeWithDefault() };
|
||||
return http.post<IChatMessage[]>(API.MESSAGE_CHAT_NEW, { data });
|
||||
};
|
||||
|
||||
|
@ -5,6 +5,7 @@ import http from '@/http';
|
||||
import { API } from '@/http/api';
|
||||
import store from '@/store';
|
||||
import { setInviteCode } from '@/store/actions/partner';
|
||||
import { IPaginationRequest } from '@/types/common';
|
||||
import {
|
||||
GetProfitRequest,
|
||||
InviteUserInfo,
|
||||
@ -51,8 +52,11 @@ export const getPartnerQrcode = async () => {
|
||||
export const getPartnerProfitStat = async () => {
|
||||
return await http.post<PartnerProfitsState>(API.GET_PROFIT_STAT);
|
||||
};
|
||||
export const getPartnerInviteList = async () => {
|
||||
return await http.post<InviteUserInfo[]>(API.GET_INVITE_LIST);
|
||||
export const getPartnerInviteList = async (data: IPaginationRequest) => {
|
||||
return await http.post<{ content: InviteUserInfo[]; totalPages: number }>(API.GET_INVITE_LIST, {
|
||||
data,
|
||||
contentType: 'application/x-www-form-urlencoded',
|
||||
});
|
||||
};
|
||||
export const dispatchUpdateInviteCode = (code: string) => store.dispatch(setInviteCode(code));
|
||||
export const getInviteCode = async () => {
|
||||
@ -61,8 +65,12 @@ export const getInviteCode = async () => {
|
||||
return inviteCode;
|
||||
};
|
||||
export const getProfitList = async (data: GetProfitRequest) => {
|
||||
const result = await http.post<PartnerProfitItem[]>(API.GET_PROFIT_LIST, { data });
|
||||
const result = await http.post<PartnerProfitItem[]>(API.GET_PROFIT_LIST, {
|
||||
data,
|
||||
contentType: 'application/x-www-form-urlencoded',
|
||||
});
|
||||
return Array.isArray(result) ? result : [];
|
||||
return [];
|
||||
};
|
||||
export const formatMoney = (cents: number) => {
|
||||
if (!cents) {
|
||||
@ -72,11 +80,8 @@ export const formatMoney = (cents: number) => {
|
||||
return yuan.toFixed(2);
|
||||
};
|
||||
export function formatTimestamp(timestamp: string): string {
|
||||
// 将字符串时间戳转换为数字类型
|
||||
const time = Number(timestamp);
|
||||
|
||||
// 创建 Date 对象
|
||||
const date = new Date(time);
|
||||
const date = new Date(/^\d+$/.test(timestamp) ? Number(timestamp) : timestamp);
|
||||
|
||||
// 获取年、月、日、时、分、秒
|
||||
const YYYY = date.getFullYear();
|
||||
@ -84,10 +89,9 @@ export function formatTimestamp(timestamp: string): string {
|
||||
const DD = String(date.getDate()).padStart(2, '0');
|
||||
const HH = String(date.getHours()).padStart(2, '0');
|
||||
const mm = String(date.getMinutes()).padStart(2, '0');
|
||||
const ss = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
// 拼接成所需的格式
|
||||
return `${YYYY}.${MM}.${DD} ${HH}:${mm}:${ss}`;
|
||||
return `${YYYY}.${MM}.${DD} ${HH}:${mm}`;
|
||||
}
|
||||
|
||||
export function formatUserId(input: string): string {
|
||||
|
Loading…
Reference in New Issue
Block a user