feat: search city & privacy checkbox remove

src/components/location-dialog/index.less

@@ -16,6 +16,7 @@
   &__confirm-button {
     .button(@width: 360px, @height: 72px, @fontSize: 28px, @fontWeight: 400, @borderRadius: 44px);
     margin-top: 40px;
+    margin-bottom: 40px;
   }
 
   // &__cancel-button {
@@ -31,8 +32,4 @@
   //     border-color: transparent
   //   }
   // }
-
-  &__checkbox {
-    margin-top: 40px;
-  }
 }

src/components/location-dialog/index.tsx

@@ -1,10 +1,8 @@
 import { Button } from '@tarojs/components';
 
 import { Dialog } from '@taroify/core';
-import { useCallback, useState } from 'react';
 
-import { ProtocolPrivacyCheckbox } from '@/components/protocol-privacy';
+import { ProtocolPrivacy } from '@/components/protocol-privacy';
-import Toast from '@/utils/toast';
 
 import './index.less';
 
@@ -18,28 +16,15 @@ const PREFIX = 'location-dialog';
 
 export default function LocationDialog(props: IProps) {
   const { open, onClick, onClose } = props;
-  const [checked, setChecked] = useState(false);
-
-  const handleTipCheck = useCallback(() => {
-    Toast.info('请先阅读并同意协议');
-  }, []);
-
   return (
     <Dialog open={open} onClose={onClose}>
       <Dialog.Content>
         <div className={`${PREFIX}__container`}>
           <div className={`${PREFIX}__title`}>{`我们需要获取您的位置信息\n以便推荐附近的通告或主播`}</div>
-          {!checked && (
+          <Button className={`${PREFIX}__confirm-button`} onClick={onClick}>
-            <Button className={`${PREFIX}__confirm-button`} onClick={handleTipCheck}>
+            授权
-              授权
+          </Button>
-            </Button>
+          <ProtocolPrivacy />
-          )}
-          {checked && (
-            <Button className={`${PREFIX}__confirm-button`} onClick={onClick}>
-              授权
-            </Button>
-          )}
-          <ProtocolPrivacyCheckbox checked={checked} onChange={setChecked} className={`${PREFIX}__checkbox`} />
         </div>
       </Dialog.Content>
     </Dialog>

src/constants/app.ts

@@ -55,6 +55,7 @@ export enum PageUrl {
   JobSelectMyPublish = 'pages/job-select-my-publish/index',
   GroupJob = 'pages/group-job/index',
   CitySearch = 'pages/search-city/index',
+  CitySearchProfile = 'pages/search-city-profile/index',
   UserInfo = 'pages/user-info/index',
   UserBatchPublish = 'pages/user-batch-publish/index',
   MyDeclaration = 'pages/my-declaration/index',

src/fragments/profile/intention/index.tsx

@@ -77,7 +77,8 @@ function ProfileIntentionFragment(props: IProps, ref) {
 
   const handleClickAddCity = useCallback(() => {
     const currentCity = getCurrentCity();
-    navigateTo(PageUrl.CitySearch, { city: currentCity, source: OpenSource.AddIndentCity });
+    realtimeLogger.info('handleClickAddCity', OpenSource.AddIndentCity);
+    navigateTo(PageUrl.CitySearchProfile, { city: currentCity, source: OpenSource.AddIndentCity });
   }, []);
 
   const handleSelectCity = useCallback(
@@ -85,9 +86,9 @@ function ProfileIntentionFragment(props: IProps, ref) {
       log('handleSelectCity', data);
       realtimeLogger.info('handleSelectCity', data);
       const { openSource, cityCode: code } = data;
-      if (openSource !== OpenSource.AddIndentCity) {
+      // if (openSource !== OpenSource.AddIndentCity) {
-        return;
+      //   return;
-      }
+      // }
       const newCodes = [...new Set([...cityCodes, code])];
       setCityCodes(newCodes);
     },

src/hooks/use-config.tsx

@@ -80,6 +80,7 @@ export const APP_CONFIG: AppConfigType = {
     PageUrl.UserInfo,
     PageUrl.UserBatchPublish,
     PageUrl.CitySearch,
+    PageUrl.CitySearchProfile,
     PageUrl.MyDeclaration,
     PageUrl.MyPublish,
     // PageUrl.FollowGroup,

src/pages/search-city-profile/index.config.ts

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

src/pages/search-city-profile/index.less

@@ -0,0 +1,123 @@
+@import '@/styles/variables.less';
+
+.search-city-profile {
+  background: #FFF;
+
+  &__position-title {
+    font-size: 24px;
+    color: @blColorG1;
+    padding: 0 24px;
+    margin-top: 18px;
+  }
+
+  &__position-city {
+    font-size: 30px;
+    font-weight: bold;
+    color: @blColor;
+    padding: 0 24px;
+    margin-top: 18px;
+  }
+
+  &__hot-city-title {
+    height: 48px;
+    font-size: 24px;
+    line-height: 48px;
+    padding: 0 24px;
+    color: #999;
+    background: #f2f5f7;
+    margin-top: 18px;
+  }
+
+  &__hot-city-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    width: 630px;
+    padding: 12px 90px 26px 30px;
+    background: #FFFFFF;
+  }
+
+  &__hot-city-item {
+    width: 140px;
+    height: 58px;
+    font-size: 28px;
+    line-height: 58px;
+    text-align: center;
+    border-radius: 58px;
+    border: 2px solid @blColorG1;
+    margin-top: 18px;
+  }
+
+  &__indexes-list {
+    width: 100%;
+    /* 兼容 iOS < 11.2 */
+    padding-bottom: constant(safe-area-inset-bottom);
+    /* 兼容 iOS >= 11.2 */
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &__indexes-fragment {}
+
+  &__indexes-anchor {
+    height: 48px;
+    font-size: 24px;
+    line-height: 48px;
+    padding: 0 24px;
+    color: @blColorG1;
+    background: #f2f5f7;
+  }
+
+  &__indexes-cell {
+    position: relative;
+    font-size: 28px;
+    padding: 30px 24px;
+    color: @blColor;
+
+    &::after {
+      content: '';
+      position: absolute;
+      border-bottom: 1rpx solid #eaeef1;
+      transform: scaleY(0.5);
+      bottom: 0;
+      right: 0;
+      left: 24px;
+    }
+  }
+
+  &__indexes-bar {
+    width: 44rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    position: fixed;
+    right: 10px;
+  }
+
+  &__indexes-bar-item {
+    font-size: 22px;
+    color: @blColor;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__indexes-index-alert {
+    position: absolute;
+    z-index: 20;
+    width: 160px;
+    height: 160px;
+    left: 50%;
+    top: 50%;
+    margin-left: -80px;
+    margin-top: -80px;
+    border-radius: 80px;
+    text-align: center;
+    line-height: 160px;
+    font-size: 70px;
+    color: #FFFFFF;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}

src/pages/search-city-profile/index.tsx

@@ -0,0 +1,232 @@
+import { BaseEventOrig, InputProps, ScrollView } from '@tarojs/components';
+import Taro, { useLoad } from '@tarojs/taro';
+
+import { Search } from '@taroify/core';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { EventName, OpenSource } from '@/constants/app';
+import { CITY_CODE_TO_NAME_MAP, CITY_INDEXES_LIST } from '@/constants/city';
+import { logWithPrefix } from '@/utils/common';
+import { getPageQuery, navigateBack } from '@/utils/route';
+
+import './index.less';
+
+interface Item {
+  cityCode: number | string;
+  cityName: string;
+  keyword: string;
+}
+
+const PREFIX = 'search-city-profile';
+const HOT_CITY = [
+  { cityCode: 110100, cityName: '北京' },
+  { cityCode: 310100, cityName: '上海' },
+  { cityCode: 440100, cityName: '广州' },
+  { cityCode: 440300, cityName: '深圳' },
+  { cityCode: 330100, cityName: '杭州' },
+  { cityCode: 430100, cityName: '长沙' },
+  { cityCode: 420100, cityName: '武汉' },
+  { cityCode: 350200, cityName: '厦门' },
+  { cityCode: 610100, cityName: '西安' },
+  { cityCode: 410100, cityName: '郑州' },
+  { cityCode: 510100, cityName: '成都' },
+  { cityCode: 340100, cityName: '合肥' },
+];
+const OFFSET_INDEX_SIZE = 2;
+const log = logWithPrefix(PREFIX);
+const realtimeLogger = Taro.getRealtimeLogManager();
+realtimeLogger.tag(PREFIX);
+const useHeight = () => {
+  const [winHeight, setWinHeight] = useState(0);
+  const [indexItemHeight, setIndexItemHeight] = useState(0);
+
+  useEffect(() => {
+    const windowInfo = Taro.getWindowInfo();
+    const windowHeight = windowInfo.windowHeight;
+    setWinHeight(windowHeight);
+    // 上下预留两个选项高度的空白
+    setIndexItemHeight(Math.floor(windowHeight / (26 + OFFSET_INDEX_SIZE * 2)));
+  }, []);
+
+  return [winHeight, indexItemHeight];
+};
+
+export default function SearchCity() {
+  const [winHeight, indexItemHeight] = useHeight();
+  const [currentCity, setCurrentCity] = useState<string>('');
+  const [touchAnchor, setTouchAnchor] = useState<string | undefined>();
+  const [touchMoving, setTouchMoving] = useState(false);
+  const [searchResult, setSearchResult] = useState<Item[]>([]);
+  const openSourceRef = useRef<OpenSource>(OpenSource.None);
+  const showSearchList = searchResult.length > 0;
+
+  const handleSearchChange = useCallback((event: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = event.detail.value;
+    log('handleSearchChange', value);
+    if (!value) {
+      setSearchResult([]);
+      return;
+    }
+    const result: Item[] = [];
+    CITY_INDEXES_LIST.forEach(obj => {
+      obj.data.forEach(city => {
+        if (city.keyword.includes(value.toLocaleUpperCase())) {
+          result.push({ ...city });
+        }
+      });
+    });
+    setSearchResult(result);
+  }, []);
+
+  const handleSelectCity = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const cityCode = e.currentTarget.dataset.code;
+    realtimeLogger.info('handleSelectCity openSource', openSourceRef.current);
+    Taro.eventCenter.trigger(EventName.SELECT_CITY, { openSource: openSourceRef.current, cityCode: String(cityCode) });
+    navigateBack(1);
+  }, []);
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent<HTMLDivElement>) => {
+      const pageY = e.touches[0].pageY;
+      const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
+      if (index < 0 || index >= CITY_INDEXES_LIST.length) {
+        return;
+      }
+      const item = CITY_INDEXES_LIST[index];
+      if (item) {
+        setTouchMoving(true);
+        setTouchAnchor(item.letter);
+      }
+    },
+    [indexItemHeight]
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent<HTMLDivElement>) => {
+      const pageY = e.touches[0].pageY;
+      const index = Math.floor(pageY / indexItemHeight) - OFFSET_INDEX_SIZE;
+      if (index < 0 || index >= CITY_INDEXES_LIST.length) {
+        return;
+      }
+      const item = CITY_INDEXES_LIST[index];
+      item && setTouchAnchor(item.letter);
+    },
+    [indexItemHeight]
+  );
+
+  const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    setTouchMoving(false);
+    log('touch end');
+  }, []);
+
+  const handleClickAnchor = useCallback((anchor: string) => {
+    setTouchAnchor(anchor);
+    log('click anchor', anchor);
+  }, []);
+
+  useLoad(() => {
+    const query = getPageQuery<{ city: string; source: OpenSource }>();
+    log('query', query);
+    const { city: cityCode, source: openSource } = query;
+    realtimeLogger.info('searchCity query source', openSource);
+    if (!cityCode) {
+      return;
+    }
+    setCurrentCity(cityCode);
+    openSourceRef.current = openSource || OpenSource.None;
+  });
+
+  return (
+    <div className={PREFIX}>
+      <ScrollView scrollY style={{ height: winHeight }} scrollIntoView={touchAnchor}>
+        <Search
+          className={`${PREFIX}__search`}
+          placeholder="输入城市名称"
+          shape="rounded"
+          onChange={handleSearchChange}
+        />
+        {showSearchList && (
+          <div className={`${PREFIX}__search-list`}>
+            {searchResult.map(city => (
+              <div
+                key={city.cityCode}
+                className={`${PREFIX}__indexes-cell`}
+                data-code={city.cityCode}
+                onClick={handleSelectCity}
+              >
+                {city.cityName}
+              </div>
+            ))}
+          </div>
+        )}
+        {!showSearchList && (
+          <div>
+            <div className={`${PREFIX}__position-title`}>当前城市</div>
+            <div className={`${PREFIX}__position-city`}>{CITY_CODE_TO_NAME_MAP.get(currentCity)}</div>
+            <div className={`${PREFIX}__hot-city-title`}>热门城市</div>
+            <div className={`${PREFIX}__hot-city-container`}>
+              {HOT_CITY.map(city => (
+                <div
+                  key={city.cityCode}
+                  className={`${PREFIX}__hot-city-item`}
+                  data-code={city.cityCode}
+                  onClick={handleSelectCity}
+                >
+                  {city.cityName}
+                </div>
+              ))}
+            </div>
+            <div className={`${PREFIX}__indexes-list`}>
+              {CITY_INDEXES_LIST.map(item => {
+                return (
+                  <div key={item.letter} className={`${PREFIX}__indexes-fragment`}>
+                    <div className={`${PREFIX}__indexes-anchor`} id={item.letter}>
+                      {item.letter}
+                    </div>
+                    {item.data.map(city => (
+                      <div
+                        key={city.cityCode}
+                        className={`${PREFIX}__indexes-cell`}
+                        data-code={city.cityCode}
+                        onClick={handleSelectCity}
+                      >
+                        {city.cityName}
+                      </div>
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </ScrollView>
+      <div>
+        {!showSearchList && (
+          <div
+            className={`${PREFIX}__indexes-bar`}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+            onTouchCancel={handleTouchEnd}
+            style={{ top: indexItemHeight * OFFSET_INDEX_SIZE }}
+          >
+            {CITY_INDEXES_LIST.map(item => {
+              return (
+                <div
+                  key={item.letter}
+                  className={`${PREFIX}__indexes-bar-item`}
+                  style={{ height: indexItemHeight }}
+                  onClick={() => handleClickAnchor(item.letter)}
+                >
+                  {item.letter}
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {touchAnchor && touchMoving && <div className={`${PREFIX}__indexes-index-alert`}>{touchAnchor}</div>}
+      </div>
+    </div>
+  );
+}

src/pages/search-city/index.tsx

@@ -34,7 +34,8 @@ const HOT_CITY = [
 ];
 const OFFSET_INDEX_SIZE = 2;
 const log = logWithPrefix(PREFIX);
-
+const realtimeLogger = Taro.getRealtimeLogManager();
+realtimeLogger.tag(PREFIX);
 const useHeight = () => {
   const [winHeight, setWinHeight] = useState(0);
   const [indexItemHeight, setIndexItemHeight] = useState(0);
@@ -127,6 +128,7 @@ export default function SearchCity() {
     const query = getPageQuery<{ city: string; source: OpenSource }>();
     log('query', query);
     const { city: cityCode, source: openSource } = query;
+    realtimeLogger.info('searchCity query source', openSource);
     if (!cityCode) {
       return;
     }