完善个人页(测试NTRP水平未做)

This commit is contained in:
2025-09-14 11:46:29 +08:00
parent 01aad920ad
commit 6f0c0c30fa
8 changed files with 317 additions and 59 deletions

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { View, Text, Image, ScrollView, Picker, Input } from '@tarojs/components';
import { View, Text, Image, ScrollView, Picker, Input, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';
import { UserInfo } from '@/components/UserInfo';
@@ -67,7 +67,7 @@ const EditProfilePage: React.FC = () => {
ntrp_level: user_data.ntrp_level || 'NTRP 4.0',
phone: user_data.phone || '',
gender: user_data.gender || '',
birthday: '2000-01-01' // 默认生日,实际应该从用户数据获取
birthday: user_data.birthday || '', // 默认生日,实际应该从用户数据获取
});
} catch (error) {
console.error('加载用户信息失败:', error);
@@ -180,9 +180,7 @@ const EditProfilePage: React.FC = () => {
// 处理性别选择
const handle_gender_change = (e: any) => {
const gender_value = e.detail.value;
// 使用工具函数转换:页面选择器值(0/1) -> 数据库值('0'/'1')
const gender_db_value = gender_value === 0 ? '0' : '1';
handle_field_edit('gender', gender_db_value);
handle_field_edit('gender', gender_value);
};
// 处理生日选择
@@ -191,6 +189,17 @@ const EditProfilePage: React.FC = () => {
handle_field_edit('birthday', birthday_value);
};
// NTRP水平输入 - 实时更新本地状态
const handle_ntrp_level_input = (e: any) => {
const ntrp_level_value = e.detail.value;
setFormData(prev => ({ ...prev, ntrp_level: ntrp_level_value }));
}
// NTRP水平输入 - 失去焦点时保存到服务器
const handle_ntrp_level_blur = (e: any) => {
const ntrp_level_value = e.detail.value;
handle_field_edit('ntrp_level', ntrp_level_value);
}
// 处理职业输入 - 实时更新本地状态
const handle_occupation_input = (e: any) => {
const occupation_value = e.detail.value;
@@ -215,17 +224,17 @@ const EditProfilePage: React.FC = () => {
handle_field_edit('location', location_value);
};
// 处理手机号输入 - 实时更新本地状态
const handle_phone_input = (e: any) => {
const phone_value = e.detail.value;
setFormData(prev => ({ ...prev, phone: phone_value }));
};
// // 处理手机号输入 - 实时更新本地状态
// const handle_phone_input = (e: any) => {
// const phone_value = e.detail.value;
// setFormData(prev => ({ ...prev, phone: phone_value }));
// };
// 处理手机号输入 - 失去焦点时保存到服务器
const handle_phone_blur = (e: any) => {
const phone_value = e.detail.value;
handle_field_edit('phone', phone_value);
};
// // 处理手机号输入 - 失去焦点时保存到服务器
// const handle_phone_blur = (e: any) => {
// const phone_value = e.detail.value;
// handle_field_edit('phone', phone_value);
// };
// 处理退出登录
@@ -246,6 +255,29 @@ const EditProfilePage: React.FC = () => {
});
};
const onGetPhoneNumber = async (e) => {
if (!e.detail || !e.detail.code) {
Taro.showToast({
title: '获取手机号失败,请重试',
icon: 'none',
duration: 2000
});
return;
}
console.log('用户手机号信息aaa', e)
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">
{/* 导航栏 */}
@@ -345,7 +377,7 @@ const EditProfilePage: React.FC = () => {
</View>
<View className="item_right">
<Text className="item_value">
{form_data.personal_profile || '介绍一下自己'}
{form_data.personal_profile.replace(/\n/g, ' ') || '介绍一下自己'}
</Text>
<Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
</View>
@@ -370,6 +402,7 @@ const EditProfilePage: React.FC = () => {
onInput={handle_location_input}
onBlur={handle_location_blur}
/>
<Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
</View>
</View>
<View className="divider"></View>
@@ -381,7 +414,14 @@ const EditProfilePage: React.FC = () => {
<Text className="item_label">NTRP </Text>
</View>
<View className="item_right">
<Text className="item_value">{form_data.ntrp_level}</Text>
{/* <Text className="item_value">{form_data.ntrp_level}</Text> */}
<Input
className="item_input"
value={form_data.ntrp_level}
placeholder="请输入NTRP水平"
onInput={handle_ntrp_level_input}
onBlur={handle_ntrp_level_blur}
/>
<Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
</View>
</View>
@@ -401,6 +441,7 @@ const EditProfilePage: React.FC = () => {
onInput={handle_occupation_input}
onBlur={handle_occupation_blur}
/>
<Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
</View>
</View>
</View>
@@ -415,14 +456,16 @@ const EditProfilePage: React.FC = () => {
<Text className="item_label"></Text>
</View>
<View className="item_right">
<Input
{/* <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>