✨ feat：新增修改信息的大部分逻辑

MuxiKeStack · Aug 24, 2024 · 0913428 · 0913428
1 parent 362706e
commit 0913428
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 23 deletions.
diff --git a/src/components/GuildLine/GuildLine.tsx b/src/components/GuildLine/GuildLine.tsx
@@ -1,5 +1,6 @@
 import { View } from '@tarojs/components';
 import Taro from '@tarojs/taro';
+import React from 'react';
 import { AtIcon } from 'taro-ui';
 
 import './index.scss';

diff --git a/src/pages/editUser/index.scss b/src/pages/editUser/index.scss
@@ -1,32 +1,60 @@
 .avatar-container {
   display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: space-between;
+  width: 100vw;
+  height: 15vh;
 }
 .avatar-text {
-  font-size: 32.61rpx;
-  width: 130.43rpx;
+  font-size: 4.5vw;
+  width: 20vw;
   height: 43.48rpx;
+  align-content: center;
+  color: #565552;
+  margin-left: 10%;
 }
 .avatar {
   background-color: white;
-  width: 144.93rpx;
-  height: 144.93rpx;
+  width: 10vh;
+  height: 10vh;
   border-radius: 50%;
   border: #ffd777 solid 1.81rpx;
+  align-content: center;
+  margin-right: 25%;
 }
 .nickname-container {
   display: flex;
+  width: 100vw;
+  height: 15vh;
+  align-items: center; /* 垂直居中 */
+  justify-content: space-between;
 }
 .nickname-text {
-  font-size: 32.61rpx;
-  width: 130.43rpx;
+  font-size: 4.5vw;
+  width: 20vw;
   height: 43.48rpx;
+  align-content: center;
+  color: #565552;
+  margin-left: 10%;
 }
 .nickname {
   height: 43.48rpx;
-  width: 228.26rpx;
+  width: 50vw;
+  font-size: 4.5vw;
+  //margin-left: 30%;
+  margin-right: 25%;
 }
+.divide-line {
+  border: 3.2rpx dashed #ffd777;
+  width: 90%;
+  margin: 0 auto;
+}
+
 .title-container {
   display: flex;
+  align-items: center;
+  width: 100vw;
+  height: 10vh;
 }
 .cancel-button {
   width: 300rpx;

diff --git a/src/pages/editUser/index.tsx b/src/pages/editUser/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Image, View } from '@tarojs/components';
+import { Button, Icon, Image, Input, View } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import React, { useEffect, useState } from 'react';
 
@@ -10,11 +10,32 @@ import { get } from '@/api/get';
 import { ResponseUser } from '@/pages/personalPage';
 
 //import { useDoubleClick } from '@/hooks/useDoubleClick';
-
+// import { editIcon } from "@/img/editPersonal";
+export interface ResponseQiniu {
+  code?: number;
+  data?: WebGetTubeTokenData;
+  msg?: string;
+}
+interface QiniuUploadData {
+  token: string;
+  key?: string;
+}
+interface QiniuUploadResponse {
+  key: string;
+  hash: string;
+}
+export interface WebGetTubeTokenData {
+  access_token?: string;
+  domain_name?: string;
+}
 const EditUser: React.FC = () => {
   const [avatarUrl, setAvatarUrl] = useState('');
   // const [editing, setEditing] = useState(false);
-  const [nickName, setNickName] = useState('你好');
+  const [nickName, setNickName] = useState('昵称昵称昵称');
+  const [uploadToken, setUploadToken] = useState<string | undefined>();
+  const [uploadDomain, setUploadDomain] = useState<string | undefined>();
+  const [isEditingNickname, setIsEditingNickname] = useState(false);
+  const [editableNickName, setEditableNickName] = useState(nickName);
   // const [title, setTitle] = useState('');
   // const textOnDoubleClick = useDoubleClick();
   useEffect(() => {
@@ -23,43 +44,116 @@ const EditUser: React.FC = () => {
         const url = '/users/profile';
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         const response: ResponseUser = await get(url);
-        console.log('用户信息');
         console.log(response);
-        setNickName(response.data.nickname);
-        setAvatarUrl(response.data.avatar);
       } catch (error) {
         console.error('Error fetching collection data:', error);
       }
     };
     void fetchUser();
   }, []);
