tiefen_space_h5/app/my/setting/editPassword/page.js

"use client";

import React, { useState, useEffect } 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, useSearchParams } from "next/navigation";
import { get } from "@/utils/storeInfo";
import { handleVerification } from "@/api/public";
import { JSEncrypt } from "jsencrypt";
import { cryptoPassword } from "@/utils/crypto";
import require from "@/utils/require";
import { signOut } from "@/utils/auth";
export default function EditPassword() {
  const [regionCode, setRegionCode] = useState("86");
  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();
  const searchParams = useSearchParams();
  // useEffect(() => {
  //   const mobile_phone = get("mobile_phone");
  //   console.log("mobile_phone",mobile_phone)
  //   setMobilePhone(mobile_phone);
  // }, []);
  //获取之前缓存的用户的手机号
  useEffect(() => {
    const mobile_phone = get("mobile_phone");
    const region_code = get("region_code");
    if (mobile_phone && region_code) {
      setMobilePhone(mobile_phone);
      // setRegionCode(region_code);
    }
  }, []);
  useEffect(() => {
    let interval;
    if (isCounting && seconds > 0) {
      interval = setInterval(() => {
        setSeconds(seconds - 1);
      }, 1000);
    } else {
      setIsCounting(false);
      setSeconds(60);
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [isCounting, seconds]);
  const getVerification = async () => {
    //开始倒计时
    setIsCounting(true);
    handleVerification(mobilePhone, regionCode);
  };
  //点击修改密码
  const handleUpdatePassword = async () => {
    //验证数据格式
    if (!mobilePhone.match(/^1[3456789]\d{9}$/)) {
      Toast.show({
        icon: "fail",
        content: "手机号码格式错误",
        position: "top",
      });
      return;
    }
    if (!veriCode) {
      Toast.show({
        icon: "fail",
        content: "请输入验证码",
        position: "top",
      });
      return;
    }
    if (!confirmPassword) {
      Toast.show({
        icon: "fail",
        content: "请再次输入您的密码",
        position: "top",
      });
      return;
    }
    if (newPassword != confirmPassword) {
      Toast.show({
        icon: "fail",
        content: "两次输入密码不一致",
        position: "top",
      });
      return;
    }
    if (newPassword.length < 8) {
      Toast.show({
        icon: "fail",
        content: "新密码不得小于8位",
        position: "top",
      });
      return;
    }
    if (newPassword.length > 15) {
      Toast.show({
        icon: "fail",
        content: "新密码不得大于15位",
        position: "top",
      });
      return;
    }
    //对手机号进行RSA加密
    const encrypt = new JSEncrypt();
    encrypt.setPublicKey(process.env.NEXT_PUBLIC_RSA_KEY);
    const mobile_phone = encrypt.encrypt(mobilePhone);
    //MD5加密新旧密码
    const encryptedNewPassword = cryptoPassword(newPassword);
    //发送修改密码请求
    try {
      const data = await require("POST", `/api/login/logout`, {
        body: {
          mobile_phone: mobile_phone,
          region_code: regionCode,
          veri_code: veriCode,
          new_password: encryptedNewPassword,
        },
      });
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }
      Toast.show({
        icon: "success",
        content: "修改成功，请重新登录",
        position: "top",
      });
      signOut();
    } catch (error) {
      console.error(error);
    }
  };
  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">
          {searchParams.get("is_enabled") == "0"
            ? "设置密码"
            : mobilePhone == "0"
            ? "修改密码"
            : "重置密码"}
        </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={mobilePhone && searchParams.get("is_enabled") == "0"}
              type="number"
              maxLength={11}
              onChange={(value) => {
                console.log("value", value);
                setMobilePhone(value);
              }}
              value={mobilePhone}
              style={{
                "--font-size": "16px",
                "--placeholder-color": "#FFFFFF80",
              }}
            />
          </div>
          {searchParams.get("is_enabled") == "0" ? null : (
            <>
              <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="请输入验证码"
                  onChange={(value) => setVeriCode(value)}
                  value={veriCode}
                  type="number"
                  style={{
                    "--placeholder-color": "#FFFFFF80",
                    "--font-size": "16px",
                  }}
                />
                <Button
                  shape="rounded"
                  size="mini"
                  disabled={isCounting}
                  onClick={getVerification}
                  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"
              onChange={(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>
      {searchParams.get("is_enabled") == "0" && (
        <div
          onClick={() => router.push(`/`)}
          className="fixed bottom-6 w-full text-[#FF669E] text-xs text-center"
        >
          跳过，稍后设置
        </div>
      )}
    </div>
  );
}