完善个人页（测试NTRP水平未做）

2025-09-14 11:46:29 +08:00
parent 01aad920ad
commit 6f0c0c30fa
8 changed files with 317 additions and 59 deletions
--- a/src/user_pages/edit/index.scss
+++ b/src/user_pages/edit/index.scss
@@ -145,12 +145,13 @@
        padding: 10px 12px;
        min-height: 44px;
        box-sizing: border-box;
+        gap: 20px;

        .item_left {
          display: flex;
          align-items: center;
          gap: 8px;
-          flex: 1;
+          flex-shrink: 0;

          .item_icon {
            width: 16px;
@@ -172,6 +173,7 @@
          gap: 8px;
          flex: 1;
          justify-content: flex-end;
+          overflow: hidden;

          .item_input {
            flex: 1;
@@ -184,6 +186,7 @@
            border: none;
            background: transparent;
            outline: none;
+            min-width: 0;

            &::placeholder {
              color: rgba(0, 0, 0, 0.4);
@@ -196,6 +199,11 @@
            font-size: 14px;
            line-height: 1.71em;
            color: #000000;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-align: right;
          }

          .bio_textarea {
@@ -222,6 +230,26 @@
            height: 14px;
            opacity: 0.2;
          }
+
+          Button {
+            padding: 0;
+            font-family: 'PingFang SC';
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 1.71em;
+            color: #000000;
+            border: none;
+            flex: 1;
+            text-align: right;
+            background-color: unset;
+            &.placeholer {
+              font-weight: 400;
+              color: rgba(60, 60, 67, 0.3);
+            }
+            &:after {
+              border: none;
+            }
+          }
        }

        .divider {
--- a/src/user_pages/edit/index.tsx
+++ b/src/user_pages/edit/index.tsx
@@ -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>
--- a/src/user_pages/myself/index.tsx
+++ b/src/user_pages/myself/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
-import Taro from "@tarojs/taro";
+import Taro, { useDidShow } from "@tarojs/taro";
 import "./index.scss";
 import GuideBar from "@/components/GuideBar";
 import { UserInfoCard, UserInfo } from "@/components/UserInfo/index";
@@ -33,6 +33,7 @@ const MyselfPage: React.FC = () => {
    location: "加载中...",
    occupation: "加载中...",
    ntrp_level: "NTRP 3.0",
+    personal_profile: "加载中...",
  });

  // 球局记录状态
@@ -77,9 +78,13 @@ const MyselfPage: React.FC = () => {
  };

  // 页面加载时获取数据
-  useEffect(() => {
-    load_user_data();
-  }, [user_id]);
+  // useEffect(() => {
+  //   load_user_data();
+  // }, [user_id]);
+
+  useDidShow(() => {
+    load_user_data(); // 确保从编辑页面返回时刷新数据
+  });

  // 切换标签页时重新加载球局数据
  useEffect(() => {
@@ -157,6 +162,7 @@ const MyselfPage: React.FC = () => {
              is_current_user={is_current_user}
              is_following={is_following}
              on_follow={handle_follow}
+              set_user_info={set_user_info}
            />
          )}
          {/* 球局订单和收藏功能 */}
@@ -208,6 +214,7 @@ const MyselfPage: React.FC = () => {
              loading={loading}
              error={null}
              reload={load_game_data}
+              loadMoreMatches={() => { }}
            />
          </ScrollView>
        </View>