下载账单、城市和职业选择器

src/components/Picker/PopupPicker.tsx

@@ -17,7 +17,7 @@ interface PickerOption {
 interface PickerProps {
   visible: boolean;
   setvisible: (visible: boolean) => void;
-  options?: PickerOption[][];
+  options?: PickerOption[][] | PickerOption[];
   value?: (string | number)[];
   type?: "month" | "day" | "hour" | "ntrp" | null;
   img?: string;

src/config/api.ts

@@ -29,7 +29,9 @@ export const API_CONFIG = {
     CREATE: '/game/create',
     JOIN: '/game/join',
     LEAVE: '/game/leave'
-  }
+  },
+  PROFESSIONS: '/professions/tree',
+  CITIS: '/admin/wch_cities/page'
 };
 
 // 请求拦截器配置

src/services/userService.ts

@@ -40,6 +40,17 @@ interface UserDetailData {
   };
 }
 
+export interface PickerOption {
+  text: string | number;
+  value: string | number;
+  children?: PickerOption[];
+}
+
+export interface Profession {
+  name: string;
+  children: Profession[] | [];
+}
+
 // 用户详细信息接口（从 loginService 移过来）
 export interface UserInfoType {
   id: number
@@ -119,6 +130,21 @@ interface BackendGameData {
   }[];
 }
 
+const formatOptions = (data: Profession[]): PickerOption[] => {
+  return data.map((item: Profession) => {
+    const { name: text, children } = item;
+    const itm: PickerOption = {
+      text,
+      value: text,
+      children: children ? formatOptions(children) : []
+    }
+    if (!itm.children!.length) {
+      delete itm.children
+    }
+    return itm
+  })
+}
+
 // 用户服务类
 export class UserService {
   // 数据转换函数：将后端数据转换为ListContainer期望的格式
@@ -206,7 +232,7 @@ export class UserService {
       date_str = `明天(${weekday})`;
     } else if (start_date.getTime() === day_after_tomorrow.getTime()) {
       date_str = `后天(${weekday})`;
-    } else if(this.is_date_in_this_week(start_time)) {
+    } else if (this.is_date_in_this_week(start_time)) {
       date_str = weekday;
     } else {
       date_str = `${start_time.getFullYear()}-${(start_time.getMonth() + 1).toString().padStart(2, '0')}-${start_time.getDate().toString().padStart(2, '0')}(${weekday})`;
@@ -492,6 +518,39 @@ export class UserService {
       return '';
     }
   }
+
+  // 获取职业树
+  static async getProfessions(): Promise<[] | PickerOption[]> {
+    try {
+      const response = await httpService.post<any>(API_CONFIG.PROFESSIONS);
+      const { code, data, message } = response;
+      if (code === 0) {
+        return formatOptions(data || []);
+      } else {
+        throw new Error(message || '获取职业树失败');
+      }
+    } catch (error) {
+      console.error('获取职业树失败:', error);
+      return [];
+    }
+  }
+
+  // 获取城市树
+  static async getCities(): Promise<[] | PickerOption[]> {
+    try {
+      const response = await httpService.post<any>(API_CONFIG.CITIS);
+      const { code, data, message } = response;
+      if (code === 0) {
+        return formatOptions(data || []);
+      } else {
+        throw new Error(message || '获取城市树失败');
+      }
+    } catch (error) {
+      console.error('获取职业树失败:', error);
+      return [];
+    }
+  }
+
 }
 
 // 从 loginService 移过来的用户相关方法

src/user_pages/downloadBill/index.tsx

@@ -7,6 +7,7 @@ import "./index.scss";
 import { DialogCalendarCard } from "@/components/index";
 // import { CalendarUI } from "@/components";
 import { CommonPopup } from "@/components";
