feat: login

src/pages/group-v2/index.less

@@ -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;
+}

src/pages/group-v2/index.tsx

@@ -1,63 +1,37 @@
-import { Image } from '@tarojs/components';
-import { NodesRef, 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 useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
-import { GroupItem } from '@/types/group';
 import { openCustomerServiceChat } from '@/utils/common';
+import { getCurrentCityCode } from '@/utils/location';
 import { getCommonShareMessage } from '@/utils/share';
-
 import './index.less';
 
 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;
-  },
-};
 
 export default function GroupV2() {
-  const listHeight = useListHeight(CALC_LIST_PROPS);
-
-  const handleClick = useCallback((group: GroupItem) => openCustomerServiceChat(group.serviceUrl), []);
+  const handleSelectCity = useCallback(cityCode => {
+    const group = GROUPS.find(g => String(g.cityCode) === cityCode);
+    if (group) {
+      openCustomerServiceChat(group.serviceUrl);
+    }
+  }, []);
 
   useShareAppMessage(() => getCommonShareMessage());
 
   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>
   );