feat: update

2025-09-19 23:49:31 +08:00
parent 8e42fef4f7
commit 1d8a0d7a33
10 changed files with 164 additions and 81 deletions
--- a/src/pages/anchor/index.less
+++ b/src/pages/anchor/index.less
@ -52,7 +52,11 @@
    font-size: 28px;
    line-height: 32px;
    color: @blColor;
+    gap: 20px;

+    &-item {
+      display: flex;
+    }
    .title {
      margin-right: 5px;
    }
@ -61,11 +65,17 @@
    padding: 0 24px;
  }
  &__overlay-outer {
-    top: 82px;
+    top: 72px;
  }

  &__overlay-inner {
    width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    .bl-select__items-container {
+      max-height: calc(100vh - 560rpx);
+      overflow-y: auto;
+    }
  }

  &__tips-container {
@ -91,8 +101,6 @@
    margin-top: 50px;
  }

-
-
  &__popup {
    &-content {
      .flex-column();
--- a/src/pages/anchor/index.tsx
+++ b/src/pages/anchor/index.tsx
@ -5,11 +5,13 @@ import { Popup } from '@taroify/core';
 import { ArrowDown, ArrowUp } from '@taroify/icons';
 import classNames from 'classnames';
 import { isEqual } from 'lodash-es';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import AnchorList, { IAnchorListProps } from '@/components/anchor-list';
 import AnchorPicker from '@/components/anchor-picker';
 import CustomNavigationBar from '@/components/custom-navigation-bar';
+import EmployTypeSelect from '@/components/employ-type-select';
+import GenderSelect from '@/components/gender-select';
 import HomePage from '@/components/home-page';
 import Overlay from '@/components/overlay';
 import PageLoading from '@/components/page-loading';
@ -17,8 +19,8 @@ import PartnerBanner from '@/components/partner-banner';
 import SafeBottomPadding from '@/components/safe-bottom-padding';
 import SwitchBar from '@/components/switch-bar';
 import { APP_TAB_BAR_ID, EventName, OpenSource, PageType, PageUrl, RoleType } from '@/constants/app';
-import { EmployType } from '@/constants/job';
-import { ALL_ANCHOR_SORT_TYPES, ANCHOR_SORT_TYPE_TITLE_MAP, AnchorSortType } from '@/constants/material';
+import { EmployType, JobType } from '@/constants/job';
+import { ALL_ANCHOR_SORT_TYPES, ANCHOR_SORT_TYPE_TITLE_MAP, AnchorSortType, GenderType } from '@/constants/material';
 import useInviteCode from '@/hooks/use-invite-code';
 import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
 import useLocation from '@/hooks/use-location';
@ -36,6 +38,7 @@ import { getCommonShareMessage } from '@/utils/share';
 import Toast from '@/utils/toast';

 import './index.less';
+import TopCategorySelect from '@/components/top-category-select';

 const PREFIX = 'page-anchor';
 const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
@ -78,12 +81,22 @@ function ListWrapper(props: IAnchorListProps) {
  return <AnchorList listHeight={listHeight} {...props} onListEmpty={handleListEmpty} />;
 }

+enum FilterType {
+  gender,
+  employType,
+  topCategory,
+  more,
+}
+
 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 [moreFilters, setMoreFilters] = useState<IAnchorFilters>({});
+  const [gender, setGender] = useState<GenderType>(GenderType.All);
+  const [employType, setEmployType] = useState<EmployType>(EmployType.All);
+  const [topCategory, setTopCategory] = useState<JobType>(JobType.All);
+  const [showFilter, setShowFilter] = useState<FilterType | null>(null);
  const [sortType, setSortType] = useState<AnchorSortType>(AnchorSortType.Active);
  const [openPopup, setOpenPopup] = useState<boolean>(false);
  const [coordinate, setCoordinate] = useState<Coordinate>({
@ -106,20 +119,35 @@ export default function AnchorPage() {
    [selectJob]
  );

-  const handleClickSalarySelect = useCallback(() => {
-    setShowFilter(!showFilter);
-  }, [showFilter]);
+  const handleClickFilterSelect = (type: FilterType) => () => {
+    setShowFilter(type === showFilter ? null : type);
+  };

-  const handleHideFilter = useCallback(() => setShowFilter(false), []);
+  const handleHideFilter = useCallback(() => setShowFilter(null), []);

  const handleFilterChange = useCallback(
    (newFilters: IAnchorFilters) => {
-      !isEqual(newFilters, filters) && setFilters(newFilters);
-      setShowFilter(false);
+      !isEqual(newFilters, moreFilters) && setMoreFilters(newFilters);
+      setShowFilter(null);
    },
-    [filters]
+    [moreFilters]
  );

+  const handleChangeSelectGender = useCallback((value: GenderType) => {
+    setGender(value);
+    setShowFilter(null);
+  }, []);
+
+  const handleChangeSelectEmployType = useCallback((value: EmployType) => {
+    setEmployType(value);
+    setShowFilter(null);
+  }, []);
+
+  const handleChangeSelectTopCategory = useCallback((value: JobType) => {
+    setTopCategory(value);
+    setShowFilter(null);
+  }, []);
+
  const handleClickSortType = useCallback(async (type: AnchorSortType) => setSortType(type), []);

  const handleJobChange = useCallback(
@ -205,6 +233,15 @@ export default function AnchorPage() {

  useDidShow(() => requestUnreadMessageCount());

+  const filters = useMemo(
+    () => ({
+      ...moreFilters,
+      topCategory,
+      gender: gender === -1 ? undefined : gender,
+      employType,
+    }),
+    [moreFilters, gender, employType, topCategory]
+  );
  return (
    <HomePage type={PageType.Anchor}>
      {!!loading && <PageLoading className={`${PREFIX}__loading`} />}
@ -224,9 +261,23 @@ export default function AnchorPage() {
              </div>
            ))}
          </div>
-          <div className={classNames(`${PREFIX}__filter`)} onClick={handleClickSalarySelect}>
-            <div className="title">筛选</div>
-            {showFilter ? <ArrowUp /> : <ArrowDown />}
+          <div className={classNames(`${PREFIX}__filter`)}>
+            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.gender)}>
+              <div className="title">性别</div>
+              {showFilter === FilterType.gender ? <ArrowUp /> : <ArrowDown />}
+            </div>
+            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.employType)}>
+              <div className="title">类型</div>
+              {showFilter === FilterType.employType ? <ArrowUp /> : <ArrowDown />}
+            </div>
+            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.topCategory)}>
+              <div className="title">品类</div>
+              {showFilter === FilterType.topCategory ? <ArrowUp /> : <ArrowDown />}
+            </div>
+            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.more)}>
+              <div className="title">更多</div>
+              {showFilter === FilterType.more ? <ArrowUp /> : <ArrowDown />}
+            </div>
          </div>
        </div>
        <div className={`${PREFIX}__banner`}>