+import httpService from "@/services/httpService";
 
 export enum TransactionSubType {
   All = "",
@@ -25,15 +26,13 @@ interface Option<T> {
   value: T;
 }
 interface TransactionLoadParams {
-  page: number;
-  limit: number;
-  type: TransactionType;
   transaction_sub_type: TransactionSubType;
-  keyword?: string;
+  date_range?: string[];
-  date?: string;
 }
 const DownloadBill: React.FC = () => {
   const [dateRange, setDateRange] = useState({ start: "", end: "" });
+  const [transactionSubType, setTransactionSubType] =
+    useState<TransactionSubType>(TransactionSubType.All);
   const [dateType, setDateType] = useState("week");
   const [visible, setVisible] = useState(false);
   const [show_download_popup, set_show_download_popup] = useState(false);
@@ -77,10 +76,12 @@ const DownloadBill: React.FC = () => {
     }
     switch (range) {
       case "week":
+        setCurrentTimeValue(new Date());
         setDateType("week");
         culculateDateRange("week");
         break;
       case "month":
+        setCurrentTimeValue(new Date());
         setDateType("month");
         culculateDateRange("month");
         break;
@@ -103,7 +104,8 @@ const DownloadBill: React.FC = () => {
   };
   const handlePasswordInput = (e: any) => {
     const value = e.detail.value;
-    const [one = "", two = "", three = "", four = "", five = "", six = ""] = value.split("");
+    const [one = "", two = "", three = "", four = "", five = "", six = ""] =
+      value.split("");
     setPassword([one, two, three, four, five, six]);
     if (value.length === 6) {
       // const timer = setTimeout(() => {
@@ -132,7 +134,7 @@ const DownloadBill: React.FC = () => {
       //   }
       // }, 100);
     }
-  }
+  };
   const transaction_type_options: Option<TransactionSubType>[] = [
     {
       label: "全部",
@@ -157,13 +159,30 @@ const DownloadBill: React.FC = () => {
   ];
   const [load_transactions_params, set_load_transactions_params] =
     useState<TransactionLoadParams>({
-      page: 1,
-      limit: 20,
-      type: TransactionType.All,
       transaction_sub_type: TransactionSubType.All,
-      keyword: "",
+      date_range: [],
-      date: "",
     });
+
+  const handleClose = () => {
+    setTransactionSubType(load_transactions_params.transaction_sub_type);
+    setShowFilterPopup(false);
+  };
+  const handleTypeConfirm = () => {
+    set_load_transactions_params((prev) => {
+      return { ...prev, transaction_sub_type: transactionSubType };
+    });
+    setShowFilterPopup(false);
+  };
+  const handleDownloadBill = async () => {
+    try {
+      const { transaction_sub_type } = load_transactions_params;
+      const { start, end } = dateRange;
+      const date_range = [start, end];
+      await httpService.post("/wallet/download_bill", {transaction_sub_type, date_range});
+    } catch (error) {
+      console.error(error);
+    }
+  };
   return (
     <View className="download_bill_page">
       <View className="hint_content">
@@ -177,10 +196,22 @@ const DownloadBill: React.FC = () => {
             <Text>小程序消息</Text>
           </View>
         </View> */}
-        <View className="form_item" onClick={() => { setShowFilterPopup(true) }}>
+        <View
+          className="form_item"
+          onClick={() => {
+            setShowFilterPopup(true);
+          }}
+        >
           <Text className="title_text">交易类型</Text>
           <View className="value_content arrow">
-            <Text>全部</Text>
+            <Text>
+              {
+                transaction_type_options.find(
+                  (item) =>
+                    item.value === load_transactions_params.transaction_sub_type
+                )?.label
+              }
+            </Text>
           </View>
         </View>
         <View className="form_item">
@@ -195,7 +226,8 @@ const DownloadBill: React.FC = () => {
               近一周
             </View>
             <View
-              className={`option_button ${dateType === "month" ? "active" : ""
+              className={`option_button ${
+                dateType === "month" ? "active" : ""
               }`}
               onClick={() => {
                 selectDateRange("month");
@@ -204,7 +236,8 @@ const DownloadBill: React.FC = () => {
               近一月
             </View>
             <View
-              className={`option_button ${dateType === "custom" ? "active" : ""
+              className={`option_button ${
+                dateType === "custom" ? "active" : ""
               }`}
               onClick={() => {
                 selectDateRange("custom");
@@ -219,16 +252,23 @@ const DownloadBill: React.FC = () => {
             <Text>{dateRange.start}</Text> 至 <Text>{dateRange.end}</Text>
           </View>
         )}
-        {
+        {dateType === "custom" && (
-          dateType === "custom" && (
+          <View
-            <View className="form_item" onClick={() => { setVisible(true); }}>
+            className="form_item"
+            onClick={() => {
+              setVisible(true);
+            }}
+          >
             <Text className="title_text">时间范围</Text>
             <View className="value_content arrow">
-                <Text>{dateRange.start && dateRange.end ? `${dateRange.start} 至 ${dateRange.end}` : "请选择账单时间"}</Text>
+              <Text>
+                {dateRange.start && dateRange.end
+                  ? `${dateRange.start} 至 ${dateRange.end}`
+                  : "请选择账单时间"}
+              </Text>
             </View>
           </View>
-          )
+        )}
-        }
       </View>
       <View className="button_container">
         <Text
@@ -239,7 +279,9 @@ const DownloadBill: React.FC = () => {
         >
           下载记录
         </Text>
-        <Button className="download_button">下载</Button>
+        <Button className="download_button" onClick={handleDownloadBill}>
+          下载
+        </Button>
       </View>
       {visible && (
         <DialogCalendarCard
@@ -264,23 +306,28 @@ const DownloadBill: React.FC = () => {
           <View className="popup_text">{`文件大小：7KB`}</View>
           <View className="popup_text">{`请输入交易密码`}</View>
           <View className="password_container">
-            {
+            {password.map((item, index) => (
-              password.map((item, index) => (
               <View key={index} className="password_item">
                 <Text className="password_text">{item}</Text>
               </View>
-              ))
+            ))}
-            }
           </View>
-          <Input focus={isFocus} type="number" style={{ width: "0", height: "0", opacity: "0" }} value={password.filter(item => item !== "").join("")} maxlength={6} onInput={handlePasswordInput} />
+          <Input
+            focus={isFocus}
+            type="number"
+            style={{ width: "0", height: "0", opacity: "0" }}
+            value={password.filter((item) => item !== "").join("")}
+            maxlength={6}
+            onInput={handlePasswordInput}
+          />
         </View>
       </CommonPopup>
 
       {/* 筛选账单弹窗 */}
       <CommonPopup
         visible={showFilterPopup}
-        onClose={() => setShowFilterPopup(false)}
+        onClose={handleClose}
-        onConfirm={() => { }}
+        onConfirm={handleTypeConfirm}
         title="选择筛选项"
         className="filter_popup"
       >
@@ -293,17 +340,13 @@ const DownloadBill: React.FC = () => {
                   (option: Option<TransactionSubType>) => (
                     <View
                       className={
-                        load_transactions_params.transaction_sub_type ===
+                        transactionSubType === option.value
-                          option.value
                           ? "option_item active"
                           : "option_item"
                       }
                       key={option.value}
                       onClick={() => {
-                        set_load_transactions_params({
+                        setTransactionSubType(option.value);
-                          ...load_transactions_params,
-                          transaction_sub_type: option.value,
-                        });
                       }}
                     >
                       {option.label}

src/user_pages/edit/index.tsx

@@ -1,50 +1,50 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import { View, Text, Image, ScrollView, Button } from '@tarojs/components';
+import { View, Text, Image, ScrollView, Button } from "@tarojs/components";
-import { PopupPicker } from '@/components/Picker/index'
+import { PopupPicker } from "@/components/Picker/index";
-import Taro from '@tarojs/taro';
+import Taro from "@tarojs/taro";
-import './index.scss';
+import "./index.scss";
-import { UserInfo } from '@/components/UserInfo';
+import { UserInfo } from "@/components/UserInfo";
-import { UserService } from '@/services/userService';
+import { UserService, PickerOption } from "@/services/userService";
-import { clear_login_state } from '@/services/loginService';
+import { clear_login_state } from "@/services/loginService";
-import { convert_db_gender_to_display } from '@/utils/genderUtils';
+import { convert_db_gender_to_display } from "@/utils/genderUtils";
-import { EditModal } from '@/components';
+import { EditModal } from "@/components";
 import img from "@/config/images";
 
 const EditProfilePage: React.FC = () => {
   // 用户信息状态
   const [user_info, setUserInfo] = useState<UserInfo>({
-    id: '1',
+    id: "1",
-    nickname: '加载中...',
+    nickname: "加载中...",
-    avatar: require('@/static/userInfo/default_avatar.svg'),
+    avatar: require("@/static/userInfo/default_avatar.svg"),
-    join_date: '加载中...',
+    join_date: "加载中...",
     stats: {
       following: 0,
       friends: 0,
       hosted: 0,
-      participated: 0
+      participated: 0,
     },
-    personal_profile: '加载中...',
+    personal_profile: "加载中...",
-    occupation: '加载中...',
+    occupation: "加载中...",
-    ntrp_level: 'NTRP 3.0',
+    ntrp_level: "NTRP 3.0",
-    phone: '',
+    phone: "",
-    gender: '',
+    gender: "",
-    country: '',
+    country: "",
-    province: '',
+    province: "",
-    city: '',
+    city: "",
   });
 
   // 表单状态
   const [form_data, setFormData] = useState({
-    nickname: '',
+    nickname: "",
-    personal_profile: '',
+    personal_profile: "",
-    occupation: '',
+    occupation: "",
-    ntrp_level: '4.0',
+    ntrp_level: "4.0",
-    phone: '',
+    phone: "",
-    gender: '',
+    gender: "",
-    birthday: '2000-01-01',
+    birthday: "2000-01-01",
-    country: '',
+    country: "",
-    province: '',
+    province: "",
-    city: ''
+    city: "",
   });
 
   // 加载状态
@@ -52,18 +52,44 @@ const EditProfilePage: React.FC = () => {
 
   // 编辑弹窗状态
   const [edit_modal_visible, setEditModalVisible] = useState(false);
-  const [editing_field, setEditingField] = useState<string>('');
+  const [editing_field, setEditingField] = useState<string>("");
   const [gender_picker_visible, setGenderPickerVisible] = useState(false);
   const [birthday_picker_visible, setBirthdayPickerVisible] = useState(false);
   const [location_picker_visible, setLocationPickerVisible] = useState(false);
   const [ntrp_picker_visible, setNtrpPickerVisible] = useState(false);
-  const [occupation_picker_visible, setOccupationPickerVisible] = useState(false);
+  const [occupation_picker_visible, setOccupationPickerVisible] =
+    useState(false);
+
+  // 职业数据
+  const [professions, setProfessions] = useState<PickerOption[]>([]);
+
+  // 城市数据
+  const [cities, setCities] = useState<PickerOption[]>([]);
 
   // 页面加载时初始化数据
   useEffect(() => {
     load_user_info();
+    getProfessions();
+    getCities();
   }, []);
 
+  const getProfessions = async () => {
+    try {
+      const res = await UserService.getProfessions();
+      setProfessions(res);
+    } catch (e) {
+      console.log("获取职业失败：", e);
+    }
+  };
+  const getCities = async () => {
+    try {
+      const res = await UserService.getCities();
+      setCities(res);
+    } catch (e) {
+      console.log("获取职业失败：", e);
+    }
+  };
+
   // 加载用户信息
   const load_user_info = async () => {
     try {
@@ -71,23 +97,23 @@ const EditProfilePage: React.FC = () => {
       const user_data = await UserService.get_user_info();
       setUserInfo(user_data);
       setFormData({
-        nickname: user_data.nickname || '',
+        nickname: user_data.nickname || "",
-        personal_profile: user_data.personal_profile || '',
+        personal_profile: user_data.personal_profile || "",
-        occupation: user_data.occupation || '',
+        occupation: user_data.occupation || "",
-        ntrp_level: user_data.ntrp_level || 'NTRP 4.0',
+        ntrp_level: user_data.ntrp_level || "NTRP 4.0",
-        phone: user_data.phone || '',
+        phone: user_data.phone || "",
-        gender: user_data.gender || '',
+        gender: user_data.gender || "",
-        birthday: user_data.birthday || '',
+        birthday: user_data.birthday || "",
-        country: user_data.country || '',
+        country: user_data.country || "",
-        province: user_data.province || '',
+        province: user_data.province || "",
-        city: user_data.city || ''
+        city: user_data.city || "",
       });
     } catch (error) {
-      console.error('加载用户信息失败:', error);
+      console.error("加载用户信息失败:", error);
       Taro.showToast({
-        title: '加载用户信息失败',
+        title: "加载用户信息失败",
-        icon: 'error',
+        icon: "error",
-        duration: 2000
+        duration: 2000,
       });
     } finally {
       setLoading(false);
@@ -98,51 +124,51 @@ const EditProfilePage: React.FC = () => {
   const handle_avatar_upload = () => {
     Taro.chooseImage({
       count: 1,
-      sizeType: ['compressed'],
+      sizeType: ["compressed"],
-      sourceType: ['album', 'camera'],
+      sourceType: ["album", "camera"],
       success: async (res) => {
         const tempFilePath = res.tempFilePaths[0];
         try {
           const avatar_url = await UserService.upload_avatar(tempFilePath);
-          setUserInfo(prev => ({ ...prev, avatar: avatar_url }));
+          setUserInfo((prev) => ({ ...prev, avatar: avatar_url }));
           Taro.showToast({
-            title: '头像上传成功',
+            title: "头像上传成功",
-            icon: 'success'
+            icon: "success",
           });
         } catch (error) {
-          console.error('头像上传失败:', error);
+          console.error("头像上传失败:", error);
           Taro.showToast({
-            title: '头像上传失败',
+            title: "头像上传失败",
-            icon: 'none'
+            icon: "none",
           });
         }
-      }
+      },
     });
   };
 
   // 处理编辑弹窗
   const handle_open_edit_modal = (field: string) => {
-    if (field === 'gender') {
+    if (field === "gender") {
       setGenderPickerVisible(true);
       return;
     }
-    if (field === 'birthday') {
+    if (field === "birthday") {
       setBirthdayPickerVisible(true);
       return;
     }
-    if (field === 'location') {
+    if (field === "location") {
       setLocationPickerVisible(true);
       return;
     }
-    if (field === 'ntrp_level') {
+    if (field === "ntrp_level") {
       setNtrpPickerVisible(true);
       return;
     }
-    if (field === 'occupation') {
+    if (field === "occupation") {
       setOccupationPickerVisible(true);
       return;
     }
-    if (field === 'nickname') {
+    if (field === "nickname") {
       // 手动输入
       setEditingField(field);
       setEditModalVisible(true);
@@ -159,60 +185,67 @@ const EditProfilePage: React.FC = () => {
       await UserService.update_user_info(update_data);
 
       // 更新本地状态
-      setFormData(prev => ({ ...prev, [editing_field]: value }));
+      setFormData((prev) => ({ ...prev, [editing_field]: value }));
-      setUserInfo(prev => ({ ...prev, [editing_field]: value }));
+      setUserInfo((prev) => ({ ...prev, [editing_field]: value }));
 
       // 关闭弹窗
       setEditModalVisible(false);
-      setEditingField('');
+      setEditingField("");
 
       // 显示成功提示
       Taro.showToast({
-        title: '保存成功',
+        title: "保存成功",
-        icon: 'success'
+        icon: "success",
       });
     } catch (error) {
-      console.error('保存失败:', error);
+      console.error("保存失败:", error);
       Taro.showToast({
-        title: '保存失败',
+        title: "保存失败",
-        icon: 'error'
+        icon: "error",
       });
     }
   };
 
   const handle_edit_modal_cancel = () => {
     setEditModalVisible(false);
-    setEditingField('');
+    setEditingField("");
   };
 
   // 处理字段编辑
-  const handle_field_edit = async (field: string | { [key: string]: string }, value?: string) => {
+  const handle_field_edit = async (
+    field: string | { [key: string]: string },
+    value?: string
+  ) => {
     try {
-      if (typeof field === 'object' && field !== null && !Array.isArray(field)) {
+      if (
+        typeof field === "object" &&
+        field !== null &&
+        !Array.isArray(field)
+      ) {
         await UserService.update_user_info({ ...field });
         // 更新本地状态
-        setFormData(prev => ({ ...prev, ...field }));
+        setFormData((prev) => ({ ...prev, ...field }));
-        setUserInfo(prev => ({ ...prev, ...field }));
+        setUserInfo((prev) => ({ ...prev, ...field }));
       } else {
         // 调用更新用户信息接口，只传递修改的字段
         const update_data = { [field as string]: value };
         await UserService.update_user_info(update_data);
 
         // 更新本地状态
-        setFormData(prev => ({ ...prev, [field as string]: value }));
+        setFormData((prev) => ({ ...prev, [field as string]: value }));
-        setUserInfo(prev => ({ ...prev, [field as string]: value }));
+        setUserInfo((prev) => ({ ...prev, [field as string]: value }));
       }
 
       // 显示成功提示
       Taro.showToast({
-        title: '保存成功',
+        title: "保存成功",
-        icon: 'success'
+        icon: "success",
       });
     } catch (error) {
-      console.error('保存失败:', error);
+      console.error("保存失败:", error);
       Taro.showToast({
-        title: '保存失败',
+        title: "保存失败",
-        icon: 'error'
+        icon: "error",
       });
     }
   };
@@ -220,13 +253,19 @@ const EditProfilePage: React.FC = () => {
   // 处理性别选择
   const handle_gender_change = (e: any) => {
     const gender_value = e[0];
-    handle_field_edit('gender', gender_value);
+    handle_field_edit("gender", gender_value);
   };
 
   // 处理生日选择
   const handle_birthday_change = (e: any) => {
     const [year, month, day] = e;
-    handle_field_edit('birthday', `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`);
+    handle_field_edit(
+      "birthday",
+      `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(
+        2,
+        "0"
+      )}`
+    );
   };
 
   // 处理地区选择
@@ -238,61 +277,66 @@ const EditProfilePage: React.FC = () => {
   // 处理NTRP水平选择
   const handle_ntrp_level_change = (e: any) => {
     const ntrp_level_value = e[0];
-    handle_field_edit('ntrp_level', ntrp_level_value);
+    handle_field_edit("ntrp_level", ntrp_level_value);
   };
 
   // 处理职业选择
   const handle_occupation_change = (e: any) => {
     const [country, province] = e;
-    handle_field_edit('occupation', `${country} ${province}`);
+    handle_field_edit("occupation", `${country} ${province}`);
   };
 
   // 处理退出登录
   const handle_logout = () => {
     Taro.showModal({
-      title: '确认退出',
+      title: "确认退出",
-      content: '确定要退出登录吗？',
+      content: "确定要退出登录吗？",
       success: (res) => {
         if (res.confirm) {
           // 清除用户数据
           clear_login_state();
 
           Taro.reLaunch({
-            url: '/login_pages/index/index'
+            url: "/login_pages/index/index",
           });
         }
-      }
+      },
     });
   };
 
   const onGetPhoneNumber = async (e) => {
     if (!e.detail || !e.detail.code) {
       Taro.showToast({
-        title: '获取手机号失败，请重试',
+        title: "获取手机号失败，请重试",
-        icon: 'none',
+        icon: "none",
-        duration: 2000
+        duration: 2000,
       });
       return;
     }
     try {
       const phone = await UserService.parse_phone(e.detail.code);
-      handle_field_edit('phone', phone);
+      handle_field_edit("phone", phone);
     } catch (e) {
-      console.error('解析手机号失败:', e);
+      console.error("解析手机号失败:", e);
       Taro.showToast({
-        title: '解析手机号失败，请重试',
+        title: "解析手机号失败，请重试",
-        icon: 'none',
+        icon: "none",
-        duration: 2000
+        duration: 2000,
       });
     }
-  }
+  };
 
   return (
     <View className="edit_profile_page">
       {/* 导航栏 */}
       <View className="custom-navbar">
         <View className="detail-navigator">
-          <View className="detail-navigator-back" onClick={() => { Taro.navigateBack() }}>
+          <View
+            className="detail-navigator-back"
+            onClick={() => {
+              Taro.navigateBack();
+            }}
+          >
             <Image
               className="detail-navigator-back-icon"
               src={img.ICON_NAVIGATOR_BACK}
@@ -315,26 +359,35 @@ const EditProfilePage: React.FC = () => {
                 <View className="avatar_overlay">
                   <Image
                     className="upload_icon"
-                    src={require('@/static/userInfo/edit2.svg')}
+                    src={require("@/static/userInfo/edit2.svg")}
                   />
                 </View>
               </View>
-
-
             </View>
 
             {/* 基本信息编辑 */}
             <View className="form_section">
               {/* 名字 */}
               <View className="form_group">
-                <View className="form_item" onClick={() => handle_open_edit_modal('nickname')}>
+                <View
+                  className="form_item"
+                  onClick={() => handle_open_edit_modal("nickname")}
+                >
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/user.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/user.svg")}
+                    />
                     <Text className="item_label">名字</Text>
                   </View>
                   <View className="item_right">
-                    <Text className="item_value">{form_data.nickname || '188的王晨'}</Text>
+                    <Text className="item_value">
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                      {form_data.nickname || "188的王晨"}
+                    </Text>
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
                 <View className="divider"></View>
@@ -342,14 +395,25 @@ const EditProfilePage: React.FC = () => {
 
               {/* 性别 */}
               <View className="form_group">
-                <View className="form_item" onClick={() => handle_open_edit_modal('gender')}>
+                <View
+                  className="form_item"
+                  onClick={() => handle_open_edit_modal("gender")}
+                >
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/gender.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/gender.svg")}
+                    />
                     <Text className="item_label">性别</Text>
                   </View>
                   <View className="item_right">
-                    <Text className="item_value">{convert_db_gender_to_display(form_data.gender)}</Text>
+                    <Text className="item_value">
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                      {convert_db_gender_to_display(form_data.gender)}
+                    </Text>
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
                 <View className="divider"></View>
@@ -357,14 +421,23 @@ const EditProfilePage: React.FC = () => {
 
               {/* 生日 */}
               <View className="form_group">
-                <View className="form_item" onClick={() => handle_open_edit_modal('birthday')}>
+                <View
+                  className="form_item"
+                  onClick={() => handle_open_edit_modal("birthday")}
+                >
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/birthday.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/birthday.svg")}
+                    />
                     <Text className="item_label">生日</Text>
                   </View>
                   <View className="item_right">
                     <Text className="item_value">{form_data.birthday}</Text>
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
               </View>
@@ -373,16 +446,26 @@ const EditProfilePage: React.FC = () => {
             {/* 简介编辑 */}
             <View className="form_section">
               <View className="form_group">
-                <View className="form_item" onClick={() => handle_open_edit_modal('personal_profile')}>
+                <View
+                  className="form_item"
+                  onClick={() => handle_open_edit_modal("personal_profile")}
+                >
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/introduce.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/introduce.svg")}
+                    />
                     <Text className="item_label">简介</Text>
                   </View>
                   <View className="item_right">
                     <Text className="item_value">
-                      {form_data.personal_profile.replace(/\n/g, ' ') || '介绍一下自己'}
+                      {form_data.personal_profile.replace(/\n/g, " ") ||
+                        "介绍一下自己"}
                     </Text>
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
               </View>
@@ -392,40 +475,67 @@ const EditProfilePage: React.FC = () => {
             <View className="form_section">
               <View className="form_group">
                 {/* 地区 */}
-                <View className="form_item" onClick={() => handle_open_edit_modal('location')}>
+                <View
+                  className="form_item"
+                  onClick={() => handle_open_edit_modal("location")}
+                >
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/gender.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/gender.svg")}
+                    />
                     <Text className="item_label">地区</Text>
                   </View>
                   <View className="item_right">
                     <Text className="item_value">{`${form_data.country} ${form_data.province} ${form_data.city}`}</Text>
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
                 <View className="divider"></View>
 
                 {/* NTRP水平 */}
-                <View className="form_item" onClick={() => handle_open_edit_modal('ntrp_level')}>
+                <View
+                  className="form_item"
+                  onClick={() => handle_open_edit_modal("ntrp_level")}
+                >
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/ball.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/ball.svg")}
+                    />
                     <Text className="item_label">NTRP 水平</Text>
                   </View>
                   <View className="item_right">
                     <Text className="item_value">{form_data.ntrp_level}</Text>
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
                 <View className="divider"></View>
 
                 {/* 职业 */}
-                <View className="form_item" onClick={() => handle_open_edit_modal('occupation')}>
+                <View
+                  className="form_item"
+                  onClick={() => handle_open_edit_modal("occupation")}
+                >
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/business.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/business.svg")}
+                    />
                     <Text className="item_label">职业</Text>
                   </View>
                   <View className="item_right">
                     <Text className="item_value">{form_data.occupation}</Text>
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
               </View>
@@ -436,7 +546,10 @@ const EditProfilePage: React.FC = () => {
               <View className="form_group">
                 <View className="form_item">
                   <View className="item_left">
-                    <Image className="item_icon" src={require('@/static/userInfo/phone.svg')} />
+                    <Image
+                      className="item_icon"
+                      src={require("@/static/userInfo/phone.svg")}
+                    />
                     <Text className="item_label">手机</Text>
                   </View>
                   <View className="item_right">
@@ -448,8 +561,17 @@ const EditProfilePage: React.FC = () => {
                       onInput={handle_phone_input}
                       onBlur={handle_phone_blur}
                     /> */}
-                    <Button className={form_data.phone ? '' : 'placeholer'} openType='getPhoneNumber' onGetPhoneNumber={onGetPhoneNumber}>{form_data.phone || '未绑定'}</Button>
+                    <Button
-                    <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
+                      className={form_data.phone ? "" : "placeholer"}
+                      openType="getPhoneNumber"
+                      onGetPhoneNumber={onGetPhoneNumber}
+                    >
+                      {form_data.phone || "未绑定"}
+                    </Button>
+                    <Image
+                      className="arrow_icon"
+                      src={require("@/static/list/icon-list-right-arrow.svg")}
+                    />
                   </View>
                 </View>
                 <View className="divider"></View>
@@ -477,63 +599,94 @@ const EditProfilePage: React.FC = () => {
       <EditModal
         visible={edit_modal_visible}
         type={editing_field}
-        title={editing_field === 'nickname' ? '编辑名字' : '编辑简介'}
+        title={editing_field === "nickname" ? "编辑名字" : "编辑简介"}
-        placeholder={editing_field === 'nickname' ? '请输入您的名字' : '介绍一下你的喜好，或者训练习惯'}
+        placeholder={
-        initialValue={form_data[editing_field as keyof typeof form_data] || ''}
+          editing_field === "nickname"
-        maxLength={editing_field === 'nickname' ? 20 : 100}
+            ? "请输入您的名字"
+            : "介绍一下你的喜好，或者训练习惯"
+        }
+        initialValue={form_data[editing_field as keyof typeof form_data] || ""}
+        maxLength={editing_field === "nickname" ? 20 : 100}
         onSave={handle_edit_modal_save}
         onCancel={handle_edit_modal_cancel}
-        validationMessage={editing_field === 'nickname' ? '请填写 1-20 个字符' : '请填写 2-100 个字符'}
+        validationMessage={
+          editing_field === "nickname"
+            ? "请填写 1-20 个字符"
+            : "请填写 2-100 个字符"
+        }
       />
       {/* 性别选择弹窗 */}
-      {gender_picker_visible && <PopupPicker
+      {gender_picker_visible && (
+        <PopupPicker
           options={[
-          [{ text: '男', value: '0' },
+            [
-          { text: '女', value: '1' },
+              { text: "男", value: "0" },
-          { text: '保密', value: '2' }
+              { text: "女", value: "1" },
-          ]]}
+              { text: "保密", value: "2" },
+            ],
+          ]}
           visible={gender_picker_visible}
           setvisible={setGenderPickerVisible}
           value={[form_data.gender]}
-        onChange={handle_gender_change} />}
+          onChange={handle_gender_change}
+        />
+      )}
       {/* 生日选择弹窗 */}
-      {birthday_picker_visible && <PopupPicker
+      {birthday_picker_visible && (
+        <PopupPicker
           visible={birthday_picker_visible}
           setvisible={setBirthdayPickerVisible}
-        value={[new Date(form_data.birthday).getFullYear(), new Date(form_data.birthday).getMonth() + 1, new Date(form_data.birthday).getDate()]}
+          value={[
+            new Date(form_data.birthday).getFullYear(),
+            new Date(form_data.birthday).getMonth() + 1,
+            new Date(form_data.birthday).getDate(),
+          ]}
           type="day"
-        onChange={handle_birthday_change} />}
+          onChange={handle_birthday_change}
+        />
+      )}
       {/* 地区选择弹窗 */}
-      {location_picker_visible && <PopupPicker
+      {location_picker_visible && (
-        options={[[{ text: "中国", value: "中国" }], [{ text: "上海", value: "上海" }], [{ text: "浦东新区", value: "浦东新区" }, {text: "静安区", value: "静安区"}]]}
+        <PopupPicker
+          options={cities}
           visible={location_picker_visible}
           setvisible={setLocationPickerVisible}
           value={[form_data.country, form_data.province, form_data.city]}
-        onChange={handle_location_change} />}
+          onChange={handle_location_change}
+        />
+      )}
       {/* NTRP水平选择弹窗 */}
-      {ntrp_picker_visible && <PopupPicker
+      {ntrp_picker_visible && (
+        <PopupPicker
           options={[
-          [{ text: '1.5', value: '1.5' },
+            [
-          { text: '2.0', value: '2.0' },
+              { text: "1.5", value: "1.5" },
-          { text: '2.5', value: '2.5' },
+              { text: "2.0", value: "2.0" },
-          { text: '3.0', value: '3.0' },
+              { text: "2.5", value: "2.5" },
-          { text: '3.5', value: '3.5' },
+              { text: "3.0", value: "3.0" },
-          { text: '4.0', value: '4.0' },
+              { text: "3.5", value: "3.5" },
-          { text: '4.5', value: '4.5' },
+              { text: "4.0", value: "4.0" },
-          ]]}
+              { text: "4.5", value: "4.5" },
+            ],
+          ]}
           type="ntrp"
           img={user_info.avatar}
           visible={ntrp_picker_visible}
           setvisible={setNtrpPickerVisible}
           value={[form_data.ntrp_level]}
-        onChange={handle_ntrp_level_change} />}
+          onChange={handle_ntrp_level_change}
+        />
+      )}
       {/* 职业选择弹窗 */}
-      {occupation_picker_visible && <PopupPicker
+      {occupation_picker_visible && (
-        options={[[{ text: "时尚", value: "时尚" }], [{ text: "美妆博主", value: "美妆博主" },{ text: "设计师", value: "设计师" }]]}
+        <PopupPicker
+          options={professions}
           visible={occupation_picker_visible}
           setvisible={setOccupationPickerVisible}
-        value={[...form_data.occupation.split(' ')]}
+          value={[...form_data.occupation.split(" ")]}
-        onChange={handle_occupation_change} />}
+          onChange={handle_occupation_change}
+        />
+      )}
     </View>
   );
 };