feat: first commit

src/pages/group-job/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+  disableScroll: true,
+});

src/pages/group-job/index.less

@@ -0,0 +1,42 @@
+@import '@/styles/variables.less';
+
+.page-group-job {
+  height: 100vh;
+  padding: 0 24px;
+
+  .page-group-job__type-tabs {
+    padding: 0 20px;
+    margin-top: 20px;
+
+    .taroify-tabs__wrap {
+      height: 40px;
+    }
+
+    .taroify-tabs__wrap__scroll {
+      max-width: 100%;
+    }
+
+    .taroify-tabs__tab {
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 auto !important;
+      font-size: 28px;
+      --tab-color: @blColorG1;
+      --tabs-active-color: @blColor;
+
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+
+    .taroify-tabs__line {
+      height: 0;
+      background-color: transparent;
+      border-radius: 0;
+    }
+
+    .taroify-tabs__content {
+      padding: 20px 0;
+    }
+  }
+}

src/pages/group-job/index.tsx

@@ -0,0 +1,95 @@
+import Taro, { NodesRef, useLoad } from '@tarojs/taro';
+
+import { Tabs } from '@taroify/core';
+import { useCallback, useState } from 'react';
+
+import JobList from '@/components/job-list';
+import SafeBottomPadding from '@/components/safe-bottom-padding';
+import SearchInput from '@/components/search';
+import { JOB_TABS, JobType } from '@/constants/job';
+import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
+import { logWithPrefix } from '@/utils/common';
+import { getPageQuery } from '@/utils/route';
+
+import './index.less';
+
+const PREFIX = 'page-group-job';
+const LIST_CLASS = `${PREFIX}__list-container`;
+const SAFE_PADDING_BOTTOM_CLASS = `${PREFIX}__safe-padding-bottom`;
+const CALC_LIST_PROPS: IUseListHeightProps = {
+  selectors: [`.${LIST_CLASS}`, `.${PREFIX}`, `.${SAFE_PADDING_BOTTOM_CLASS}`],
+  calc: (
+    rects: [
+      NodesRef.BoundingClientRectCallbackResult,
+      NodesRef.BoundingClientRectCallbackResult,
+      NodesRef.BoundingClientRectCallbackResult,
+    ]
+  ) => {
+    const [listRect, pageRect, safePaddingRect] = rects;
+    return pageRect.bottom - listRect.top - safePaddingRect.height;
+  },
+};
+const log = logWithPrefix(PREFIX);
+
+export default function GroupJob() {
+  const listHeight = useListHeight(CALC_LIST_PROPS);
+  const [tabType, setTabType] = useState<JobType>(JobType.All);
+  const [value, setValue] = useState<string>('');
+  const [keyWord, setKeyWord] = useState<string>('');
+  const [groupId, setGroupId] = useState<string | undefined>();
+
+  const handleClickSearch = useCallback(() => {
+    if (value === keyWord) {
+      return;
+    }
+    setKeyWord(value);
+  }, [value, keyWord]);
+
+  const handleSearchClear = useCallback(() => {
+    setValue('');
+    setKeyWord('');
+  }, []);
+
+  const handleSearchChange = useCallback(e => setValue(e.detail.value), []);
+
+  const onTypeChange = useCallback(type => setTabType(type), [setTabType]);
+
+  useLoad(() => {
+    const query = getPageQuery<{ groupId: string; title: string }>();
+    log('query', query);
+    const title = query.title || '群通告';
+    Taro.setNavigationBarTitle({ title });
+    setGroupId(query.groupId);
+  });
+
+  return (
+    <div className={PREFIX}>
+      <SearchInput
+        value={value}
+        placeholder="搜索通告"
+        className={`${PREFIX}__search`}
+        onClear={handleSearchClear}
+        onSearch={handleClickSearch}
+        onChange={handleSearchChange}
+      />
+      <Tabs className={`${PREFIX}__type-tabs`} value={tabType} onChange={onTypeChange}>
+        {JOB_TABS.map(tab => (
+          <Tabs.TabPane title={tab.title} key={tab.type} value={tab.type}>
+            {!groupId && <div className={LIST_CLASS} />}
+            {groupId && (
+              <JobList
+                category={tab.type}
+                keyWord={keyWord}
+                blGroupId={groupId}
+                className={LIST_CLASS}
+                listHeight={listHeight}
+                visible={tabType === tab.type}
+              />
+            )}
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+      <SafeBottomPadding className={SAFE_PADDING_BOTTOM_CLASS} />
+    </div>
+  );
+}