@ -243,12 +294,36 @@ export default function AnchorPage() {
          className={LIST_CONTAINER_CLASS}
        />
        <Overlay
-          visible={showFilter}
+          visible={showFilter === FilterType.gender}
          onClickOuter={handleHideFilter}
          outerClassName={`${PREFIX}__overlay-outer`}
          innerClassName={`${PREFIX}__overlay-inner`}
        >
-          <AnchorPicker value={filters} onConfirm={handleFilterChange} />
+          <GenderSelect value={gender} onSelect={handleChangeSelectGender} />
+        </Overlay>
+        <Overlay
+          visible={showFilter === FilterType.employType}
+          onClickOuter={handleHideFilter}
+          outerClassName={`${PREFIX}__overlay-outer`}
+          innerClassName={`${PREFIX}__overlay-inner`}
+        >
+          <EmployTypeSelect value={employType} onSelect={handleChangeSelectEmployType} />
+        </Overlay>
+        <Overlay
+          visible={showFilter === FilterType.topCategory}
+          onClickOuter={handleHideFilter}
+          outerClassName={`${PREFIX}__overlay-outer`}
+          innerClassName={`${PREFIX}__overlay-inner`}
+        >
+          <TopCategorySelect value={topCategory} onSelect={handleChangeSelectTopCategory} />
+        </Overlay>
+        <Overlay
+          visible={showFilter === FilterType.more}
+          onClickOuter={handleHideFilter}
+          outerClassName={`${PREFIX}__overlay-outer`}
+          innerClassName={`${PREFIX}__overlay-inner`}
+        >
+          <AnchorPicker value={moreFilters} onConfirm={handleFilterChange} />
        </Overlay>
      </div>
      <Popup
--- a/src/pages/material-view/index.tsx
+++ b/src/pages/material-view/index.tsx
@ -9,13 +9,17 @@ import PageLoading from '@/components/page-loading';
 import CompanyPublishJobBuy from '@/components/product-dialog/steps-ui/company-publish-job-buy';
 import SafeBottomPadding from '@/components/safe-bottom-padding';
 import { EventName, OpenSource, PageUrl, RoleType } from '@/constants/app';
+import { CertificationStatusType } from '@/constants/company';
 import { CollectEventName } from '@/constants/event';
 import { JobManageStatus } from '@/constants/job';
 import { MaterialViewSource } from '@/constants/material';
 import ProfileViewFragment from '@/fragments/profile/view';
 import useInviteCode from '@/hooks/use-invite-code';
+import useUserInfo from '@/hooks/use-user-info';
 import { RESPONSE_ERROR_CODE } from '@/http/constant';
 import { HttpError } from '@/http/error';
+import store from '@/store';
+import { cacheJobId } from '@/store/actions';
 import { JobManageInfo } from '@/types/job';
 import { MaterialProfile } from '@/types/material';
 import { IJobMessage } from '@/types/message';
@ -29,10 +33,6 @@ import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
 import { getPageQuery, navigateBack, navigateTo, redirectTo } from '@/utils/route';
 import Toast from '@/utils/toast';
 import './index.less';
-import useUserInfo from '@/hooks/use-user-info';
-import { CertificationStatusType } from '@/constants/company';
-import store from '@/store';
-import { cacheJobId } from '@/store/actions';

 const PREFIX = 'page-material-view';