115 lines
3.0 KiB
JavaScript
115 lines
3.0 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Input, Button, Toast } from "antd-mobile";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
|
import { useRouter } from "next/navigation";
|
|
import { getUserInfo } from "@/api/public";
|
|
import { get, save } from "@/utils/storeInfo";
|
|
import requireAPI from "@/utils/requireAPI";
|
|
import { utf8Length } from "@/utils/tools";
|
|
|
|
export default function EditUserName() {
|
|
const router = useRouter();
|
|
const [name, setName] = useState();
|
|
const account = get("account");
|
|
useEffect(() => {
|
|
const getName = async () => {
|
|
setName(account.name);
|
|
};
|
|
getName();
|
|
}, []);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!name) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "昵称不得为空",
|
|
position: "top",
|
|
});
|
|
return;
|
|
} else if (utf8Length(name) > 10) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "昵称过长",
|
|
position: "top",
|
|
});
|
|
return;
|
|
} else if (name === account.name) {
|
|
router.back();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await requireAPI(
|
|
"POST",
|
|
"/api/account/update",
|
|
{
|
|
body: {
|
|
name: name,
|
|
},
|
|
},
|
|
true
|
|
);
|
|
if (data.ret === -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: data.msg,
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
//向服务器请求新的账号信息并保存到本地
|
|
const account = await getUserInfo();
|
|
save("account", JSON.stringify(account));
|
|
} catch (error) {
|
|
// console.error(error);
|
|
}
|
|
router.back();
|
|
};
|
|
return (
|
|
<div>
|
|
<div className="p-4 fixed top-0 z-10 w-full">
|
|
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
|
|
<FontAwesomeIcon
|
|
icon={faAngleLeft}
|
|
style={{ maxWidth: "12px" }}
|
|
size="xl"
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-base text-center leading-9">修改资料</p>
|
|
</div>
|
|
{/* 内容 */}
|
|
<div className="pt-16 px-4">
|
|
<div className="flex items-center rounded-full bg-[#FFFFFF1A] text-white h-12 px-4">
|
|
<Input
|
|
placeholder="请输入新昵称"
|
|
max={8}
|
|
onChange={(value) => setName(value)}
|
|
value={name}
|
|
style={{
|
|
"--placeholder-color": "#FFFFFF80",
|
|
"--font-size": "16px",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="mt-16">
|
|
<Button
|
|
shape="rounded"
|
|
size="middle"
|
|
block
|
|
onClick={handleSubmit}
|
|
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
|
>
|
|
确认
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|