+  useEffect(() => {
+    const fetchQiniuToken = async () => {
+      try {
+        const url = '/tube/access_token';
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const response: ResponseQiniu = await get(url);
+        if (response.code) {
+          setUploadToken(response.data?.access_token);
+          setUploadDomain(response.data?.domain_name);
+        }
+      } catch (error) {
+        console.error('Error fetching Qiniu token:', error);
+      }
+    };
+    void fetchQiniuToken();
+  }, []);
   const chooseAvatar = () => {
     void Taro.chooseImage({
-      count: 1, // 默认9
+      count: 1,
       sizeType: ['original', 'compressed'],
       sourceType: ['album', 'camera'],
-      success: function (res) {
-        console.log(res.tempFilePaths);
-        setAvatarUrl(res.tempFilePaths[0]);
-      },
-      fail: function (res) {
+      success: (res) => {
+        const filePath = res.tempFilePaths[0];
+        setAvatarUrl(filePath);
         console.log(res);
+        if (uploadToken && uploadDomain) {
+          uploadToQiniu(filePath);
+        }
+      },
+      fail: (err) => {
+        console.error('Failed to choose image:', err);
+      },
+    });
+  };
+
+  const uploadToQiniu = (filePath: string) => {
+    const data: QiniuUploadData = {
+      token: uploadToken as string,
+    };
+
+    void Taro.uploadFile({
+      url: `https://${uploadDomain}`,
+      filePath: filePath,
+      name: 'file',
+      formData: data,
+      success: (res) => {
+        if (res.statusCode === 200) {
+          const responseData: QiniuUploadResponse = JSON.parse(
+            res.data
+          ) as QiniuUploadResponse;
+          const imageUrl = `https://${uploadDomain}/${responseData.key}`;
+          console.log(imageUrl);
+          setAvatarUrl(imageUrl);
+        } else {
+          console.error('Upload failed:', res);
+        }
+      },
+      fail: (err) => {
+        console.error('Error during upload:', err);
       },
     });
   };
+  const handleEditIconClick = () => {
+    setIsEditingNickname(!isEditingNickname);
+  };
+
+  const handleNicknameChange = (e) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-argument
+    setEditableNickName(e.target.value);
+  };
+
+  const handleNicknameSave = () => {
+    setNickName(editableNickName);
+    setIsEditingNickname(false);
+  };
   return (
     <>
       <View>
         <View className="avatar-container">
           <View className="avatar-text">修改头像 </View>
           <Image src={avatarUrl} onClick={chooseAvatar} className="avatar"></Image>
         </View>
+        <View className="divide-line"></View>
         <View className="nickname-container">
           <View className="nickname-text">昵称</View>
           <View>
-            <View className="nickname">超级无敌{nickName}</View>
+            {isEditingNickname ? (
+              <Input
+                type="text"
+                value={editableNickName}
+                onInput={handleNicknameChange}
+                onBlur={handleNicknameSave}
+                className="nickname-input"
+              />
+            ) : (
+              <View className="nickname">
+                {nickName}
+                <Icon type="info" size="20" onClick={handleEditIconClick} />
+              </View>
+            )}
           </View>
         </View>
+        <View className="divide-line"></View>
         {/*<View className="title-container">*/}
         {/*  <View className="title-text">称号</View>*/}
         {/*  <View className="title-container">*/}

diff --git a/src/pages/personalPage/index.tsx b/src/pages/personalPage/index.tsx
@@ -54,7 +54,6 @@ export interface WebUserProfileVo {
   title_ownership: { [key: string]: boolean };
   using_title: string;
   utime?: number;
-  //[property: string]: any;
 }
 const PersonalPage: React.FC<PersonalPageProps> = () => {
   useLoad(() => {
@@ -80,7 +79,6 @@ const Head = () => {
     const fetchExp = async () => {
       try {
         const url = '/points/users/mine';
-
         const response: ResponseLevel = await get(url);
         console.log(response);
         setLevel(response.data.level);
@@ -96,7 +94,6 @@ const Head = () => {
     const fetchNew = async () => {
       try {
         const url = '/users/profile';
-
         const response: ResponseUser = await get(url);
         console.log('用户信息');
         console.log(response);