UI优化

src/components/UserInfo/index.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Taro from "@tarojs/taro";
 import { View, Text, Image, Button } from "@tarojs/components";
 import "./index.scss";
 
 import { EditModal } from "@/components";
-import { UserService } from "@/services/userService";
+import { UserService, PickerOption } from "@/services/userService";
 import { PopupPicker } from "@/components/Picker/index";
 
 // 用户信息接口
@@ -76,6 +76,34 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
   // 表单状态
   const [form_data, setFormData] = useState<UserInfo>({ ...user_info });
 
+  // 职业数据
+  const [professions, setProfessions] = useState<PickerOption[]>([]);
+
+  // 城市数据
+  const [cities, setCities] = useState<PickerOption[]>([]);
+
+  // 页面加载时初始化数据
+  useEffect(() => {
+    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 handle_open_edit_modal = (field: string) => {
     if (field === "gender") {
@@ -416,6 +444,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       {/* 性别选择弹窗 */}
       {gender_picker_visible && (
         <PopupPicker
+          showHeader={true}
+          title="选择性别"
           options={[
             [
               { text: "男", value: "0" },
@@ -432,14 +462,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       {/* 地区选择弹窗 */}
       {location_picker_visible && (
         <PopupPicker
-          options={[
-            [{ text: "中国", value: "中国" }],
-            [{ text: "上海", value: "上海" }],
-            [
-              { text: "浦东新区", value: "浦东新区" },
-              { text: "静安区", value: "静安区" },
-            ],
-          ]}
+          showHeader={true}
+          title="选择地区"
+          options={cities}
           visible={location_picker_visible}
           setvisible={setLocationPickerVisible}
           value={[form_data.country, form_data.province, form_data.city]}
@@ -449,6 +474,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       {/* NTRP水平选择弹窗 */}
       {ntrp_picker_visible && (
         <PopupPicker
+          showHeader={true}
+          title="选择 NTRP 自评水平"
           options={[
             [
               { text: "1.5", value: "1.5" },
@@ -471,13 +498,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       {/* 职业选择弹窗 */}
       {occupation_picker_visible && (
         <PopupPicker
-          options={[
-            [{ text: "时尚", value: "时尚" }],
-            [
-              { text: "美妆博主", value: "美妆博主" },
-              { text: "设计师", value: "设计师" },
-            ],
-          ]}
+          showHeader={true}
+          title="选择职业"
+          options={professions}
           visible={occupation_picker_visible}
           setvisible={setOccupationPickerVisible}
           value={[...form_data.occupation.split(" ")]}
@@ -621,9 +644,8 @@ export const GameTabs: React.FC<GameTabsProps> = ({
           <Text className="tab_text">{hosted_text}</Text>
         </View>
         <View
-          className={`tab_item ${
-            active_tab === "participated" ? "active" : ""
-          }`}
+          className={`tab_item ${active_tab === "participated" ? "active" : ""
+            }`}
           onClick={() => on_tab_change("participated")}
         >
           <Text className="tab_text">{participated_text}</Text>