695 lines
22 KiB
TypeScript
695 lines
22 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
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";
|
|
|
|
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 [form_data, setFormData] = useState({
|
|
nickname: "",
|
|
personal_profile: "",
|
|
occupation: "",
|
|
ntrp_level: "4.0",
|
|
phone: "",
|
|
gender: "",
|
|
birthday: "2000-01-01",
|
|
country: "",
|
|
province: "",
|
|
city: "",
|
|
});
|
|
|
|
// 加载状态
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// 编辑弹窗状态
|
|
const [edit_modal_visible, setEditModalVisible] = useState(false);
|
|
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 [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 {
|
|
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 = () => {
|
|
Taro.chooseImage({
|
|
count: 1,
|
|
sizeType: ["compressed"],
|
|
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 }));
|
|
Taro.showToast({
|
|
title: "头像上传成功",
|
|
icon: "success",
|
|
});
|
|
} catch (error) {
|
|
console.error("头像上传失败:", error);
|
|
Taro.showToast({
|
|
title: "头像上传失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
// 处理编辑弹窗
|
|
const handle_open_edit_modal = (field: string) => {
|
|
if (field === "gender") {
|
|
setGenderPickerVisible(true);
|
|
return;
|
|
}
|
|
if (field === "birthday") {
|
|
setBirthdayPickerVisible(true);
|
|
return;
|
|
}
|
|
if (field === "location") {
|
|
setLocationPickerVisible(true);
|
|
return;
|
|
}
|
|
if (field === "ntrp_level") {
|
|
setNtrpPickerVisible(true);
|
|
return;
|
|
}
|
|
if (field === "occupation") {
|
|
setOccupationPickerVisible(true);
|
|
return;
|
|
}
|
|
if (field === "nickname") {
|
|
// 手动输入
|
|
setEditingField(field);
|
|
setEditModalVisible(true);
|
|
} else {
|
|
setEditingField(field);
|
|
setEditModalVisible(true);
|
|
}
|
|
};
|
|
|
|
const handle_edit_modal_save = async (value: string) => {
|
|
try {
|
|
// 调用更新用户信息接口，只传递修改的字段
|
|
const update_data = { [editing_field]: value };
|
|
await UserService.update_user_info(update_data);
|
|
|
|
// 更新本地状态
|
|
setFormData((prev) => ({ ...prev, [editing_field]: value }));
|
|
setUserInfo((prev) => ({ ...prev, [editing_field]: value }));
|
|
|
|
// 关闭弹窗
|
|
setEditModalVisible(false);
|
|
setEditingField("");
|
|
|
|
// 显示成功提示
|
|
Taro.showToast({
|
|
title: "保存成功",
|
|
icon: "success",
|
|
});
|
|
} catch (error) {
|
|
console.error("保存失败:", error);
|
|
Taro.showToast({
|
|
title: "保存失败",
|
|
icon: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handle_edit_modal_cancel = () => {
|
|
setEditModalVisible(false);
|
|
setEditingField("");
|
|
};
|
|
|
|
// 处理字段编辑
|
|
const handle_field_edit = async (
|
|
field: string | { [key: string]: string },
|
|
value?: string
|
|
) => {
|
|
try {
|
|
if (
|
|
typeof field === "object" &&
|
|
field !== null &&
|
|
!Array.isArray(field)
|
|
) {
|
|
await UserService.update_user_info({ ...field });
|
|
// 更新本地状态
|
|
setFormData((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 }));
|
|
setUserInfo((prev) => ({ ...prev, [field as string]: value }));
|
|
}
|
|
|
|
// 显示成功提示
|
|
Taro.showToast({
|
|
title: "保存成功",
|
|
icon: "success",
|
|
});
|
|
} catch (error) {
|
|
console.error("保存失败:", error);
|
|
Taro.showToast({
|
|
title: "保存失败",
|
|
icon: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
// 处理性别选择
|
|
const handle_gender_change = (e: any) => {
|
|
const gender_value = e[0];
|
|
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"
|
|
)}`
|
|
);
|
|
};
|
|
|
|
// 处理地区选择
|
|
const handle_location_change = (e: any) => {
|
|
const [country, province, city] = e;
|
|
handle_field_edit({ country, province, city });
|
|
};
|
|
|
|
// 处理NTRP水平选择
|
|
const handle_ntrp_level_change = (e: any) => {
|
|
const ntrp_level_value = e[0];
|
|
handle_field_edit("ntrp_level", ntrp_level_value);
|
|
};
|
|
|
|
// 处理职业选择
|
|
const handle_occupation_change = (e: any) => {
|
|
const [country, province] = e;
|
|
handle_field_edit("occupation", `${country} ${province}`);
|
|
};
|
|
|
|
// 处理退出登录
|
|
const handle_logout = () => {
|
|
Taro.showModal({
|
|
title: "确认退出",
|
|
content: "确定要退出登录吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 清除用户数据
|
|
clear_login_state();
|
|
|
|
Taro.reLaunch({
|
|
url: "/login_pages/index/index",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const onGetPhoneNumber = async (e) => {
|
|
if (!e.detail || !e.detail.code) {
|
|
Taro.showToast({
|
|
title: "获取手机号失败，请重试",
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
return;
|
|
}
|
|
try {
|
|
const phone = await UserService.parse_phone(e.detail.code);
|
|
handle_field_edit("phone", phone);
|
|
} catch (e) {
|
|
console.error("解析手机号失败:", e);
|
|
Taro.showToast({
|
|
title: "解析手机号失败，请重试",
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View className="edit_profile_page">
|
|
{/* 导航栏 */}
|
|
<View className="custom-navbar">
|
|
<View className="detail-navigator">
|
|
<View
|
|
className="detail-navigator-back"
|
|
onClick={() => {
|
|
Taro.navigateBack();
|
|
}}
|
|
>
|
|
<Image
|
|
className="detail-navigator-back-icon"
|
|
src={img.ICON_NAVIGATOR_BACK}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{/* 主要内容 */}
|
|
<ScrollView className="main_content" scrollY>
|
|
{loading ? (
|
|
<View className="loading_container">
|
|
<Text className="loading_text">加载中...</Text>
|
|
</View>
|
|
) : (
|
|
<>
|
|
{/* 头像编辑区域 */}
|
|
<View className="avatar_section">
|
|
<View className="avatar_container" onClick={handle_avatar_upload}>
|
|
<Image className="avatar" src={user_info.avatar} />
|
|
<View className="avatar_overlay">
|
|
<Image
|
|
className="upload_icon"
|
|
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="item_left">
|
|
<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>
|
|
<Image
|
|
className="arrow_icon"
|
|
src={require("@/static/list/icon-list-right-arrow.svg")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className="divider"></View>
|
|
</View>
|
|
|
|
{/* 性别 */}
|
|
<View className="form_group">
|
|
<View
|
|
className="form_item"
|
|
onClick={() => handle_open_edit_modal("gender")}
|
|
>
|
|
<View className="item_left">
|
|
<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>
|
|
<Image
|
|
className="arrow_icon"
|
|
src={require("@/static/list/icon-list-right-arrow.svg")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className="divider"></View>
|
|
</View>
|
|
|
|
{/* 生日 */}
|
|
<View className="form_group">
|
|
<View
|
|
className="form_item"
|
|
onClick={() => handle_open_edit_modal("birthday")}
|
|
>
|
|
<View className="item_left">
|
|
<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")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 简介编辑 */}
|
|
<View className="form_section">
|
|
<View className="form_group">
|
|
<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")}
|
|
/>
|
|
<Text className="item_label">简介</Text>
|
|
</View>
|
|
<View className="item_right">
|
|
<Text className="item_value">
|
|
{form_data.personal_profile.replace(/\n/g, " ") ||
|
|
"介绍一下自己"}
|
|
</Text>
|
|
<Image
|
|
className="arrow_icon"
|
|
src={require("@/static/list/icon-list-right-arrow.svg")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 地区、NTRP水平、职业 */}
|
|
<View className="form_section">
|
|
<View className="form_group">
|
|
{/* 地区 */}
|
|
<View
|
|
className="form_item"
|
|
onClick={() => handle_open_edit_modal("location")}
|
|
>
|
|
<View className="item_left">
|
|
<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")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className="divider"></View>
|
|
|
|
{/* NTRP水平 */}
|
|
<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")}
|
|
/>
|
|
<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")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className="divider"></View>
|
|
|
|
{/* 职业 */}
|
|
<View
|
|
className="form_item"
|
|
onClick={() => handle_open_edit_modal("occupation")}
|
|
>
|
|
<View className="item_left">
|
|
<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")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 手机号 */}
|
|
<View className="form_section">
|
|
<View className="form_group">
|
|
<View className="form_item">
|
|
<View className="item_left">
|
|
<Image
|
|
className="item_icon"
|
|
src={require("@/static/userInfo/phone.svg")}
|
|
/>
|
|
<Text className="item_label">手机</Text>
|
|
</View>
|
|
<View className="item_right">
|
|
{/* <Input
|
|
className="item_input"
|
|
value={form_data.phone}
|
|
placeholder="请输入手机号"
|
|
type="number"
|
|
onInput={handle_phone_input}
|
|
onBlur={handle_phone_blur}
|
|
/> */}
|
|
<Button
|
|
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>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 注销账号 */}
|
|
<View className="logout_section">
|
|
<View className="logout_button" onClick={handle_logout}>
|
|
<Text className="logout_text">注销账号</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 退出登录 */}
|
|
<View className="logout_section">
|
|
<View className="logout_button" onClick={handle_logout}>
|
|
<Text className="logout_text">退出登录</Text>
|
|
</View>
|
|
</View>
|
|
</>
|
|
)}
|
|
</ScrollView>
|
|
|
|
{/* 编辑弹窗 */}
|
|
<EditModal
|
|
visible={edit_modal_visible}
|
|
type={editing_field}
|
|
title={editing_field === "nickname" ? "编辑名字" : "编辑简介"}
|
|
placeholder={
|
|
editing_field === "nickname"
|
|
? "请输入您的名字"
|
|
: "介绍一下你的喜好，或者训练习惯"
|
|
}
|
|
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 个字符"
|
|
}
|
|
/>
|
|
{/* 性别选择弹窗 */}
|
|
{gender_picker_visible && (
|
|
<PopupPicker
|
|
options={[
|
|
[
|
|
{ text: "男", value: "0" },
|
|
{ text: "女", value: "1" },
|
|
{ text: "保密", value: "2" },
|
|
],
|
|
]}
|
|
visible={gender_picker_visible}
|
|
setvisible={setGenderPickerVisible}
|
|
value={[form_data.gender]}
|
|
onChange={handle_gender_change}
|
|
/>
|
|
)}
|
|
{/* 生日选择弹窗 */}
|
|
{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(),
|
|
]}
|
|
type="day"
|
|
onChange={handle_birthday_change}
|
|
/>
|
|
)}
|
|
{/* 地区选择弹窗 */}
|
|
{location_picker_visible && (
|
|
<PopupPicker
|
|
options={cities}
|
|
visible={location_picker_visible}
|
|
setvisible={setLocationPickerVisible}
|
|
value={[form_data.country, form_data.province, form_data.city]}
|
|
onChange={handle_location_change}
|
|
/>
|
|
)}
|
|
{/* NTRP水平选择弹窗 */}
|
|
{ntrp_picker_visible && (
|
|
<PopupPicker
|
|
options={[
|
|
[
|
|
{ text: "1.5", value: "1.5" },
|
|
{ text: "2.0", value: "2.0" },
|
|
{ text: "2.5", value: "2.5" },
|
|
{ text: "3.0", value: "3.0" },
|
|
{ text: "3.5", value: "3.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}
|
|
/>
|
|
)}
|
|
{/* 职业选择弹窗 */}
|
|
{occupation_picker_visible && (
|
|
<PopupPicker
|
|
options={professions}
|
|
visible={occupation_picker_visible}
|
|
setvisible={setOccupationPickerVisible}
|
|
value={[...form_data.occupation.split(" ")]}
|
|
onChange={handle_occupation_change}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default EditProfilePage;
|