用户生日、性别、职业、地址、ntrp水平 Picker编辑

src/user_pages/edit/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, Image, ScrollView, Picker, Input, Button } from '@tarojs/components';
+import { PopupPicker } from '@/components/Picker/index'
 import Taro from '@tarojs/taro';
 import './index.scss';
 import { UserInfo } from '@/components/UserInfo';
@@ -23,23 +24,27 @@ const EditProfilePage: React.FC = () => {
       participated: 0
     },
     personal_profile: '加载中...',
-    location: '加载中...',
     occupation: '加载中...',
     ntrp_level: 'NTRP 3.0',
     phone: '',
-    gender: ''
+    gender: '',
+    country: '',
+    province: '',
+    city: '',
   });
 
   // 表单状态
   const [form_data, setFormData] = useState({
     nickname: '',
     personal_profile: '',
-    location: '',
     occupation: '',
     ntrp_level: '4.0',
     phone: '',
     gender: '',
-    birthday: '2000-01-01'
+    birthday: '2000-01-01',
+    country: '',
+    province: '',
+    city: ''
   });
 
   // 加载状态
@@ -48,6 +53,11 @@ const EditProfilePage: React.FC = () => {
   // 编辑弹窗状态
   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);
 
   // 页面加载时初始化数据
   useEffect(() => {
@@ -63,12 +73,14 @@ const EditProfilePage: React.FC = () => {
       setFormData({
         nickname: user_data.nickname || '',
         personal_profile: user_data.personal_profile || '',
-        location: user_data.location || '',
         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 || '', // 默认生日，实际应该从用户数据获取
+        birthday: user_data.birthday || '',
+        country: user_data.country || '',
+        province: user_data.province || '',
+        city: user_data.city || ''
       });
     } catch (error) {
       console.error('加载用户信息失败:', error);
@@ -110,6 +122,26 @@ const EditProfilePage: React.FC = () => {
 
   // 处理编辑弹窗
   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);
@@ -154,15 +186,22 @@ const EditProfilePage: React.FC = () => {
   };
 
   // 处理字段编辑
-  const handle_field_edit = async (field: string, value: string) => {
+  const handle_field_edit = async (field: string | { [key: string]: string }, value?: string) => {
     try {
-      // 调用更新用户信息接口，只传递修改的字段
-      const update_data = { [field]: value };
-      await UserService.update_user_info(update_data);
+      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]: value }));
-      setUserInfo(prev => ({ ...prev, [field]: value }));
+        // 更新本地状态
+        setFormData(prev => ({ ...prev, [field as string]: value }));
+        setUserInfo(prev => ({ ...prev, [field as string]: value }));
+      }
 
       // 显示成功提示
       Taro.showToast({
@@ -180,64 +219,35 @@ const EditProfilePage: React.FC = () => {
 
   // 处理性别选择
   const handle_gender_change = (e: any) => {
-    const gender_value = e.detail.value;
+    const gender_value = e[0];
     handle_field_edit('gender', gender_value);
   };
 
   // 处理生日选择
   const handle_birthday_change = (e: any) => {
-    const birthday_value = e.detail.value;
-    handle_field_edit('birthday', birthday_value);
+    const [year, month, day] = e;
+    handle_field_edit('birthday', `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`);
   };
 
-  // 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;
+  // 处理地区选择
+  const handle_location_change = (e: any) => {
+    debugger
+    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_input = (e: any) => {
-    const occupation_value = e.detail.value;
-    setFormData(prev => ({ ...prev, occupation: occupation_value }));
   };
 
-  // 处理职业输入 - 失去焦点时保存到服务器
-  const handle_occupation_blur = (e: any) => {
-    const occupation_value = e.detail.value;
-    handle_field_edit('occupation', occupation_value);
+  // 处理职业选择
+  const handle_occupation_change = (e: any) => {
+    const [country, province] = e;
+    handle_field_edit('occupation', `${country} ${province}`);
   };
 
-  // 处理地区输入 - 实时更新本地状态
-  const handle_location_input = (e: any) => {
-    const location_value = e.detail.value;
-    setFormData(prev => ({ ...prev, location: location_value }));
-  };
-
-  // 处理地区输入 - 失去焦点时保存到服务器
-  const handle_location_blur = (e: any) => {
-    const location_value = e.detail.value;
-    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_blur = (e: any) => {
-  //   const phone_value = e.detail.value;
-  //   handle_field_edit('phone', phone_value);
-  // };
-
-
   // 处理退出登录
   const handle_logout = () => {
     Taro.showModal({
@@ -333,46 +343,31 @@ const EditProfilePage: React.FC = () => {
 
               {/* 性别 */}
               <View className="form_group">
-                <Picker
-                  mode="selector"
-                  range={['男', '女']}
-                  value={form_data.gender === '0' ? 0 : form_data.gender === '1' ? 1 : 0}
-                  onChange={handle_gender_change}
-                >
-                  <View className="form_item">
-                    <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 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>
-                </Picker>
+                  <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">
-                <Picker
-                  mode="date"
-                  value={form_data.birthday}
-                  onChange={handle_birthday_change}
-                >
-                  <View className="form_item">
-                    <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 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>
-                </Picker>
+                  <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>
 
@@ -398,58 +393,39 @@ const EditProfilePage: React.FC = () => {
             <View className="form_section">
               <View className="form_group">
                 {/* 地区 */}
-                <View className="form_item">
+                <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">
-                    <Input
-                      className="item_input"
-                      value={form_data.location}
-                      placeholder="请输入地区"
-                      onInput={handle_location_input}
-                      onBlur={handle_location_blur}
-                    />
+                    <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">
+                <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> */}
-                    <Input
-                      className="item_input"
-                      value={form_data.ntrp_level}
-                      placeholder="请输入NTRP水平"
-                      onInput={handle_ntrp_level_input}
-                      onBlur={handle_ntrp_level_blur}
-                    />
+                    <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">
+                <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">
-                    <Input
-                      className="item_input"
-                      value={form_data.occupation}
-                      placeholder="请输入职业"
-                      onInput={handle_occupation_input}
-                      onBlur={handle_occupation_blur}
-                    />
+                    <Text className="item_value">{form_data.occupation}</Text>
                     <Image className="arrow_icon" src={require('@/static/list/icon-list-right-arrow.svg')} />
                   </View>
                 </View>
@@ -510,6 +486,53 @@ const EditProfilePage: React.FC = () => {
         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={[[{ text: "中国", value: "中国" }], [{ text: "上海", value: "上海" }], [{ text: "浦东新区", value: "浦东新区" }, {text: "静安区", value: "静安区"}]]}
+        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' },
+          ]]}
+        visible={ntrp_picker_visible}
+        setvisible={setNtrpPickerVisible}
+        value={[form_data.ntrp_level]}
+        onChange={handle_ntrp_level_change} />}
+      {/* 职业选择弹窗 */}
+      {occupation_picker_visible && <PopupPicker
+        options={[[{ text: "时尚", value: "时尚" }], [{ text: "美妆博主", value: "美妆博主" },{ text: "设计师", value: "设计师" }]]}
+        visible={occupation_picker_visible}
+        setvisible={setOccupationPickerVisible}
+        value={[...form_data.occupation.split(' ')]}
+        onChange={handle_occupation_change} />}
     </View>
   );
 };