✨ 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>

src/pages/user/index.tsx

@@ -1,6 +1,5 @@
-import { isEmptyObject } from '@/common/common'
-import { Button, View, Image, Text } from '@tarojs/components'
-import { FC, memo, useMemo, useState } from 'react'
+import { View, Image, Text } from '@tarojs/components'
+import { FC, useState } from 'react'
 import styles from './index.module.scss'
 import defaultAvatar from '../../styles/image/defaultAvatar.png'
 import NormalButton from '@/components/normalButton'
@@ -9,6 +8,8 @@ import Divider from '@/components/Divider'
 import LayoutBlock from '@/components/layoutBlock'
 import IconCard from '@/components/iconCard'
 import IconFont from '@/components/iconfont'
+import useUserInfo from '@/use/useUserInfo'
+import { goLink } from '@/common/common'
 
 type IconfontName = Parameters<typeof IconFont>['0']['name']
 type IconCardType = {
@@ -19,11 +20,13 @@ type IconCardType = {
 
 // 用户信息
 const UserInfo: FC = () => {
-  const [userInfo, setUserInfo] = useState({
-    avatarUrl: '',
-    username: '',
-    userno: '',
-  })
+  const { removeToken, removeUserInfo, userInfo } = useUserInfo()
+  console.log('userInfo==>', userInfo)
+  // const [userInfo, setUserInfo] = useState({
+  //   avatarUrl: '',
+  //   username: '',
+  //   userno: '',
+  // })
   
 
   const feature: IconCardType[] = [
@@ -110,18 +113,24 @@ const UserInfo: FC = () => {
     },
   ]
 
-  const handleLogout = () => {}
+
+  // 退出登录
+  const handleLogout = () => {
+    removeToken()
+    removeUserInfo()
+    goLink('/pages/login/index', {}, 'reLaunch')
+  }
 
   return (
     <>
       <LayoutBlock circle>
         <View className={styles.topBar}>
           <View className={styles.left}>
-            <UserAvatar src={userInfo.avatarUrl} />
+            <UserAvatar src={userInfo.userInfo.avatar_url} />
           </View>
           <View className={styles.middle}>
-            <Text className={styles.username}>杨子杰</Text>
-            <Text className={styles.userno}>064</Text>
+            <Text className={styles.username}>{userInfo.userInfo.user_name}</Text>
+            <Text className={styles.userno}>{userInfo.userInfo.user_code}</Text>
           </View>
           <View className={styles.right}>
             <NormalButton type='primary' round size='normal' onClick={handleLogout}>
@@ -161,13 +170,6 @@ const UserInfo: FC = () => {
           })}
         </View>
       </LayoutBlock>
-      {/* <LayoutBlock circle>
-        <View className={styles.layoutTabBar}>
-          <View className={styles.layoutTitle}>客户列表</View>
-          <View className={styles.layoutDescription}>查看全部客户 ▶</View>
-        </View>
-        asdfasdfasdfas 
-      </LayoutBlock> */}
     </>
   )
 }