138 lines
4.3 KiB
TypeScript
138 lines
4.3 KiB
TypeScript
import Divider from '@/components/divider'
|
|
import IconFont from '@/components/iconfont'
|
|
import { View, Image, Text, Input } from '@tarojs/components'
|
|
import { FC, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
import MCheckbox from '@/components/checkbox'
|
|
import NormalButton from '@/components/normalButton'
|
|
import IconCard from '@/components/iconCard'
|
|
import {memo} from 'react'
|
|
import { LoginApi } from '@/api'
|
|
import Taro from '@tarojs/taro'
|
|
import { alert } from '@/common/common'
|
|
import useUserInfo from '@/use/useUserInfo'
|
|
|
|
const Login: FC = () => {
|
|
const [isRemember, setRemember] = useState(false)
|
|
|
|
const [eyesStatus, setEyesStatus] = useState(true)
|
|
|
|
const handlePwdVisible = () => {
|
|
setEyesStatus((value) => !value)
|
|
}
|
|
|
|
const selectCallBack = () => {
|
|
console.log('selectCallBack')
|
|
setRemember(true)
|
|
}
|
|
const closeCallBack = () => {
|
|
setRemember(false)
|
|
console.log('closeCallBack')
|
|
}
|
|
|
|
const [account, setAccount] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
|
|
const formatInput = (value:string) => {
|
|
return value.trim()
|
|
}
|
|
|
|
const handleInputAccount = (event: any) => {
|
|
const formated = formatInput(event.detail.value)
|
|
setAccount(formated)
|
|
}
|
|
const handleInputPassword = (event: any) => {
|
|
const formated = formatInput(event.detail.value)
|
|
setPassword(formated)
|
|
}
|
|
|
|
const { setToken, setUserInfo } = useUserInfo()
|
|
|
|
|
|
|
|
const { fetchData } = LoginApi()
|
|
|
|
|
|
|
|
|
|
const handleLogin = async () => {
|
|
if (account === '' || password === '') return alert.error('账号密码不能为空！')
|
|
console.log('账户密码：', account, password)
|
|
const res = await fetchData({
|
|
account,
|
|
password,
|
|
})
|
|
console.log('state===>', res)
|
|
if (res.success) {
|
|
alert.success('登陆成功')
|
|
setToken(res.data.token)
|
|
setUserInfo({ ...res.data })
|
|
|
|
Taro.switchTab({
|
|
url: '/pages/index/index',
|
|
})
|
|
} else {
|
|
alert.error('登陆失败')
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<View className={styles.login}>
|
|
<Image className='full-100' mode='widthFix' src='https://s1.ax1x.com/2022/09/08/vqiVZF.png'></Image>
|
|
<View className={styles['login-panel']}>
|
|
<View className={styles['login-title']}>
|
|
<Text>您好，</Text>
|
|
<Text>欢迎来到蜘蛛管家</Text>
|
|
</View>
|
|
<View className={styles['input-bar']}>
|
|
<IconFont name='icon-yonghuming' size={48} color='#999999'></IconFont>
|
|
<Divider direction='vertical'></Divider>
|
|
<Input onInput={handleInputAccount} className={styles['input-bar--account']} placeholder='请输入用户名'></Input>
|
|
</View>
|
|
<View className={styles['input-bar']}>
|
|
<IconFont name='icon-mima' size={48} color='#999999'></IconFont>
|
|
<Divider direction='vertical'></Divider>
|
|
<Input onInput={handleInputPassword} password={eyesStatus} className={styles['input-bar--password']} type='text' placeholder='请输入密码'></Input>
|
|
<View onClick={handlePwdVisible}>
|
|
{!eyesStatus ? (
|
|
<IconFont name='icon-yanjing' size={48} color='#999999'></IconFont>
|
|
) : (
|
|
<IconFont name='icon-biyan' size={48} color='#999999'></IconFont>
|
|
)}
|
|
</View>
|
|
</View>
|
|
<View className={styles['login-options']}>
|
|
<View className={styles['login-option']}>
|
|
<MCheckbox status={isRemember} size='small' circle onSelect={selectCallBack} onClose={closeCallBack}>
|
|
记住密码
|
|
</MCheckbox>
|
|
</View>
|
|
<View className={styles['login-option']}>
|
|
<Text className={styles.isForgetPwd}>忘记密码？</Text>
|
|
</View>
|
|
</View>
|
|
<NormalButton circle plain onClick={handleLogin} customClassName={styles['login-button']}>
|
|
登录
|
|
</NormalButton>
|
|
<QuickLogin />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const QuickLogin: FC = memo(() => {
|
|
return (
|
|
<View className={styles['quick-login']}>
|
|
<Divider direction='horizontal' customClassName={styles['quick-login--divider']}>
|
|
或通过以下方式登录
|
|
</Divider>
|
|
<View className={styles['quick-login--options']}>
|
|
<IconCard iconName='icon-weixindenglu' title='微信登录' customClass={styles['quick-login--iconCard']}></IconCard>
|
|
</View>
|
|
</View>
|
|
)
|
|
})
|
|
|
|
export default Login
|