tiefen_space_h5/app/login/page.js

"use client";

import React, { useState, useRef } from "react";

import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { Input, Button, Swiper, Tabs, Divider, Checkbox } from "antd-mobile";
import { useRouter } from "next/navigation";
import styles from "./index.module.css";

/* 
params格式：
        {
          mid: item.mid,
        }
*/
const tabItems = [
  { key: "code", title: "验证码登录" },
  { key: "password", title: "帐号密码登录" },
];
export default function Login({}) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [regionCode, setRegionCode] = useState("");
  const [mobilePhone, setMobilePhone] = useState("");
  const [veriCode, setVeriCode] = useState("");
  const [password, setPassword] = useState("");
  const [isCounting, setIsCounting] = useState(false);
  const [seconds, setSeconds] = useState(60);
  const swiperRef = useRef(null);
  return (
    <div className={`${styles.loginBox}`}>
      <div className="mt-32 flex justify-between items-center px-2 text-gray-400 sticky top-0 z-10 bg-deepBg">
        <Tabs
          activeKey={tabItems[activeIndex].key}
          onChange={(key) => {
            const index = tabItems.findIndex((item) => item.key === key);
            setActiveIndex(index);
            swiperRef.current?.swipeTo(index);
          }}
          className={`w-full ${styles.customTabs}`}
        >
          {tabItems.map((item) => (
            <Tabs.Tab
              forceRender={false}
              title={item.title}
              key={item.key}
              className="text-left"
            />
          ))}
        </Tabs>
      </div>
      <Swiper
        className="overflow-visible mt-6 "
        direction="horizontal"
        loop
        indicator={() => null}
        ref={swiperRef}
        defaultIndex={activeIndex}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item className="px-10">
          <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">
              <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>
          </div>

          <LoginBtn />
        </Swiper.Item>
        <Swiper.Item className="px-10">
          <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">
              <p className="text-base text-white mr-4 whitespace-nowrap">
                密码
              </p>
              <Input
                placeholder="请输入密码"
                onChangeText={(value) => setVeriCode(value)}
                value={password}
                type="number"
                style={{
                  "--placeholder-color": "#FFFFFF80",
                  "--font-size": "16px",
                }}
              />
            </div>
          </div>
          <LoginBtn />
        </Swiper.Item>
      </Swiper>
    </div>
  );
}

const LoginBtn = () => {

  const router = useRouter();
  return (
    <div className="mt-16">
      <div className="flex items-center">
        <Checkbox
          style={{
            "--icon-size": "14px",
            "--font-size": "14px",
            "--gap": "6px",
          }}
        ></Checkbox>
        <span className="text-[#FFFFFF80] font-medium text-xs ml-2">
          我确认已满18周岁并同意
          <span
            onClick={() =>
              router.push(
                `${process.env.NEXT_PUBLIC_WEB_URL}/doc/useragreement`
              )
            }
            className="text-[#FF669E] text-xs"
          >
            《用户协议》
          </span>
          、
          <span
            onClick={() =>
              router.push(
                `${process.env.NEXT_PUBLIC_WEB_URL}/doc/useragreement`
              )
            }
            className="text-[#FF669E] text-xs"
          >
            《隐私政策》
          </span>
        </span>
      </div>
      <Button
        shape="rounded"
        size="middle"
        block
        // onClick={handleSubmit}
        style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
        className="mt-2"
      >
        登录
      </Button>
    </div>
  );
};