136 lines
4.9 KiB
JavaScript
136 lines
4.9 KiB
JavaScript
import { Image, Input, Text, View } from "@tarojs/components"
|
||
import back from '@/images/back.png'
|
||
import checked from '@/images/checked.png'
|
||
import eyeClose from '@/images/eyeClose.png'
|
||
import eye from '@/images/eye.png'
|
||
import './index.scss'
|
||
import { Button } from "@nutui/nutui-react-taro"
|
||
import { useState } from "react"
|
||
import Taro from "@tarojs/taro"
|
||
|
||
const activeEye = eye
|
||
|
||
const Login = () => {
|
||
|
||
const [account, setAccount] = useState('')
|
||
const [pwd, setPwd] = useState()
|
||
const [showPwd, setShowPwd] = useState(false)
|
||
const [loginMode, setLoginMode] = useState('account')
|
||
|
||
const [mobile, setMobile] = useState('')
|
||
const [smsCode, setSmsCode] = useState('')
|
||
const [interval, setIntervalTime] = useState(0)
|
||
|
||
|
||
// 返回页面
|
||
const backFn = () => {
|
||
Taro.getCurrentPages().length > 0 && Taro.navigateBack()
|
||
}
|
||
|
||
|
||
// 去登陆
|
||
const loginFn = () => {
|
||
Taro.redirectTo({
|
||
url: '/pages/login/index'
|
||
})
|
||
}
|
||
|
||
//清理数据
|
||
const cleanFn = () => {
|
||
if (loginMode === 'account') {
|
||
setAccount('')
|
||
setPwd('')
|
||
return
|
||
}
|
||
setMobile('')
|
||
setSmsCode('')
|
||
}
|
||
|
||
// 倒计时
|
||
const countDown = () => {
|
||
if (!mobile) {
|
||
return
|
||
}
|
||
setIntervalTime(60)
|
||
if (interval > 0) {
|
||
return
|
||
}
|
||
let start = 60
|
||
const timer = setInterval(() => {
|
||
if (start > 0) {
|
||
start--
|
||
if (start <= 0) {
|
||
clearInterval(timer)
|
||
}
|
||
setIntervalTime(start)
|
||
}
|
||
}, 1000)
|
||
}
|
||
|
||
return <View className="login-frame bg-slate-50 h-screen text-base">
|
||
<View className="login-header flex justify-center items-center text-lg font-bold">
|
||
<Image src={back} className="square-35 absolute left-7" onClick={backFn} />
|
||
<View>新起点</View>
|
||
</View>
|
||
<View className="forgot-container relative">
|
||
<View className="relative font-bold text-lg block h-6 ">忘记密码</View>
|
||
<View>
|
||
<View className="form-item mt-58">
|
||
<View className="form-label">账号</View>
|
||
<View className="form-control relative">
|
||
<Input className="form-input" placeholder="请输入手机号" onInput={(v) => {
|
||
setAccount(v.detail.value)
|
||
}} />
|
||
{
|
||
account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
|
||
}
|
||
|
||
</View>
|
||
</View>
|
||
<View className="form-item mt-22">
|
||
<View className="form-label">验证码</View>
|
||
<View className="form-control relative">
|
||
<Input className="form-input" maxlength={6} placeholder="请输入验证码" onInput={(v) => {
|
||
setSmsCode(v.detail.value)
|
||
}} />
|
||
<Button className="code-btn" disabled={interval > 0} onClick={countDown}>{interval ? interval + 's' : '获取验证码'}</Button>
|
||
</View>
|
||
</View>
|
||
<View className="form-item mt-22">
|
||
<View className="form-label">密码</View>
|
||
<View className="form-control relative">
|
||
<Input className="form-input" type={showPwd ? 'text' : 'password'} placeholder="设置新密码" onInput={(v) => {
|
||
setPwd(v.detail.value)
|
||
}} />
|
||
<Image className="w-6 h-6 absolute right-0 bottom-16" src={showPwd ? activeEye : eyeClose} onClick={() => {
|
||
setShowPwd(v => !v)
|
||
}} />
|
||
</View>
|
||
</View>
|
||
<View className="form-item mt-22">
|
||
<View className="form-label">密码</View>
|
||
<View className="form-control relative">
|
||
<Input className="form-input" type={showPwd ? 'text' : 'password'} placeholder="再次确认新密码" onInput={(v) => {
|
||
setPwd(v.detail.value)
|
||
}} />
|
||
<Image className="w-6 h-6 absolute right-0 bottom-16" src={showPwd ? activeEye : eyeClose} onClick={() => {
|
||
setShowPwd(v => !v)
|
||
}} />
|
||
</View>
|
||
</View>
|
||
<View className="forgot-form-helper">
|
||
<View className="forgot-password" onClick={loginFn}>已有账号，去登陆</View>
|
||
</View>
|
||
<View className="login-footer flex flex-col justify-center">
|
||
<Button className="login-btn">找回密码</Button>
|
||
|
||
</View>
|
||
</View>
|
||
|
||
</View>
|
||
|
||
</View>
|
||
}
|
||
|
||
|
||
export default Login |