feat: 切换城市

src/components/CommonPopup/index.module.scss

@@ -1,8 +1,8 @@
-@use '~@/scss/themeColor.scss' as theme;
+@use "~@/scss/themeColor.scss" as theme;
 
 .common-popup {
   position: fixed;
-  z-index: 9999!important;
+  z-index: 9999 !important;
   .common-popup__drag-handle-container {
     position: position;
   }
@@ -12,12 +12,12 @@
     left: 50%;
     width: 32px;
     height: 4px;
-    background-color: rgba(22, 24, 35, 0.20);
+    background-color: rgba(22, 24, 35, 0.2);
     border-radius: 2px;
     z-index: 10;
     cursor: pointer;
     transition: background-color 0.2s ease;
-    
+
     &:active {
       background-color: #9ca3af;
     }
@@ -48,13 +48,18 @@
     padding: 8px 10px 0 10px;
     display: flex;
     gap: 8px;
-    background: #FFF;
+    background: #fff;
     padding-bottom: env(safe-area-inset-bottom);
-
   }
 
   .common-popup__btn {
     flex: 1;
+    font-feature-settings: "liga" off, "clig" off;
+    font-family: "PingFang SC";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
   }
 
   .common-popup__btn-cancel {
@@ -63,7 +68,7 @@
     border: none;
     width: 154px;
     height: 44px;
-    border-radius: 12px!important;
+    border-radius: 12px !important;
     border: 0.5px solid rgba(0, 0, 0, 0.06);
     background: #fff;
     padding: 4px 10px;
@@ -75,7 +80,7 @@
     height: 44px;
     border: 0.5px solid rgba(0, 0, 0, 0.06);
     background: #000;
-    border-radius: 12px!important;
+    border-radius: 12px !important;
     padding: 4px 10px;
   }
-} 
+}

src/components/CustomNavbar/index.module.scss

@@ -2,9 +2,8 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 999;
   overflow: hidden;
-  z-index: 999;
+  z-index: 9991;
   width: 100%;
   background-color: #fff;
-}
+}

src/components/Picker/CityPicker.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import CommonPopup from "@/components/CommonPopup";
+import Picker from "./Picker";
+interface PickerOption {
+  text: string | number;
+  value: string | number;
+}
+
+interface PickerProps {
+  visible: boolean;
+  setvisible: (visible: boolean) => void;
+  options?: PickerOption[][] | PickerOption[];
+  value?: (string | number)[];
+  type?: "month" | "day" | "hour" | "ntrp" | null;
+  img?: string;
+  onConfirm?: (options: PickerOption[], values: (string | number)[]) => void;
+  onChange?: (value: (string | number)[]) => void;
+  style?: React.CSSProperties;
+}
+
+const PopupPicker = ({
+  visible,
+  setvisible,
+  value = [],
+  onConfirm,
+  onChange,
+  options = [],
+  style,
+}: PickerProps) => {
+  const [defaultValue, setDefaultValue] = useState<(string | number)[]>(value);
+  const changePicker = (_options: any[], values: any, _columnIndex: number) => {
+    setDefaultValue(values);
+  };
+
+  const handleConfirm = () => {
+    console.log(defaultValue, "defaultValue");
+    onChange?.(defaultValue);
+    setvisible(false);
+  };
+
+  const dialogClose = () => {
+    setvisible(false);
+  };
+
+  return (
+    <>
+      <CommonPopup
+        visible={visible}
+        onClose={dialogClose}
+        showHeader={false}
+        title={null}
+        hideFooter={false}
+        cancelText="取消"
+        confirmText="完成"
+        onConfirm={handleConfirm}
+        position="bottom"
+        round
+        zIndex={1000}
+        style={style}
+      >
+        <Picker
+          visible={visible}
+          options={options}
+          defaultValue={defaultValue}
+          onChange={changePicker}
+        />
+      </CommonPopup>
+    </>
+  );
+};
+
+export default PopupPicker;

src/components/Picker/index.ts

@@ -3,4 +3,5 @@ export { default as PopupPicker } from './PopupPicker'
 export { default as PickerCommon } from './PickerCommon'
 export type { PickerCommonRef } from './PickerCommon'
 export { default as CalendarUI } from './CalendarUI/CalendarUI'
-export { default as DialogCalendarCard } from './CalendarDialog/DialogCalendarCard'
+export { default as DialogCalendarCard } from './CalendarDialog/DialogCalendarCard'
+export { default as CityPicker } from './CityPicker'