优化个人页
This commit is contained in:
@@ -3,53 +3,36 @@ import { View, Text, Image, ScrollView, Button } from "@tarojs/components";
|
||||
import { PopupPicker } from "@/components/Picker/index";
|
||||
import Taro from "@tarojs/taro";
|
||||
import "./index.scss";
|
||||
import { UserInfo } from "@/components/UserInfo";
|
||||
import { UserService, PickerOption } from "@/services/userService";
|
||||
import { clear_login_state } from "@/services/loginService";
|
||||
import { convert_db_gender_to_display } from "@/utils/genderUtils";
|
||||
import { EditModal } from "@/components";
|
||||
import img from "@/config/images";
|
||||
import CommonDialog from "@/components/CommonDialog";
|
||||
import { useUserActions, useUserInfo } from "@/store/userStore";
|
||||
import { UserInfoType } from "@/services/userService";
|
||||
|
||||
const EditProfilePage: React.FC = () => {
|
||||
// 用户信息状态
|
||||
const [user_info, setUserInfo] = useState<UserInfo>({
|
||||
id: "1",
|
||||
nickname: "加载中...",
|
||||
avatar: require("@/static/userInfo/default_avatar.svg"),
|
||||
join_date: "加载中...",
|
||||
stats: {
|
||||
following: 0,
|
||||
friends: 0,
|
||||
hosted: 0,
|
||||
participated: 0,
|
||||
},
|
||||
personal_profile: "加载中...",
|
||||
occupation: "加载中...",
|
||||
ntrp_level: "NTRP 3.0",
|
||||
phone: "",
|
||||
gender: "",
|
||||
country: "",
|
||||
province: "",
|
||||
city: "",
|
||||
});
|
||||
const { updateUserInfo } = useUserActions();
|
||||
// 直接从store获取用户信息，确保响应式更新
|
||||
const user_info = useUserInfo();
|
||||
|
||||
// 表单状态
|
||||
// 表单状态，基于store中的用户信息初始化
|
||||
const [form_data, setFormData] = useState({
|
||||
nickname: "",
|
||||
personal_profile: "",
|
||||
occupation: "",
|
||||
ntrp_level: "4.0",
|
||||
phone: "",
|
||||
gender: "",
|
||||
birthday: "2000-01-01",
|
||||
country: "",
|
||||
province: "",
|
||||
city: "",
|
||||
nickname: (user_info as UserInfoType)?.nickname || "",
|
||||
personal_profile: (user_info as UserInfoType)?.personal_profile || "",
|
||||
occupation: (user_info as UserInfoType)?.occupation || "",
|
||||
ntrp_level: (user_info as UserInfoType)?.ntrp_level || "4.0",
|
||||
phone: (user_info as UserInfoType)?.phone || "",
|
||||
gender: (user_info as UserInfoType)?.gender || "",
|
||||
birthday: (user_info as UserInfoType)?.birthday || "2000-01-01",
|
||||
country: (user_info as UserInfoType)?.country || "",
|
||||
province: (user_info as UserInfoType)?.province || "",
|
||||
city: (user_info as UserInfoType)?.city || "",
|
||||
});
|
||||
|
||||
// 加载状态
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
|
||||
// 编辑弹窗状态
|
||||
@@ -68,11 +51,28 @@ const EditProfilePage: React.FC = () => {
|
||||
// 城市数据
|
||||
const [cities, setCities] = useState<PickerOption[]>([]);
|
||||
|
||||
// 监听store中的用户信息变化，同步到表单状态
|
||||
useEffect(() => {
|
||||
if (user_info && Object.keys(user_info).length > 0) {
|
||||
setFormData({
|
||||
nickname: (user_info as UserInfoType)?.nickname || "",
|
||||
personal_profile: (user_info as UserInfoType)?.personal_profile || "",
|
||||
occupation: (user_info as UserInfoType)?.occupation || "",
|
||||
ntrp_level: (user_info as UserInfoType)?.ntrp_level || "4.0",
|
||||
phone: (user_info as UserInfoType)?.phone || "",
|
||||
gender: (user_info as UserInfoType)?.gender || "",
|
||||
birthday: (user_info as UserInfoType)?.birthday || "2000-01-01",
|
||||
country: (user_info as UserInfoType)?.country || "",
|
||||
province: (user_info as UserInfoType)?.province || "",
|
||||
city: (user_info as UserInfoType)?.city || "",
|
||||
});
|
||||
}
|
||||
}, [user_info]);
|
||||
|
||||
// 页面加载时初始化数据
|
||||
useEffect(() => {
|
||||
load_user_info();
|
||||
getProfessions();
|
||||
getCities();
|
||||
getProfessions();
|
||||
}, []);
|
||||
|
||||
const getProfessions = async () => {
|
||||
@@ -93,34 +93,34 @@ const EditProfilePage: React.FC = () => {
|
||||
};
|
||||
|
||||
// 加载用户信息
|
||||
const load_user_info = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const user_data = await UserService.get_user_info();
|
||||
setUserInfo(user_data);
|
||||
setFormData({
|
||||
nickname: user_data.nickname || "",
|
||||
personal_profile: user_data.personal_profile || "",
|
||||
occupation: user_data.occupation || "",
|
||||
ntrp_level: user_data.ntrp_level || "NTRP 4.0",
|
||||
phone: user_data.phone || "",
|
||||
gender: user_data.gender || "",
|
||||
birthday: user_data.birthday || "",
|
||||
country: user_data.country || "",
|
||||
province: user_data.province || "",
|
||||
city: user_data.city || "",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载用户信息失败:", error);
|
||||
Taro.showToast({
|
||||
title: "加载用户信息失败",
|
||||
icon: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// const load_user_info = async () => {
|
||||
// try {
|
||||
// setLoading(true);
|
||||
// const user_data = await UserService.get_user_info();
|
||||
// setUserInfo(user_data);
|
||||
// setFormData({
|
||||
// nickname: user_data.nickname || "",
|
||||
// personal_profile: user_data.personal_profile || "",
|
||||
// occupation: user_data.occupation || "",
|
||||
// ntrp_level: user_data.ntrp_level || "NTRP 4.0",
|
||||
// phone: user_data.phone || "",
|
||||
// gender: user_data.gender || "",
|
||||
// birthday: user_data.birthday || "",
|
||||
// country: user_data.country || "",
|
||||
// province: user_data.province || "",
|
||||
// city: user_data.city || "",
|
||||
// });
|
||||
// } catch (error) {
|
||||
// console.error("加载用户信息失败:", error);
|
||||
// Taro.showToast({
|
||||
// title: "加载用户信息失败",
|
||||
// icon: "error",
|
||||
// duration: 2000,
|
||||
// });
|
||||
// } finally {
|
||||
// setLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// 处理头像上传
|
||||
const handle_avatar_upload = () => {
|
||||
@@ -184,11 +184,10 @@ const EditProfilePage: React.FC = () => {
|
||||
try {
|
||||
// 调用更新用户信息接口，只传递修改的字段
|
||||
const update_data = { [editing_field]: value };
|
||||
await UserService.update_user_info(update_data);
|
||||
await updateUserInfo(update_data);
|
||||
|
||||
// 更新本地状态
|
||||
// 更新表单状态（store会自动更新）
|
||||
setFormData((prev) => ({ ...prev, [editing_field]: value }));
|
||||
setUserInfo((prev) => ({ ...prev, [editing_field]: value }));
|
||||
|
||||
// 关闭弹窗
|
||||
setEditModalVisible(false);
|
||||
@@ -224,20 +223,18 @@ const EditProfilePage: React.FC = () => {
|
||||
field !== null &&
|
||||
!Array.isArray(field)
|
||||
) {
|
||||
await UserService.update_user_info({ ...field });
|
||||
// 更新本地状态
|
||||
await updateUserInfo({ ...field });
|
||||
|
||||
// 更新表单状态（store会自动更新）
|
||||
setFormData((prev) => ({ ...prev, ...field }));
|
||||
setUserInfo((prev) => ({ ...prev, ...field }));
|
||||
} else {
|
||||
// 调用更新用户信息接口，只传递修改的字段
|
||||
const update_data = { [field as string]: value };
|
||||
await UserService.update_user_info(update_data);
|
||||
await updateUserInfo(update_data);
|
||||
|
||||
// 更新本地状态
|
||||
// 更新表单状态（store会自动更新）
|
||||
setFormData((prev) => ({ ...prev, [field as string]: value }));
|
||||
setUserInfo((prev) => ({ ...prev, [field as string]: value }));
|
||||
}
|
||||
|
||||
// 显示成功提示
|
||||
Taro.showToast({
|
||||
title: "保存成功",
|
||||
@@ -364,7 +361,7 @@ const EditProfilePage: React.FC = () => {
|
||||
<View className="avatar_container" onClick={handle_avatar_upload}>
|
||||
<Image
|
||||
className="avatar"
|
||||
src={user_info.avatar}
|
||||
src={(user_info as UserInfoType)?.avatar_url || ""}
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<View className="avatar_overlay">
|
||||
@@ -393,7 +390,7 @@ const EditProfilePage: React.FC = () => {
|
||||
</View>
|
||||
<View className="item_right">
|
||||
<Text className="item_value">
|
||||
{form_data.nickname || "188的王晨"}
|
||||
{form_data.nickname || ""}
|
||||
</Text>
|
||||
<Image
|
||||
className="arrow_icon"
|
||||
@@ -648,6 +645,8 @@ const EditProfilePage: React.FC = () => {
|
||||
{/* 生日选择弹窗 */}
|
||||
{birthday_picker_visible && (
|
||||
<PopupPicker
|
||||
minYear={1970}
|
||||
maxYear={new Date().getFullYear()}
|
||||
showHeader={true}
|
||||
title="选择生日"
|
||||
confirmText="保存"
|
||||
@@ -693,7 +692,7 @@ const EditProfilePage: React.FC = () => {
|
||||
],
|
||||
]}
|
||||
type="ntrp"
|
||||
img={user_info.avatar}
|
||||
img={(user_info as UserInfoType)?.avatar_url}
|
||||
visible={ntrp_picker_visible}
|
||||
setvisible={setNtrpPickerVisible}
|
||||
value={[form_data.ntrp_level]}
|
||||
|
||||
Reference in New Issue
Block a user