template-10584/src/pages/user/components/UserFooter.tsx

import {loginBySms} from "@/api/passport/login";
import {useState} from "react";
import Taro from '@tarojs/taro'
import {Popup} from '@nutui/nutui-react-taro'
import {UserParam} from "@/api/system/user/model";
import {Button} from '@nutui/nutui-react-taro'
import {Form, Input} from '@nutui/nutui-react-taro'
import {Copyright} from "@/config/app";
const UserFooter = () => {
  const [openLoginByPhone, setOpenLoginByPhone] = useState(false)
  const [clickNum, setClickNum] = useState<number>(0)
  const [FormData, setFormData] = useState<UserParam>(
    {
      phone: undefined,
      password: undefined
    }
  )

  const onLoginByPhone = () => {
    setFormData({})
    setClickNum(clickNum + 1);
    if (clickNum > 10) {
      setOpenLoginByPhone(true);
    }
  }

  const closeLoginByPhone = () => {
    setClickNum(0)
    setOpenLoginByPhone(false)
  }

  // 提交表单
  const submitByPhone = (values: any) => {
    loginBySms({
      phone: values.phone,
      code: values.code
    }).then(() => {
      setOpenLoginByPhone(false);
      setTimeout(() => {
        Taro.reLaunch({
          url: '/pages/index/index'
        })
      },1000)
    })
  }

  return (
    <>
      <div className={'text-center py-4 w-full text-gray-300'} onClick={onLoginByPhone}>
        {/*<div className={'text-xs text-gray-400 py-1'}>当前版本：{Version}</div>*/}
        {/*<div className={'text-xs text-gray-400 py-1'}>Copyright © { new Date().getFullYear() } {Copyright}</div>*/}
        <div className={'text-xs text-gray-400 py-1'}>{Copyright}</div>
      </div>

      <Popup
        style={{width: '350px', padding: '10px'}}
        visible={openLoginByPhone}
        closeOnOverlayClick={false}
        closeable={true}
        onClose={closeLoginByPhone}
      >
        <Form
          style={{width: '350px',padding: '10px'}}
          divider
          initialValues={FormData}
          labelPosition="left"
          onFinish={(values) => submitByPhone(values)}
          footer={
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                width: '100%'
              }}
            >
              <Button nativeType="submit" block style={{backgroundColor: '#000000',color: '#ffffff'}}>
                提交
              </Button>
            </div>
          }
        >
          <Form.Item
            label={'手机号码'}
            name="phone"
            required
            rules={[{message: '手机号码'}]}
          >
            <Input placeholder="请输入手机号码" maxLength={11} type="text"/>
          </Form.Item>
          <Form.Item
            label={'短信验证码'}
            name="code"
            required
            rules={[{message: '短信验证码'}]}
          >
            <Input placeholder="请输入短信验证码" maxLength={6} type="text"/>
          </Form.Item>
        </Form>
      </Popup>
    </>
  )
}
export default UserFooter