From a32ee6c28143b76c14e32c91c63d0e21ce7c67fe Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Wed, 9 Oct 2024 16:59:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BB=E5=BD=95=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/login/page.js            | 64 +++++++++++++++++++++++++++++++-----
 components/OwnInput/index.js | 42 +++++++++++++++++++++++
 2 files changed, 98 insertions(+), 8 deletions(-)
 create mode 100644 components/OwnInput/index.js

diff --git a/app/login/page.js b/app/login/page.js
index 1509965..3efcd14 100644
--- a/app/login/page.js
+++ b/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(() => {
-    // console.log("loginInfo", loginInfo);
-  }, []);
+  useEffect(() => {}, []);
   return (
     <div className="mt-16">
       <div className="flex items-center justify-center">
diff --git a/components/OwnInput/index.js b/components/OwnInput/index.js
new file mode 100644
index 0000000..48c8045
--- /dev/null
+++ b/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>
+  );
+}