116 lines
4.0 KiB
JavaScript
116 lines
4.0 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"
|
|
import { useDidShow } from "@tarojs/taro"
|
|
import { login, sendCode } from "../../utils/api"
|
|
import { JWT, JWTEXPIRE, SetData, USERINFO } from "../../utils/storage"
|
|
|
|
|
|
const activeEye = eye
|
|
|
|
const Login = () => {
|
|
|
|
|
|
|
|
const [mobile, setMobile] = useState('')
|
|
const [smsCode, setSmsCode] = useState('')
|
|
const [interval, setIntervalTime] = useState(0)
|
|
|
|
|
|
// 返回页面
|
|
const backFn = () => {
|
|
Taro.getCurrentPages().length > 0 && Taro.navigateBack()
|
|
}
|
|
|
|
// 倒计时
|
|
const countDown = async () => {
|
|
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)
|
|
const re = await sendCode(mobile)
|
|
if (!re) return
|
|
Taro.showToast({ title: '验证码发送成功', icon: 'success' })
|
|
}
|
|
|
|
|
|
const loginSubmit = async () => {
|
|
console.log(mobile, smsCode, "code")
|
|
if (!mobile || !smsCode) {
|
|
Taro.showToast({ title: '请完善登陆参数', icon: 'error' })
|
|
return
|
|
}
|
|
Taro.showLoading({ title: '登陆中，请稍后' })
|
|
const re = await login(mobile, '', smsCode)
|
|
Taro.hideLoading()
|
|
if (re) {
|
|
SetData(JWT, re.token, JWTEXPIRE)
|
|
SetData(USERINFO, re.user)
|
|
Taro.redirectTo({ url: '/pages/index/index' })
|
|
}
|
|
|
|
}
|
|
|
|
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="login-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" name="mobile" placeholder="请输手机号" id='mobile' onInput={(v) => {
|
|
setMobile(v.detail.value)
|
|
}} />
|
|
{
|
|
mobile && <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" name="smsCode" type="text" placeholder="请输入验证码" id='code' value={smsCode} onInput={(v) => {
|
|
setSmsCode(v.detail.value)
|
|
}} />
|
|
<Button className="code-btn" disabled={interval > 0} onClick={countDown}>{interval ? interval + 's' : '获取验证码'}</Button>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="login-footer flex flex-col justify-center">
|
|
<Button className="login-btn" onClick={loginSubmit}>登录</Button>
|
|
<View className="quick-login" onClick={() => {
|
|
Taro.redirectTo({ url: '/pages/login/index' })
|
|
}}>密码登录</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
}
|
|
|
|
|
|
export default Login |