From 0913428d27a3667fcbf59a1145e9ef47915acb5a Mon Sep 17 00:00:00 2001
From: eleliauk <2831336720@qq.com>
Date: Sat, 24 Aug 2024 23:49:17 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat=EF=BC=9A=E6=96=B0=E5=A2=9E?=
=?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BF=A1=E6=81=AF=E7=9A=84=E5=A4=A7=E9=83=A8?=
=?UTF-8?q?=E5=88=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/GuildLine/GuildLine.tsx | 1 +
src/pages/editUser/index.scss | 42 +++++++--
src/pages/editUser/index.tsx | 120 ++++++++++++++++++++++---
src/pages/personalPage/index.tsx | 3 -
4 files changed, 143 insertions(+), 23 deletions(-)
diff --git a/src/components/GuildLine/GuildLine.tsx b/src/components/GuildLine/GuildLine.tsx
index 446afd6..b9249af 100644
--- 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
index 51abebe..375c8a1 100644
--- 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
index cf61ed9..ae45a34 100644
--- 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,30 +44,88 @@ 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>
@@ -54,12 +133,27 @@ const EditUser: React.FC = () => {
<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
index eb6df89..be166f0 100644
--- 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);