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

src/pages/login/index.module.scss

@@ -1,16 +1,93 @@
+page {
+  height: 100vh;
+}
 .login {
   width: 100%;
   height: 100%;
   background-color: white;
   &-panel {
+    padding: 0 48px;
   }
   &-title {
+    margin-left: 11px;
+    Text {
+      display: block;
+      &:first-child {
+        font-size: 70px;
+        font-weight: 500;
+        color: $color_font_one;
+      }
+      &:last-child {
+        font-size: 40px;
+        color: #727272;
+        font-weight: 500;
+        line-height: 2;
+      }
+    }
   }
   .input-bar {
     display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border: 1px solid #c2c2c2;
+    border-radius: 12px;
+    margin-top: 40px;
+    padding: 20px;
+    font-size: 40px;
+    @mixin inputBaseStyle {
+      display: block;
+      width: 100%;
+      flex: 1 1 auto;
+      padding-left: 20px;
+      font-size: 32px;
+      padding-right: 0;
+    }
     &--account {
+      @include inputBaseStyle;
     }
     &--password {
+      @include inputBaseStyle;
     }
   }
+  &-options {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+  }
+  &-option {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-top: 40px;
+    font-size: 26px;
+    color: #909090;
+  }
+  &-button {
+    margin-top: 120px;
+  }
+}
+.isRememberPwd {
+  display: block;
+  margin-left: 10px;
+}
+.isForgetPwd {
+  margin: 0 20px;
+}
+.quick-login {
+  margin-top: 85px;
+  &--options {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+  &--divider{
+    font-size: 25px;
+    color: #acacac;
+  }
+  &--iconCard{
+    color: #acacac;
+  }
 }

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

src/pages/user/index.module.scss

@@ -86,7 +86,7 @@ page{
 .layoutTitle {
   font-size: 32px;
   font-weight: 600;
-  color: #333;
+  color: $color_font_one;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin-bottom: 20px;
 

src/pages/user/index.tsx

@@ -63,7 +63,7 @@ const UserInfo: FC = () => {
       path: '',
     },
     {
-      iconName: 'icon-shoukuanliebiao',
+      iconName: 'icon-kehuxinxi',
       name: '客户列表',
       path: '',
     },
@@ -124,7 +124,7 @@ const UserInfo: FC = () => {
             <Text className={styles.userno}>064</Text>
           </View>
           <View className={styles.right}>
-            <NormalButton type='primary' circle size='normal' onClick={handleLogout}>
+            <NormalButton type='primary' round size='normal' onClick={handleLogout}>
               退出登录
             </NormalButton>
           </View>