103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
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, Version} from "@/utils/config";
|
||
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 bg-gray-50 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>
|
||
|
||
<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
|