✨ feat(登录页面): 已完成登陆页面UI

src/pages/login/index.tsx

@@ -1,20 +1,53 @@
 import Divider from '@/components/divider'
 import IconFont from '@/components/iconfont'
-import { View, Image, Text, Input } from '@tarojs/components'
-import { FC, useState } from "react"
+import { View, Image, Text, Input, CommonEventFunction } 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'
 
-const Login:FC = () => {
-
+const Login: FC = () => {
   const [isRemember, setRemember] = useState(false)
 
-  
+  const [eyesStatus, setEyesStatus] = useState(false)
+
+  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 handleInputAccount = (event: any) => {
+
+  }
+  const handleInputPassword = () => {
+
+  }
+
+  const { fetchData , state} = LoginApi()
+  const handleLogin = async () => {
+    await fetchData({
+      account,
+      password,
+    })
+  }
 
   return (
     <View className={styles.login}>
-      <Image className='full-100' src='https://imgse.com/i/vqiVZF'></Image>
+      <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>
@@ -23,27 +56,49 @@ const Login:FC = () => {
         <View className={styles['input-bar']}>
           <IconFont name='icon-yonghuming' size={48} color='#999999'></IconFont>
           <Divider direction='vertical'></Divider>
-          <Input className='input-bar--account' placeholder='请输入用户名'></Input>
+          <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 className='input-bar--password' placeholder='请输入密码'></Input>
-          <IconFont name='icon-yanjing' size={48} color='#999999'></IconFont>
-          <IconFont name='icon-biyan' size={48} color='#999999'></IconFont>
+          <Input onInput={handleInputPassword} className={styles['input-bar--password']} type='safe-password' 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} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}></MCheckbox> */}
-            <Text>记住密码</Text>
+            <MCheckbox status={isRemember} size='small' circle onSelect={selectCallBack} onClose={closeCallBack}></MCheckbox>
+            <Text className={styles.isRememberPwd}>记住密码</Text>
           </View>
           <View className={styles['login-option']}>
-            <Text>忘记密码？</Text>
+            <Text className={styles.isForgetPwd}>忘记密码？</Text>
           </View>
         </View>
-        <NormalButton >登录</NormalButton>
+        <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