✨ feat(登录登出): 已完成用户使用账号密码登录登出

src/pages/login/index.tsx

@@ -1,6 +1,6 @@
 import Divider from '@/components/divider'
 import IconFont from '@/components/iconfont'
-import { View, Image, Text, Input, CommonEventFunction } from '@tarojs/components'
+import { View, Image, Text, Input } from '@tarojs/components'
 import { FC, useState } from 'react'
 import styles from './index.module.scss'
 import MCheckbox from '@/components/checkbox'
@@ -8,11 +8,14 @@ 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(false)
+  const [eyesStatus, setEyesStatus] = useState(true)
 
   const handlePwdVisible = () => {
     setEyesStatus((value) => !value)
@@ -30,19 +33,47 @@ const Login: FC = () => {
   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 = () => {
-
+  const handleInputPassword = (event: any) => {
+    const formated = formatInput(event.detail.value)
+    setPassword(formated)
   }
 
-  const { fetchData , state} = LoginApi()
+  const { setToken, setUserInfo } = useUserInfo()
+
+  
+
+  const { fetchData } = LoginApi()
+
+  
+  
+
   const handleLogin = async () => {
-    await fetchData({
+    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.redirectTo({
+        url: '/pages/index/index',
+      })
+    } else {
+      alert.error('登陆失败')
+    }
   }
 
   return (
@@ -61,9 +92,14 @@ const Login: FC = () => {
         <View className={styles['input-bar']}>
           <IconFont name='icon-mima' size={48} color='#999999'></IconFont>
           <Divider direction='vertical'></Divider>
-          <Input onInput={handleInputPassword} className={styles['input-bar--password']} type='safe-password' placeholder='请输入密码'></Input>
+          <Input
+            onInput={handleInputPassword}
+            password={eyesStatus}
+            className={styles['input-bar--password']}
+            type='safe-password'
+            placeholder='请输入密码'></Input>
           <View onClick={handlePwdVisible}>
-            {eyesStatus ? (
+            {!eyesStatus ? (
               <IconFont name='icon-yanjing' size={48} color='#999999'></IconFont>
             ) : (
               <IconFont name='icon-biyan' size={48} color='#999999'></IconFont>
@@ -72,8 +108,9 @@ const Login: FC = () => {
         </View>
         <View className={styles['login-options']}>
           <View className={styles['login-option']}>
-            <MCheckbox status={isRemember} size='small' circle onSelect={selectCallBack} onClose={closeCallBack}></MCheckbox>
-            <Text className={styles.isRememberPwd}>记住密码</Text>
+            <MCheckbox status={isRemember} size='small' circle onSelect={selectCallBack} onClose={closeCallBack}>
+              记住密码
+            </MCheckbox>
           </View>
           <View className={styles['login-option']}>
             <Text className={styles.isForgetPwd}>忘记密码？</Text>