|
|
|
|
@ -2,10 +2,11 @@ import { Image } from '@tarojs/components';
|
|
|
|
|
import { NodesRef, useDidHide } from '@tarojs/taro';
|
|
|
|
|
|
|
|
|
|
import { Tabs } from '@taroify/core';
|
|
|
|
|
import { ArrowUp, ArrowDown } from '@taroify/icons';
|
|
|
|
|
import { ArrowDown, ArrowUp } from '@taroify/icons';
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
|
|
|
|
|
|
|
|
import EmployTypeSelect from '@/components/employ-type-select';
|
|
|
|
|
import JobList, { IJobListProps } from '@/components/job-list';
|
|
|
|
|
import Overlay from '@/components/overlay';
|
|
|
|
|
import PartnerBanner from '@/components/partner-banner';
|
|
|
|
|
@ -13,7 +14,15 @@ import SalarySelect from '@/components/salary-select';
|
|
|
|
|
import SearchInput from '@/components/search';
|
|
|
|
|
import { APP_TAB_BAR_ID, PageUrl } from '@/constants/app';
|
|
|
|
|
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
|
|
|
|
|
import { JOB_TABS, JobType, EmployType, ALL_SORT_TYPES, SORT_TYPE_TITLE_MAP, SortType } from '@/constants/job';
|
|
|
|
|
import {
|
|
|
|
|
ALL_SORT_TYPES,
|
|
|
|
|
EMPLOY_TYPE_TITLE_MAP,
|
|
|
|
|
EmployType,
|
|
|
|
|
JOB_TABS, JobSourceType,
|
|
|
|
|
JobType,
|
|
|
|
|
SORT_TYPE_TITLE_MAP,
|
|
|
|
|
SortType,
|
|
|
|
|
} from '@/constants/job';
|
|
|
|
|
import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
|
|
|
|
|
import { SalaryRange } from '@/types/job';
|
|
|
|
|
import { Coordinate } from '@/types/location';
|
|
|
|
|
@ -24,9 +33,11 @@ import './index.less';
|
|
|
|
|
interface IProps {
|
|
|
|
|
cityCode: string;
|
|
|
|
|
sortType: SortType;
|
|
|
|
|
sourceType: JobSourceType;
|
|
|
|
|
employType: EmployType;
|
|
|
|
|
coordinate: Coordinate;
|
|
|
|
|
onClickCity: () => void;
|
|
|
|
|
onClickEmployType: (type: EmployType) => void;
|
|
|
|
|
onClickSort: (type: SortType) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -74,20 +85,35 @@ function ListWrapper(props: IJobListProps) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function JobFragment(props: IProps) {
|
|
|
|
|
const { cityCode, employType, sortType = SortType.RECOMMEND, coordinate, onClickCity, onClickSort } = props;
|
|
|
|
|
const {
|
|
|
|
|
cityCode,
|
|
|
|
|
employType,
|
|
|
|
|
sourceType,
|
|
|
|
|
sortType = SortType.RECOMMEND,
|
|
|
|
|
coordinate,
|
|
|
|
|
onClickEmployType,
|
|
|
|
|
onClickCity,
|
|
|
|
|
onClickSort,
|
|
|
|
|
} = props;
|
|
|
|
|
const listHeight = useListHeight(CALC_LIST_PROPS);
|
|
|
|
|
const [tabType, setTabType] = useState<JobType>(JobType.All);
|
|
|
|
|
const [salaryRange, setSalaryRange] = useState<SalaryRange | undefined>();
|
|
|
|
|
const [showSalarySelect, setShowSalarySelect] = useState<boolean>(false);
|
|
|
|
|
const [showEmployTypeSelect, setShowEmployTypeSelect] = useState<boolean>(false);
|
|
|
|
|
const { latitude, longitude } = coordinate;
|
|
|
|
|
|
|
|
|
|
const handleClickSearch = useCallback(() => navigateTo(PageUrl.JobSearch, { city: cityCode }), [cityCode]);
|
|
|
|
|
|
|
|
|
|
const handleClickSalarySelect = useCallback(() => {
|
|
|
|
|
setShowSalarySelect(!showSalarySelect);
|
|
|
|
|
}, [showSalarySelect]);
|
|
|
|
|
setShowSalarySelect(s => !s);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const handleClickEmployTypeSelect = useCallback(() => {
|
|
|
|
|
setShowEmployTypeSelect(s => !s);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const handleHideSalarySelect = useCallback(() => setShowSalarySelect(false), []);
|
|
|
|
|
const handleHideEmployTypeSelect = useCallback(() => setShowEmployTypeSelect(false), []);
|
|
|
|
|
|
|
|
|
|
const handleSelectSalary = useCallback((value?: SalaryRange) => {
|
|
|
|
|
log('handleSelectSalary', value);
|
|
|
|
|
@ -95,6 +121,15 @@ function JobFragment(props: IProps) {
|
|
|
|
|
setShowSalarySelect(false);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const handleSelectEmployType = useCallback(
|
|
|
|
|
(value?: EmployType) => {
|
|
|
|
|
console.log('哈哈哈', value);
|
|
|
|
|
setShowEmployTypeSelect(false);
|
|
|
|
|
onClickEmployType(value!);
|
|
|
|
|
},
|
|
|
|
|
[onClickEmployType]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const onTypeChange = useCallback(
|
|
|
|
|
value => {
|
|
|
|
|
log('onTypeChange', value);
|
|
|
|
|
@ -108,7 +143,18 @@ function JobFragment(props: IProps) {
|
|
|
|
|
return (
|
|
|
|
|
<div className={`${PREFIX}__container`}>
|
|
|
|
|
<div className={`${PREFIX}__top-search-bar`}>
|
|
|
|
|
<SearchInput disabled className={`${PREFIX}__search`} placeholder="试试 女装" onClick={handleClickSearch} />
|
|
|
|
|
<SearchInput
|
|
|
|
|
disabled
|
|
|
|
|
className={`${PREFIX}__search`}
|
|
|
|
|
placeholder="试试 女装"
|
|
|
|
|
onClick={handleClickSearch}
|
|
|
|
|
/>
|
|
|
|
|
<div className={classNames(`${PREFIX}__employType-select`)} onClick={handleClickEmployTypeSelect}>
|
|
|
|
|
<div className="title">
|
|
|
|
|
{employType && employType !== EmployType.All ? EMPLOY_TYPE_TITLE_MAP[employType] : '类型'}
|
|
|
|
|
</div>
|
|
|
|
|
{showEmployTypeSelect ? <ArrowUp /> : <ArrowDown />}
|
|
|
|
|
</div>
|
|
|
|
|
<div className={classNames(`${PREFIX}__search-city`)} onClick={onClickCity}>
|
|
|
|
|
<div className="title">{CITY_CODE_TO_NAME_MAP.get(cityCode)}</div>
|
|
|
|
|
<ArrowDown />
|
|
|
|
|
@ -139,6 +185,7 @@ function JobFragment(props: IProps) {
|
|
|
|
|
sortType={sortType}
|
|
|
|
|
latitude={latitude}
|
|
|
|
|
longitude={longitude}
|
|
|
|
|
sourceType={sourceType}
|
|
|
|
|
employType={employType}
|
|
|
|
|
minSalary={salaryRange?.minSalary}
|
|
|
|
|
maxSalary={salaryRange?.maxSalary}
|
|
|
|
|
@ -157,6 +204,15 @@ function JobFragment(props: IProps) {
|
|
|
|
|
>
|
|
|
|
|
<SalarySelect type={employType} value={salaryRange} onSelect={handleSelectSalary} />
|
|
|
|
|
</Overlay>
|
|
|
|
|
|
|
|
|
|
<Overlay
|
|
|
|
|
visible={showEmployTypeSelect}
|
|
|
|
|
onClickOuter={handleHideEmployTypeSelect}
|
|
|
|
|
outerClassName={`${PREFIX}__overlay-outer`}
|
|
|
|
|
innerClassName={`${PREFIX}__overlay-inner`}
|
|
|
|
|
>
|
|
|
|
|
<EmployTypeSelect value={employType} onSelect={handleSelectEmployType} />
|
|
|
|
|
</Overlay>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|