修改登录输入框

app/login/page.js

@@ -2,7 +2,7 @@
 
 import React, { useState, useRef, useEffect } from "react";
 import {
-  Input,
+  // Input,
   Button,
   Swiper,
   Tabs,
@@ -20,6 +20,7 @@ import { connect } from "react-redux";
 import { cryptoPassword } from "@/utils/crypto";
 import requireAPI from "@/utils/requireAPI";
 import { signOut, signIn, checkAuth } from "@/utils/auth";
+import OwnInput from "@/components/OwnInput";
 /* 
 params格式：
         {
@@ -278,7 +279,7 @@ function Login({ handleLogin }) {
                 <p className="text-base text-white mr-4">
                   +{loginInfo.regionCode}
                 </p>
-                <Input
+                {/* <Input
                   clearable
                   placeholder="请输入手机号"
                   // disabled={true}
@@ -294,6 +295,21 @@ function Login({ handleLogin }) {
                     "--font-size": "16px",
                     "--placeholder-color": "#FFFFFF80",
                   }}
+                /> */}
+                <OwnInput
+                  clearable={true}
+                  placeholder="请输入手机号"
+                  // disabled={true}
+                  name="phone_number"
+                  type="number"
+                  maxLength={11}
+                  onChange={(value) => {
+                    setLoginInfo({
+                      ...loginInfo,
+                      mobilePhone: value,
+                    });
+                  }}
+                  value={loginInfo.mobilePhone}
                 />
               </div>
               <Divider />
@@ -301,7 +317,7 @@ function Login({ handleLogin }) {
                 <p className="text-base text-white mr-4 whitespace-nowrap">
                   验证码
                 </p>
-                <Input
+                {/* <Input
                   placeholder="请输入验证码"
                   onChange={(value) => setVeriCode(value)}
                   value={veriCode}
@@ -311,6 +327,14 @@ function Login({ handleLogin }) {
                     "--placeholder-color": "#FFFFFF80",
                     "--font-size": "16px",
                   }}
+                /> */}
+                <OwnInput
+                  placeholder="请输入验证码"
+                  // disabled={true}
+                  name="veriCode"
+                  type="number"
+                  onChange={setVeriCode}
+                  value={veriCode}
                 />
                 <Button
                   shape="rounded"
@@ -338,7 +362,7 @@ function Login({ handleLogin }) {
                 <p className="text-base text-white mr-4">
                   +{loginInfo.regionCode}
                 </p>
-                <Input
+                {/* <Input
                   clearable
                   placeholder="请输入手机号"
                   // disabled={true}
@@ -354,6 +378,21 @@ function Login({ handleLogin }) {
                     "--font-size": "16px",
                     "--placeholder-color": "#FFFFFF80",
                   }}
+                /> */}
+                <OwnInput
+                  clearable={true}
+                  placeholder="请输入手机号"
+                  // disabled={true}
+                  name="phone_number"
+                  type="number"
+                  maxLength={11}
+                  onChange={(value) => {
+                    setLoginInfo({
+                      ...loginInfo,
+                      mobilePhone: value,
+                    });
+                  }}
+                  value={loginInfo.mobilePhone}
                 />
               </div>
               <Divider />
@@ -361,7 +400,7 @@ function Login({ handleLogin }) {
                 <p className="text-base text-white mr-4 whitespace-nowrap">
                   密码
                 </p>
-                <Input
+                {/* <Input
                   clearable
                   placeholder="请输入密码"
                   name="password"
@@ -374,6 +413,17 @@ function Login({ handleLogin }) {
                     "--placeholder-color": "#FFFFFF80",
                     "--font-size": "16px",
                   }}
+                /> */}
+                <OwnInput
+                  clearable={true}
+                  placeholder="请输入密码"
+                  // disabled={true}
+                  name="password"
+                  type="password"
+                  onChange={(value) => {
+                    setLoginInfo({ ...loginInfo, password: value });
+                  }}
+                  value={loginInfo.password}
                 />
               </div>
             </div>
@@ -405,9 +455,7 @@ function Login({ handleLogin }) {
 
 const LoginBtn = ({ loginInfo, setLoginInfo, type, handleSubmit }) => {
   const router = useRouter();
-  useEffect(() => {
+  useEffect(() => {}, []);
-    // console.log("loginInfo", loginInfo);
-  }, []);
   return (
     <div className="mt-16">
       <div className="flex items-center justify-center">

components/OwnInput/index.js

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+// import styles from "./index.module.scss";
+export default function OwnInput({
+  value,
+  onChange,
+  type = "text",
+  name,
+  placeholder,
+  clearable,
+  disabled,
+}) {
+  return (
+    <div className="flex flex-1 relative">
+      <input
+        placeholder={placeholder}
+        disabled={disabled}
+        name={name}
+        type={type}
+        maxLength={11}
+        onChange={(e) => onChange(e.target?.value)}
+        value={value}
+        className="text-[#ffffff] w-full text-[16px] placeholder:text-[#FFFFFF80]"
+      />
+      {clearable && value != "" && (
+        <div className="w-4 h-4 absolute right-2 top-[2px] flex justify-center items-center bg-[#ffffff33] p-1 rounded-full">
+          <FontAwesomeIcon
+            color="#ffffff40"
+            icon={faClose}
+            style={{ maxWidth: "12px" }}
+            onClick={() => {
+              onChange && onChange("");
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}