feat: first commit
This commit is contained in:
eleanor.mao
228
src/pages/anchor/index.tsx
Normal file
228
src/pages/anchor/index.tsx
Normal file
@ -0,0 +1,228 @@
|
||||
import { Image } from '@tarojs/components';
|
||||
import Taro, { NodesRef, useDidShow, useLoad } from '@tarojs/taro';
|
||||
|
||||
import { ArrowUp, ArrowDown } from '@taroify/icons';
|
||||
import classNames from 'classnames';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import AnchorList, { IAnchorListProps } from '@/components/anchor-list';
|
||||
import AnchorPicker from '@/components/anchor-picker';
|
||||
import CustomNavigationBar from '@/components/custom-navigation-bar';
|
||||
import HomePage from '@/components/home-page';
|
||||
import Overlay from '@/components/overlay';
|
||||
import PageLoading from '@/components/page-loading';
|
||||
import SwitchBar from '@/components/switch-bar';
|
||||
import { APP_TAB_BAR_ID, EventName, OpenSource, PageUrl } from '@/constants/app';
|
||||
import { EmployType, JobManageStatus } from '@/constants/job';
|
||||
import { ALL_ANCHOR_SORT_TYPES, ANCHOR_SORT_TYPE_TITLE_MAP, AnchorSortType } from '@/constants/material';
|
||||
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
|
||||
import useLocation from '@/hooks/use-location';
|
||||
import { JobManageInfo } from '@/types/job';
|
||||
import { Coordinate } from '@/types/location';
|
||||
import { IAnchorFilters } from '@/types/material';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { getLastSelectMyJobId, requestJobManageList, setLastSelectMyJobId } from '@/utils/job';
|
||||
import { getWxLocation } from '@/utils/location';
|
||||
import { requestUnreadMessageCount } from '@/utils/message';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import Toast from '@/utils/toast';
|
||||
|
||||
import './index.less';
|
||||
|
||||
const PREFIX = 'page-anchor';
|
||||
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 log = logWithPrefix(PREFIX);
|
||||
|
||||
const EmptyTips = (props: { className?: string; height?: number }) => {
|
||||
const { className, height } = props;
|
||||
return (
|
||||
<div className={classNames(`${PREFIX}__tips-container`, className)} style={height ? { height } : undefined}>
|
||||
<Image className={`${PREFIX}__empty-box`} src={require('@/statics/svg/empty-box.svg')} mode="aspectFit" />
|
||||
<div className={`${PREFIX}__tips-title`}>该条件下还没有主播</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function ListWrapper(props: IAnchorListProps) {
|
||||
const { className, jobId, filters, cityCode, sortType, latitude, longitude } = props;
|
||||
const listHeight = useListHeight(CALC_LIST_PROPS);
|
||||
const [isEmpty, setIsEmpty] = useState(false);
|
||||
|
||||
const handleListEmpty = useCallback(() => {
|
||||
setIsEmpty(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setIsEmpty(false);
|
||||
}, [jobId, filters, cityCode, sortType, latitude, longitude]);
|
||||
|
||||
if (isEmpty) {
|
||||
return <EmptyTips className={className} height={listHeight} />;
|
||||
}
|
||||
|
||||
return <AnchorList listHeight={listHeight} {...props} onListEmpty={handleListEmpty} />;
|
||||
}
|
||||
|
||||
export default function AnchorPage() {
|
||||
const location = useLocation();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectJob, setSelectJob] = useState<JobManageInfo | undefined>();
|
||||
const [filters, setFilters] = useState<IAnchorFilters>({ employType: EmployType.All });
|
||||
const [showFilter, setShowFilter] = useState<boolean>(false);
|
||||
const [sortType, setSortType] = useState<AnchorSortType>(AnchorSortType.Active);
|
||||
const [coordinate, setCoordinate] = useState<Coordinate>({
|
||||
latitude: location.latitude,
|
||||
longitude: location.longitude,
|
||||
});
|
||||
log('jobId', selectJob);
|
||||
|
||||
const handleChangeSelectJob = useCallback((select?: JobManageInfo) => {
|
||||
log('select job change', select);
|
||||
setSelectJob(select);
|
||||
setLastSelectMyJobId(select?.id || '');
|
||||
}, []);
|
||||
|
||||
const handleClickSwitch = useCallback(
|
||||
() => navigateTo(PageUrl.JobSelectMyPublish, { id: selectJob?.id, source: OpenSource.AnchorPage }),
|
||||
[selectJob]
|
||||
);
|
||||
|
||||
const handleClickSalarySelect = useCallback(() => {
|
||||
setShowFilter(!showFilter);
|
||||
}, [showFilter]);
|
||||
|
||||
const handleHideFilter = useCallback(() => setShowFilter(false), []);
|
||||
|
||||
const handleFilterChange = useCallback(
|
||||
(newFilters: IAnchorFilters) => {
|
||||
!isEqual(newFilters, filters) && setFilters(newFilters);
|
||||
setShowFilter(false);
|
||||
},
|
||||
[filters]
|
||||
);
|
||||
|
||||
const handleClickSortType = useCallback(async (type: AnchorSortType) => setSortType(type), []);
|
||||
|
||||
const handleJobChange = useCallback(
|
||||
(select: JobManageInfo, source: OpenSource) => {
|
||||
log('handleJobChange', select, source);
|
||||
source === OpenSource.AnchorPage && handleChangeSelectJob(select);
|
||||
},
|
||||
[handleChangeSelectJob]
|
||||
);
|
||||
|
||||
const handlePublishJobChange = useCallback(async () => {
|
||||
const { jobResults = [] } = await requestJobManageList({ status: JobManageStatus.Open });
|
||||
if (!selectJob) {
|
||||
// 之前没有开发中的通告，自动选中第一个开放中的通告
|
||||
handleChangeSelectJob(jobResults[0]);
|
||||
return;
|
||||
}
|
||||
const curJob = jobResults.find(j => j.id === selectJob.id);
|
||||
if (!curJob) {
|
||||
// 之前选中的通告不再开放了，自动切到第一个开放中的通告
|
||||
handleChangeSelectJob(jobResults[0]);
|
||||
} else if (!isEqual(curJob, selectJob)) {
|
||||
// 之前选中的通告发生了变化，尝试更新
|
||||
handleChangeSelectJob(curJob);
|
||||
}
|
||||
}, [selectJob, handleChangeSelectJob]);
|
||||
|
||||
useEffect(() => {
|
||||
Taro.eventCenter.on(EventName.SELECT_MY_PUBLISH_JOB, handleJobChange);
|
||||
Taro.eventCenter.on(EventName.COMPANY_JOB_PUBLISH_CHANGED, handlePublishJobChange);
|
||||
return () => {
|
||||
Taro.eventCenter.off(EventName.SELECT_MY_PUBLISH_JOB, handleJobChange);
|
||||
Taro.eventCenter.off(EventName.COMPANY_JOB_PUBLISH_CHANGED, handlePublishJobChange);
|
||||
};
|
||||
}, [handleJobChange, handlePublishJobChange]);
|
||||
|
||||
useEffect(() => {
|
||||
const ensureLocation = async () => {
|
||||
if (location.latitude || !location.longitude) {
|
||||
const res = await getWxLocation();
|
||||
if (!res) {
|
||||
Toast.info('获取位置信息失败，请重试');
|
||||
return;
|
||||
}
|
||||
const { latitude, longitude } = res;
|
||||
setCoordinate({ latitude, longitude });
|
||||
}
|
||||
};
|
||||
ensureLocation();
|
||||
}, [location]);
|
||||
|
||||
useLoad(async () => {
|
||||
try {
|
||||
const { jobResults = [] } = await requestJobManageList({ status: JobManageStatus.Open });
|
||||
if (!jobResults.length) {
|
||||
Toast.info('当前是根据定位为您展示主播');
|
||||
return;
|
||||
}
|
||||
const lastSelectJobId = getLastSelectMyJobId();
|
||||
const lastJob = jobResults.find(job => job.id === lastSelectJobId) || jobResults[0];
|
||||
log('lastJob', lastSelectJobId, lastJob);
|
||||
handleChangeSelectJob(lastJob);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
useDidShow(() => requestUnreadMessageCount());
|
||||
|
||||
return (
|
||||
<HomePage>
|
||||
{!!loading && <PageLoading className={`${PREFIX}__loading`} />}
|
||||
<CustomNavigationBar className={`${PREFIX}__navigation-bar`}>
|
||||
{selectJob && <SwitchBar title={selectJob.title.substring(0, 4)} onClick={handleClickSwitch} />}
|
||||
</CustomNavigationBar>
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__top-search-bar`}>
|
||||
<div className={classNames(`${PREFIX}__sort-type`)}>
|
||||
{ALL_ANCHOR_SORT_TYPES.map(type => (
|
||||
<div
|
||||
key={type}
|
||||
className={classNames(`${PREFIX}__sort-item`, { selected: sortType === type })}
|
||||
onClick={() => handleClickSortType(type)}
|
||||
>
|
||||
{ANCHOR_SORT_TYPE_TITLE_MAP[type]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={classNames(`${PREFIX}__filter`)} onClick={handleClickSalarySelect}>
|
||||
<div className="title">筛选</div>
|
||||
{showFilter ? <ArrowUp /> : <ArrowDown />}
|
||||
</div>
|
||||
</div>
|
||||
<ListWrapper
|
||||
filters={filters}
|
||||
ready={!loading}
|
||||
sortType={sortType}
|
||||
jobId={selectJob?.id}
|
||||
cityCode={selectJob?.cityCode ?? location.cityCode}
|
||||
latitude={coordinate.latitude}
|
||||
longitude={coordinate.longitude}
|
||||
className={LIST_CONTAINER_CLASS}
|
||||
/>
|
||||
<Overlay
|
||||
visible={showFilter}
|
||||
onClickOuter={handleHideFilter}
|
||||
outerClassName={`${PREFIX}__overlay-outer`}
|
||||
innerClassName={`${PREFIX}__overlay-inner`}
|
||||
>
|
||||
<AnchorPicker value={filters} onConfirm={handleFilterChange} />
|
||||
</Overlay>
|
||||
</div>
|
||||
</HomePage>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user