feat: 切换城市

src/container/listCustomNavbar/index.tsx

@@ -1,13 +1,15 @@
+import { useEffect, useState } from "react";
 import { View, Text, Image } from "@tarojs/components";
 import img from "@/config/images";
 import { useGlobalState } from "@/store/global";
-import { useUserInfo, } from '@/store/userStore'
+import { useUserInfo } from "@/store/userStore";
 import { useListState } from "@/store/listStore";
 import CustomNavbar from "@/components/CustomNavbar";
 import { Input } from "@nutui/nutui-react-taro";
 import Taro from "@tarojs/taro";
 import "./index.scss";
 import { getCurrentFullPath } from "@/utils";
+import { CityPicker as PopupPicker } from "@/components/Picker";
 
 interface IProps {
   config?: {
@@ -18,30 +20,60 @@ interface IProps {
   };
 }
 
+function CityPicker(props) {
+  const { visible, setVisible, cities, area, setArea } = props;
+  console.log(cities, "cities");
+  const [index, setIndex] = useState(0);
+  const [value, setValue] = useState(area);
+
+  useEffect(() => {
+    if (visible) {
+      setIndex(index + 1);
+    }
+  }, [visible]);
+
+  function onChange(value: any) {
+    console.log(value, "value");
+    setValue(value);
+    setArea(value);
+  }
+  return (
+    visible && (
+      <PopupPicker
+        key={index}
+        options={cities}
+        visible={visible}
+        setvisible={setVisible}
+        value={value}
+        onChange={onChange}
+        style={{ zIndex: 9991 }}
+      />
+    )
+  );
+}
+
 const ListHeader = (props: IProps) => {
   const { config } = props;
-  const {
-    showInput = false,
-    inputLeftIcon,
-    leftIconClick,
-  } = config || {};
-  const {
-    getLocationLoading,
-    statusNavbarHeightInfo,
-  } = useGlobalState();
-  const { gamesNum, searchValue } = useListState();
+  const { showInput = false, inputLeftIcon, leftIconClick } = config || {};
+  const { getLocationLoading, statusNavbarHeightInfo } = useGlobalState();
+  const { gamesNum, searchValue, cities, area, updateArea } = useListState();
   const { navBarHeight } = statusNavbarHeightInfo;
 
-  const userInfo = useUserInfo()
-  const city = (userInfo as any)?.city || ''
-  const district = (userInfo as any)?.district || ''
+  const [cityPopupVisible, setCityPopupVisible] = useState(false);
 
-  console.log("useUserInfo",city,district )
+  const userInfo = useUserInfo();
+  const province = (userInfo as any)?.province || "";
+  const city = (userInfo as any)?.city || "";
+  // const district = (userInfo as any)?.district || "";
 
-  const currentAddress =  city + district
+  useEffect(() => {
+    updateArea(["中国", province, city]);
+  }, [province, city]);
+
+  // const currentAddress = city + district;
 
   const handleInputClick = () => {
-    const currentPagePath = getCurrentFullPath()
+    const currentPagePath = getCurrentFullPath();
     if (currentPagePath === "/game_pages/searchResult/index") {
       Taro.navigateBack();
     } else {
@@ -77,13 +109,18 @@ const ListHeader = (props: IProps) => {
     height: `${navBarHeight}px`,
   };
 
+  function handleToggleCity() {
+    setCityPopupVisible(true);
+  }
+
+  const area_city = area.at(-1);
 
   return (
     <CustomNavbar>
       <View className="listNavWrapper">
         {/* 首页logo 导航*/}
         <View
-          className={`listNavContainer toggleElement firstElement hidden 
+          className={`listNavContainer toggleElement firstElement hidden
             ${!showInput ? "visible" : ""}`}
           style={navbarStyle}
         >
@@ -96,10 +133,10 @@ const ListHeader = (props: IProps) => {
             />
             <View className="listNavLine" />
             <View className="listNavContent">
-              <View className="listNavCityWrapper">
+              <View className="listNavCityWrapper" onClick={handleToggleCity}>
                 {/* 位置 */}
-                <Text className="listNavCity">{currentAddress}</Text>
-                {!getLocationLoading && currentAddress && (
+                <Text className="listNavCity">{area_city}</Text>
+                {!getLocationLoading && area_city && (
                   <Image src={img.ICON_CHANGE} className="listNavChange" />
                 )}
               </View>
@@ -111,8 +148,9 @@ const ListHeader = (props: IProps) => {
         </View>
         {/* 搜索导航 */}
         <View
-          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${showInput && "visible"
-            } ${showInput ? "inputCustomerNavbarShowInput" : ""}`}
+          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${
+            showInput && "visible"
+          } ${showInput ? "inputCustomerNavbarShowInput" : ""}`}
           style={navbarStyle}
         >
           <View className="navContent">
@@ -139,6 +177,13 @@ const ListHeader = (props: IProps) => {
           </View>
         </View>
       </View>
+      <CityPicker
+        visible={cityPopupVisible}
+        setVisible={setCityPopupVisible}
+        cities={cities}
+        area={area}
+        setArea={updateArea}
+      />
     </CustomNavbar>
   );
 };