新建store存储地区和职业picker选项

This commit is contained in:
2025-10-17 17:10:15 +08:00
parent f3ab0020d3
commit 9ef35267cf
4 changed files with 96 additions and 55 deletions

View File

@@ -8,6 +8,7 @@ import { UserService, PickerOption } from "@/services/userService";
import { PopupPicker } from "@/components/Picker/index"; import { PopupPicker } from "@/components/Picker/index";
import { useUserActions } from "@/store/userStore"; import { useUserActions } from "@/store/userStore";
import { UserInfoType } from "@/services/userService"; import { UserInfoType } from "@/services/userService";
import { useCities, useProfessions } from "@/store/pickerOptionsStore";
// 用户信息接口 // 用户信息接口
// export interface UserInfo { // export interface UserInfo {
@@ -82,33 +83,33 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
}); });
// 职业数据 // 职业数据
const [professions, setProfessions] = useState<PickerOption[]>([]); const professions = useProfessions();
// 城市数据 // 城市数据
const [cities, setCities] = useState<PickerOption[]>([]); const cities = useCities();
// 页面加载时初始化数据 // 页面加载时初始化数据
useEffect(() => { // useEffect(() => {
getProfessions(); // getProfessions();
getCities(); // getCities();
}, []); // }, []);
const getProfessions = async () => { // const getProfessions = async () => {
try { // try {
const res = await UserService.getProfessions(); // const res = await UserService.getProfessions();
setProfessions(res); // setProfessions(res);
} catch (e) { // } catch (e) {
console.log("获取职业失败:", e); // console.log("获取职业失败:", e);
} // }
}; // };
const getCities = async () => { // const getCities = async () => {
try { // try {
const res = await UserService.getCities(); // const res = await UserService.getCities();
setCities(res); // setCities(res);
} catch (e) { // } catch (e) {
console.log("获取职业失败:", e); // console.log("获取职业失败:", e);
} // }
}; // };
// 处理编辑弹窗 // 处理编辑弹窗
const handle_open_edit_modal = (field: string) => { const handle_open_edit_modal = (field: string) => {
if (field === "gender") { if (field === "gender") {
@@ -223,8 +224,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
// 处理职业选择 // 处理职业选择
const handle_occupation_change = (e: any) => { const handle_occupation_change = (e: any) => {
const [country, province] = e; const [country, province, city] = e;
handle_field_edit("occupation", `${country} ${province}`); handle_field_edit("occupation", `${country} ${province} ${city}`);
}; };
const handle_edit_modal_cancel = () => { const handle_edit_modal_cancel = () => {
setEditModalVisible(false); setEditModalVisible(false);
@@ -401,7 +402,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
{user_info.occupation ? ( {user_info.occupation ? (
<View className="tag_item"> <View className="tag_item">
<Text className="tag_text"> <Text className="tag_text">
{user_info.occupation.split(" ")[1]} {user_info.occupation.split(" ")[2]}
</Text> </Text>
</View> </View>
) : is_current_user ? ( ) : is_current_user ? (

View File

@@ -0,0 +1,39 @@
import { create } from "zustand";
import { UserService } from "@/services/userService";
export interface PickerOptionState {
cities: any[];
professions: any[];
getCities: () => Promise<any>;
getProfessions: () => Promise<any>;
}
export const usePickerOption = create<PickerOptionState>((set) => ({
cities: [],
professions: [],
getCities: async () => {
try {
const res = await UserService.getCities();
set({ cities: res });
return res;
} catch (e) {
console.log("获取城市列表失败:", e);
throw e;
}
},
getProfessions: async () => {
try {
const res = await UserService.getProfessions();
set({ professions: res });
return res;
} catch (e) {
console.log("获取职业失败:", e);
throw e;
}
},
}));
export const useCities = () => usePickerOption((state) => state.cities);
export const useProfessions = () =>
usePickerOption((state) => state.professions);

View File

@@ -11,6 +11,7 @@ import img from "@/config/images";
import CommonDialog from "@/components/CommonDialog"; import CommonDialog from "@/components/CommonDialog";
import { useUserActions, useUserInfo } from "@/store/userStore"; import { useUserActions, useUserInfo } from "@/store/userStore";
import { UserInfoType } from "@/services/userService"; import { UserInfoType } from "@/services/userService";
import { useCities, useProfessions } from "@/store/pickerOptionsStore";
const EditProfilePage: React.FC = () => { const EditProfilePage: React.FC = () => {
const { updateUserInfo } = useUserActions(); const { updateUserInfo } = useUserActions();
@@ -46,10 +47,10 @@ const EditProfilePage: React.FC = () => {
useState(false); useState(false);
// 职业数据 // 职业数据
const [professions, setProfessions] = useState<PickerOption[]>([]); const professions = useProfessions();
// 城市数据 // 城市数据
const [cities, setCities] = useState<PickerOption[]>([]); const cities = useCities();
// 监听store中的用户信息变化同步到表单状态 // 监听store中的用户信息变化同步到表单状态
useEffect(() => { useEffect(() => {
@@ -70,27 +71,27 @@ const EditProfilePage: React.FC = () => {
}, [user_info]); }, [user_info]);
// 页面加载时初始化数据 // 页面加载时初始化数据
useEffect(() => { // useEffect(() => {
getCities(); // getCities();
getProfessions(); // getProfessions();
}, []); // }, []);
const getProfessions = async () => { // const getProfessions = async () => {
try { // try {
const res = await UserService.getProfessions(); // const res = await UserService.getProfessions();
setProfessions(res); // setProfessions(res);
} catch (e) { // } catch (e) {
console.log("获取职业失败:", e); // console.log("获取职业失败:", e);
} // }
}; // };
const getCities = async () => { // const getCities = async () => {
try { // try {
const res = await UserService.getCities(); // const res = await UserService.getCities();
setCities(res); // setCities(res);
} catch (e) { // } catch (e) {
console.log("获取职业失败:", e); // console.log("获取城市列表失败:", e);
} // }
}; // };
// 加载用户信息 // 加载用户信息
// const load_user_info = async () => { // const load_user_info = async () => {
@@ -281,8 +282,8 @@ const EditProfilePage: React.FC = () => {
// 处理职业选择 // 处理职业选择
const handle_occupation_change = (e: any) => { const handle_occupation_change = (e: any) => {
const [country, province] = e; const [country, province, city] = e;
handle_field_edit("occupation", `${country} ${province}`); handle_field_edit("occupation", `${country} ${province} ${city}`);
}; };
// 处理退出登录 // 处理退出登录

View File

@@ -10,9 +10,10 @@ import { TennisMatch } from "@/../types/list/types";
import { withAuth, NTRPTestEntryCard } from "@/components"; import { withAuth, NTRPTestEntryCard } from "@/components";
import { EvaluateScene } from "@/store/evaluateStore"; import { EvaluateScene } from "@/store/evaluateStore";
import { useUserInfo } from "@/store/userStore"; import { useUserInfo } from "@/store/userStore";
import { UserInfoType } from "@/services/userService"; import { usePickerOption } from "@/store/pickerOptionsStore";
const MyselfPage: React.FC = () => { const MyselfPage: React.FC = () => {
const pickerOption = usePickerOption();
// 获取页面参数 // 获取页面参数
const instance = Taro.getCurrentInstance(); const instance = Taro.getCurrentInstance();
const user_id = instance.router?.params?.userid || ""; const user_id = instance.router?.params?.userid || "";
@@ -64,11 +65,10 @@ const MyselfPage: React.FC = () => {
// } // }
// }; // };
// useEffect(() => { useEffect(() => {
// if (user_info.id) { pickerOption.getCities();
// load_game_data(); // 在 user_info 更新后调用 pickerOption.getProfessions();
// } }, []);
// }, [user_info]);
// 页面加载时获取数据 // 页面加载时获取数据
// useEffect(() => { // useEffect(() => {