108 lines
4.1 KiB
JavaScript
108 lines
4.1 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Button, Input, Divider } from "antd-mobile";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
|
import { useRouter } from "next/navigation";
|
|
import UploadImgs from "@/components/UploadImgs";
|
|
export default function EditPassword() {
|
|
const [regionCode, setRegionCode] = useState("");
|
|
const [mobilePhone, setMobilePhone] = useState("");
|
|
const [veriCode, setVeriCode] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [isCounting, setIsCounting] = useState(false);
|
|
const [seconds, setSeconds] = useState(60);
|
|
const router = useRouter();
|
|
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}
|
|
size="xl"
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-base text-center leading-9"></p>
|
|
</div>
|
|
{/* 内容 */}
|
|
<div className="pt-32 px-4">
|
|
<p className="text-3xl text-white font-medium">修改密码</p>
|
|
<p className="text-base text-white mb-10">请牢记密码</p>
|
|
<div className="border-2 border-[#2c2b2f] rounded-2xl p-4">
|
|
<div className="flex flex-row flex-nowrap items-center mb-4">
|
|
<p className="text-base text-white mr-4">+{regionCode}</p>
|
|
<Input
|
|
placeholder="未获取到手机号，请重新登录"
|
|
// disabled={true}
|
|
type="number"
|
|
maxLength={11}
|
|
onChangeText={(value) => setMobilePhone(value)}
|
|
value={mobilePhone}
|
|
style={{"--color":"#FFFFFF","--font-size":"16px"}}
|
|
/>
|
|
</div>
|
|
<Divider />
|
|
<div className="flex flex-row flex-nowrap items-center my-4">
|
|
<p className="text-base text-white mr-4 whitespace-nowrap">验证码</p>
|
|
<Input
|
|
placeholder="请输入验证码"
|
|
onChangeText={(value) => setVeriCode(value)}
|
|
value={veriCode}
|
|
type="number"
|
|
style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
|
|
/>
|
|
<Button
|
|
shape="rounded"
|
|
size="mini"
|
|
disabled={isCounting}
|
|
// onClick={handleSubmit}
|
|
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
|
className="whitespace-nowrap"
|
|
>
|
|
{isCounting ? `(${seconds})重新发送` : "获取验证码"}
|
|
</Button>
|
|
</div>
|
|
<Divider />
|
|
<div className="flex flex-row flex-nowrap items-center my-4">
|
|
<p className="text-base text-white mr-4 whitespace-nowrap">新密码</p>
|
|
<Input
|
|
placeholder="请输入8-15位新密码"
|
|
placeholderTextColor="#FFFFFF80"
|
|
underlineColorAndroid="transparent"
|
|
onChangeText={(value) => setNewPassword(value)}
|
|
value={newPassword}
|
|
style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
|
|
/>
|
|
</div>
|
|
<Divider />
|
|
<div className="flex flex-row flex-nowrap items-center mt-4">
|
|
<p className="text-base text-white mr-4 whitespace-nowrap">确认密码</p>
|
|
<Input
|
|
placeholder="请再次输入新密码"
|
|
onChangeText={(value) => setConfirmPassword(value)}
|
|
value={confirmPassword}
|
|
style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-16">
|
|
<Button
|
|
shape="rounded"
|
|
size="middle"
|
|
block
|
|
// onClick={handleSubmit}
|
|
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
|
>
|
|
确认修改
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|