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

2022-09-13 10:05:35 +08:00 · 2022-09-13 10:05:35 +08:00 · a07ca24140
commit a07ca24140
parent 677ea68f27
27 changed files with 42704 additions and 131 deletions
--- a/iconfont.json
+++ b/iconfont.json
@ -1,5 +1,5 @@
 {
-    "symbol_url": "//at.alicdn.com/t/c/font_3619513_6bgg3mtc70o.js",
+    "symbol_url": "//at.alicdn.com/t/c/font_3619513_i9fjrthdbsd.js",
    "save_dir": "./src/components/iconfont",
    "use_typescript": false,
    "platforms": ["weapp","h5"],
--- a/package-lock.json
+++ b/package-lock.json
--- a/project.private.config.json
+++ b/project.private.config.json
@ -8,6 +8,13 @@
  "condition": {
    "miniprogram": {
      "list": [
+        {
+          "name": "登录页面",
+          "pathName": "pages/login/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
        {
          "name": "",
          "pathName": "pages/index/index",
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -1,5 +1,7 @@


+export {LoginApi} from './login/index'
+
 import { useRequest } from "@/use/useHttp"
 /**
 *  系列列表
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@ -0,0 +1 @@
+export {LoginApi} from './login'
--- a/src/api/login/login.ts
+++ b/src/api/login/login.ts
@ -0,0 +1,12 @@
+import { useRequest } from '@/use/useHttp'
+
+/**
+ *  登录
+ * @returns
+ */
+export const LoginApi = () => {
+  return useRequest({
+    url: `/v1/mp/login`,
+    method: 'post',
+  })
+}
--- a/src/app.config.ts
+++ b/src/app.config.ts
@ -11,6 +11,7 @@ export default defineAppConfig({
    'pages/orderDetails/index',
    'pages/addressManager/index',
    'pages/addAddress/index',
+    'pages/login/index',
  ],
  window: {
    backgroundTextStyle: 'light',
--- a/src/components/Divider/index.module.scss
+++ b/src/components/Divider/index.module.scss
@ -1,6 +1,8 @@

 .divider {
  position: relative;
+  font-size: 28px;
+  color: $color_font_one;
  // 垂直
  &-vertical {
    display: inline-block;
@ -22,9 +24,9 @@
    position: absolute;
    text-align: center;
    padding: 0 40px;
+    font-size: inherit;
    font-weight: 500;
-    font-size: 28px;
-    color: #333;
+    color: currentColor;
    background-color: #fff;
  }
 }
--- a/src/components/Divider/index.tsx
+++ b/src/components/Divider/index.tsx
@ -1,57 +1,45 @@
 /**
 * Usage:
- * 
+ *
 * <View>巴拉巴拉小魔仙</View>
 * <Divider direction="vertical" borderStyle="solid"></Divider
 * <View>全身变</View>
- * 
+ *
 */

-import { View } from "@tarojs/components";
-import { FC, ReactNode } from "react";
-import styles from "./index.module.scss";
-import classnames from "classnames";
+import { View } from '@tarojs/components'
+import { FC, ReactNode } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'

 type BorderStype = 'solid' | 'dashed' | 'dotted' | 'double'

 interface DividerProps {
-  direction?: "horizontal" | "vertical";
-  borderStyle?: BorderStype;
-  contentPosition?: "left" | "center" | "right";
-  children?: ReactNode;
+  direction?: 'horizontal' | 'vertical'
+  borderStyle?: BorderStype
+  contentPosition?: 'left' | 'center' | 'right'
+  children?: ReactNode
+  customClassName?: string
 }
-const Divider: FC<DividerProps> = props => {
-  const {
-    direction = "horizontal",
-    borderStyle = "solid",
-    contentPosition = "center"
-  } = props;
+const Divider: FC<DividerProps> = (props) => {
+  const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName='' } = props

-  const classname = classnames(
-    styles["divider"],
-    styles["divider-" + direction]
-  );
-  const contentClassname = classnames(
-    styles["divider-text"],
-    styles["is-" + contentPosition]
-  );
+  const classname = classnames(styles['divider'], styles['divider-' + direction], customClassName)
+  const contentClassname = classnames(styles['divider-text'], styles['is-' + contentPosition])

  const borderTopStyle: { borderTopStyle: BorderStype } = {
-    borderTopStyle: borderStyle
-  };
+    borderTopStyle: borderStyle,
+  }
  const borderLeftStyle: { borderLeftStyle: BorderStype } = {
-    borderLeftStyle: borderStyle
-  };
+    borderLeftStyle: borderStyle,
+  }

-  const dividerStyle =
-    direction === "horizontal" ? borderTopStyle : borderLeftStyle;
+  const dividerStyle = direction === 'horizontal' ? borderTopStyle : borderLeftStyle

  return (
    <View className={classname} style={dividerStyle}>
-      {props.children && direction !== "vertical" && (
-        <View className={contentClassname}>{props.children}</View>
-      )}
+      {props.children && direction !== 'vertical' && <View className={contentClassname}>{props.children}</View>}
    </View>
-  );
-};
+  )
+}
 export default Divider
--- a/src/components/checkbox/index.module.scss
+++ b/src/components/checkbox/index.module.scss
@ -1,32 +1,46 @@
-.checkbox_main{
-    width: 50px;
-    height: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.checkbox_item{
+.checkbox_main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #fff;
+  border: 1px solid #c2c2c2;
+  text-align: center;
+  line-height: 40px;
+  &--normal {
    width: 40px;
    height: 40px;
-    border: 1px solid #707070;
+  }
+  &--small {
+    width: 30px;
+    height: 30px;
+  }
+  &--round {
    border-radius: 50%;
-    text-align: center;
-    line-height: 40px;
-    background-color: #fff;
+  }
+  &--circle {
+    border-radius: 10px;
+  }
+  //   选中
+  &--selected {
+    border-color: $color_main;
+  }
 }
-.no_checkbox_item{
-    border:0;
-    background-color: #DDDDDD;
+.checkbox_item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.no_checkbox_item {
+  border: 0;
+  background-color: #dddddd;
+}
+.checkbox_item_select {
+  background-color: $color_main;
+  border: 0;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 40px;
 }
-.checkbox_item_select{
-    background-color: $color_main;
-    border: 0;
-    color: #fff;
-    width: 40px;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    .miconfont{
-        font-size: 32px;
-    }
-}
--- a/src/components/checkbox/index.tsx
+++ b/src/components/checkbox/index.tsx
@ -1,39 +1,65 @@
-import { View } from "@tarojs/components"
-import classnames from "classnames";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import styles from "./index.module.scss"
+import { View } from '@tarojs/components'
+import classnames from 'classnames'
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import IconFont from '../iconfont'
+import styles from './index.module.scss'
+
+type CheckboxSize = 'normal' | 'small'

 type params = {
  onSelect?: () => void //选择触发
  onClose?: () => void //取消触发
  status?: boolean //是否选中
  disabled?: boolean //是否禁用
+  circle?: boolean
+  round?: boolean
+  size?: CheckboxSize
 }
-export default forwardRef(({onSelect, onClose, status = false, disabled = false}: params, ref) => {
-    const [selected, SetSelected] = useState(false)
-    const onSelectEven = () => {
-        if(disabled) return false
-        let res = !selected
-        if(res) {
-            onSelect?.()
-        } else {
-            onClose?.()
-        }
-        SetSelected(res)
+export default forwardRef((props: params, ref) => {
+  const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal' } = props
+  const [selected, SetSelected] = useState(false)
+  const onSelectEven = () => {
+    if (disabled) return false
+    let res = !selected
+    if (res) {
+      onSelect?.()
+    } else {
+      onClose?.()
    }
-    useImperativeHandle(ref, () => ({
-        onSelectEven
-    }))
-    useEffect(() => {
-        SetSelected(status)
-    }, [status])
-    return (
-        <>
-            <View className={styles.checkbox_main}  onClick={() => onSelectEven()}>
-                <View className={classnames(styles.checkbox_item, disabled&&styles.no_checkbox_item, selected&&styles.checkbox_item_select)}>
-                    {selected&&<View className={classnames('iconfont', 'icon-tick', styles.miconfont)}></View>}
-                </View>
-            </View>
-        </>
-    )
+    SetSelected(res)
+  }
+
+  const getMainClassName = () => {
+    const classObject = {
+      [styles['checkbox_main--selected']]: selected,
+      [styles[`checkbox_main--${size}`]]: size,
+      [styles['checkbox_main--round']]: round,
+      [styles['checkbox_main--circle']]: circle,
+    }
+    return classObject
+  }
+
+  const getClassName = () => {
+    const classObject = {
+      [styles.no_checkbox_item]: disabled,
+      [styles.checkbox_item_select]: selected,
+    }
+    return classObject
+  }
+
+  useImperativeHandle(ref, () => ({
+    onSelectEven,
+  }))
+  useEffect(() => {
+    SetSelected(status)
+  }, [status])
+  return (
+    <>
+      <View className={classnames(styles.checkbox_main, getMainClassName())} onClick={() => onSelectEven()}>
+        <View className={classnames(styles.checkbox_item, getClassName())}>
+          {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
+        </View>
+      </View>
+    </>
+  )
 })
--- a/src/components/iconCard/index.module.scss
+++ b/src/components/iconCard/index.module.scss
@ -3,9 +3,10 @@
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
+  color: $color_font_one;
  &-name{
    font-size: 26px;
-    color: #333;
+    color: currentColor;
    margin-top: 16px;
  }
 }
--- a/src/components/iconCard/index.tsx
+++ b/src/components/iconCard/index.tsx
@ -3,6 +3,8 @@ import { FC, ReactNode } from "react"
 import IconFont from "../iconfont"
 import styles from './index.module.scss'

+import classname from 'classnames'
+
 type IconfontName = Parameters<typeof IconFont>['0']['name']

 interface PropsType {
@ -10,15 +12,17 @@ interface PropsType {
  title: string
  children?: ReactNode
  onClick?: Function
+  customClass?: string
+  iconSize?: number
 }
 const IconCard: FC<PropsType> = (props) => {
-  const { iconName, title, onClick } = props
+  const { iconName, title, onClick, customClass = '', iconSize=72 } = props
  const handleClick = (event) => {
    onClick && onClick(event)
  }
  return (
-    <View className={styles.iconCard} onClick={handleClick}>
-      <IconFont name={iconName} size={72}></IconFont>
+    <View className={classname(styles.iconCard, customClass)} onClick={handleClick}>
+      <IconFont name={iconName} size={iconSize}></IconFont>
      <View className={styles['iconCard-name']}>{title}</View>
    </View>
  )
--- a/src/components/iconfont/h5/IconAJizhumima.js
+++ b/src/components/iconfont/h5/IconAJizhumima.js
@ -0,0 +1,27 @@
+/* eslint-disable */
+
+import React from 'react';
+import { getIconColor } from './helper';
+
+const DEFAULT_STYLE = {
+  display: 'block',
+};
+
+const IconAJizhumima = ({ size, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1152 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
+      <path
+        d="M944.128 74.752a96 96 0 0 1 164.48 98.56l-4.736 7.936-512 768a96 96 0 0 1-140.8 20.992l-6.976-6.4-384-384a96 96 0 0 1 128.512-142.336l7.296 6.592 301.12 301.184 447.104-670.528z"
+        fill={getIconColor(color, 0, '#FFFFFF')}
+      />
+    </svg>
+  );
+};
+
+IconAJizhumima.defaultProps = {
+  size: 18,
+};
+
+export default IconAJizhumima;
--- a/src/components/iconfont/h5/IconJizhumima.js
+++ b/src/components/iconfont/h5/IconJizhumima.js
@ -0,0 +1,31 @@
+/* eslint-disable */
+
+import React from 'react';
+import { getIconColor } from './helper';
+
+const DEFAULT_STYLE = {
+  display: 'block',
+};
+
+const IconJizhumima = ({ size, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
+      <path
+        d="M36.571429 36.571429m146.285714 0l658.285714 0q146.285714 0 146.285714 146.285714l0 658.285714q0 146.285714-146.285714 146.285714l-658.285714 0q-146.285714 0-146.285714-146.285714l0-658.285714q0-146.285714 146.285714-146.285714Z"
+        fill={getIconColor(color, 0, '#337FFF')}
+      />
+      <path
+        d="M722.358857 262.144a54.857143 54.857143 0 0 1 93.988572 56.32l-2.706286 4.534857-292.571429 438.857143a54.857143 54.857143 0 0 1-80.457143 11.995429l-3.986285-3.657143-219.428572-219.428572a54.857143 54.857143 0 0 1 73.435429-81.334857l4.169143 3.766857 172.068571 172.105143 255.488-383.158857z"
+        fill={getIconColor(color, 1, '#FFFFFF')}
+      />
+    </svg>
+  );
+};
+
+IconJizhumima.defaultProps = {
+  size: 18,
+};
+
+export default IconJizhumima;
--- a/src/components/iconfont/h5/IconKehuxinxi.js
+++ b/src/components/iconfont/h5/IconKehuxinxi.js
@ -0,0 +1,32 @@
+/* eslint-disable */
+
+import React from 'react';
+import { getIconColor } from './helper';
+
+const DEFAULT_STYLE = {
+  display: 'block',
+};
+
+const IconKehuxinxi = ({ size, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
+      <path
+        d="M611.008 136c105.744 0 191.472 86.496 191.472 193.2 0 84.128-53.296 155.696-127.68 182.208C828.192 539.68 944 667.856 944 821.76a70.24 70.24 0 0 1-70.24 70.256l-78.624 0.016a81.664 81.664 0 0 0 4.864-27.84c0-166.08-107.52-306.464-255.248-352.336l0.192-0.016-0.48-0.08a350.88 350.88 0 0 0-34.592-8.8l2.48 0.512-2.24-0.608c89.92-29.44 154.88-114.064 154.88-213.856 0-59.04-22.72-112.752-59.92-152.896 1.952-0.064 3.936-0.096 5.92-0.096z"
+        fill={getIconColor(color, 0, '#4581FF')}
+        opacity=".5"
+      />
+      <path
+        d="M440 64c124.272 0 225.008 100.736 225.008 225.008 0 99.872-65.088 184.544-155.136 213.92C675.248 536.224 800 685.28 800 864.192a81.824 81.824 0 0 1-81.824 81.824H161.824a81.824 81.824 0 0 1-81.76-78.352L80 864.16c0-178.88 124.752-327.984 290.128-361.248-90.048-29.376-155.12-114.048-155.12-213.92C215.008 164.736 315.728 64 440 64z m-0.096 442.416l-48.16 233.952c-1.072 5.184 0.208 10.592 3.488 14.752l30.528 38.8a18 18 0 0 0 28.288 0l30.544-38.8c3.264-4.16 4.544-9.568 3.472-14.752l-48.16-233.952z"
+        fill={getIconColor(color, 1, '#4581FF')}
+      />
+    </svg>
+  );
+};
+
+IconKehuxinxi.defaultProps = {
+  size: 18,
+};
+
+export default IconKehuxinxi;
--- a/src/components/iconfont/h5/IconWeixindenglu.js
+++ b/src/components/iconfont/h5/IconWeixindenglu.js
@ -0,0 +1,32 @@
+/* eslint-disable */
+
+import React from 'react';
+import { getIconColor } from './helper';
+
+const DEFAULT_STYLE = {
+  display: 'block',
+};
+
+const IconWeixindenglu = ({ size, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (
+    <svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
+      <path
+        d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
+        fill={getIconColor(color, 0, '#0BBD63')}
+        opacity=".9"
+      />
+      <path
+        d="M622.677333 425.102222c7.210667 0 14.279111 0.540444 21.404445 1.336889C624.910222 336.782222 529.521778 270.222222 420.593778 270.222222 298.851556 270.222222 199.111111 353.536 199.111111 459.377778c0 61.084444 33.166222 111.246222 88.618667 150.215111l-22.129778 66.887111 77.44-38.968889c27.690667 5.461333 49.905778 11.121778 77.553778 11.121778 6.968889 0 13.852444-0.312889 20.650666-0.824889a167.409778 167.409778 0 0 1-6.840888-46.648889c0.042667-97.194667 83.114667-176.071111 188.273777-176.071111z m-119.04-60.302222c16.739556 0 27.733333 11.036444 27.733334 27.776 0 16.654222-11.008 27.804444-27.733334 27.804444-16.554667 0-33.208889-11.150222-33.208889-27.804444 0-16.782222 16.625778-27.776 33.208889-27.776z m-155.008 55.580444c-16.611556 0-33.351111-11.150222-33.351111-27.804444 0-16.739556 16.739556-27.776 33.351111-27.776 16.625778 0 27.662222 11.008 27.662223 27.776 0 16.654222-11.036444 27.804444-27.662223 27.804444zM824.888889 598.471111c0-88.917333-88.618667-161.393778-188.16-161.393778-105.415111 0-188.359111 72.504889-188.359111 161.393778 0 89.173333 82.986667 161.408 188.359111 161.408 22.044444 0 44.316444-5.546667 66.446222-11.121778L763.904 782.222222l-16.64-55.608889C791.708444 693.048889 824.888889 648.618667 824.888889 598.471111z m-249.258667-27.847111c-10.993778 0-22.129778-10.993778-22.129778-22.229333 0-11.079111 11.136-22.229333 22.129778-22.229334 16.824889 0 27.733333 11.150222 27.733334 22.229334 0 11.235556-10.908444 22.229333-27.733334 22.229333z m121.841778 0c-10.922667 0-22.030222-10.993778-22.030222-22.229333 0-11.079111 11.064889-22.229333 22.016-22.229334 16.668444 0 27.733333 11.150222 27.733333 22.229334 0 11.235556-11.064889 22.229333-27.733333 22.229333z"
+        fill={getIconColor(color, 1, '#FFFFFF')}
+      />
+    </svg>
+  );
+};
+
+IconWeixindenglu.defaultProps = {
+  size: 18,
+};
+
+export default IconWeixindenglu;
--- a/src/components/iconfont/h5/index.js
+++ b/src/components/iconfont/h5/index.js
@ -1,6 +1,10 @@
 /* eslint-disable */

 import React from 'react';
+import IconJizhumima from './IconJizhumima';
+import IconAJizhumima from './IconAJizhumima';
+import IconWeixindenglu from './IconWeixindenglu';
+import IconKehuxinxi from './IconKehuxinxi';
 import IconYewuyuanqizi from './IconYewuyuanqizi';
 import IconChakanquanbukehu from './IconChakanquanbukehu';
 import IconBiyan from './IconBiyan';
@ -55,6 +59,10 @@ import IconGerenzhongxin from './IconGerenzhongxin';
 import IconDingdan from './IconDingdan';
 import IconShouye from './IconShouye';
 import IconGouwu from './IconGouwu';
+export { default as IconJizhumima } from './IconJizhumima';
+export { default as IconAJizhumima } from './IconAJizhumima';
+export { default as IconWeixindenglu } from './IconWeixindenglu';
+export { default as IconKehuxinxi } from './IconKehuxinxi';
 export { default as IconYewuyuanqizi } from './IconYewuyuanqizi';
 export { default as IconChakanquanbukehu } from './IconChakanquanbukehu';
 export { default as IconBiyan } from './IconBiyan';
@ -112,6 +120,14 @@ export { default as IconGouwu } from './IconGouwu';

 const IconFont = ({ name, ...rest }) => {
  switch (name) {
+    case 'icon-jizhumima':
+      return <IconJizhumima {...rest} />;
+    case 'icon-a-jizhumima':
+      return <IconAJizhumima {...rest} />;
+    case 'icon-weixindenglu':
+      return <IconWeixindenglu {...rest} />;
+    case 'icon-kehuxinxi':
+      return <IconKehuxinxi {...rest} />;
    case 'icon-yewuyuanqizi':
      return <IconYewuyuanqizi {...rest} />;
    case 'icon-chakanquanbukehu':
--- a/src/components/iconfont/index.d.ts
+++ b/src/components/iconfont/index.d.ts
@ -2,7 +2,7 @@
 import React, { FunctionComponent } from 'react';

 interface Props {
-  name: 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
+  name: 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
  size?: number;
  color?: string | string[];
  style?: React.CSSProperties;
--- a/src/components/iconfont/weapp/weapp.js
+++ b/src/components/iconfont/weapp/weapp.js
@ -1,6 +1,6 @@
 Component({
  properties: {
-    // icon-yewuyuanqizi | icon-chakanquanbukehu | icon-biyan | icon-bianji | icon-daikuan | icon-cangku | icon-guanlidingdan | icon-mima | icon-guanbi | icon-jianshao | icon-dingwei | icon-saomiao | icon-peihuo | icon-shaixuan | icon-paiming | icon-shanchusousuoxinxi | icon-shijian | icon-sousuo | icon-shouhou | icon-sousuofanhui | icon-sousuoshanchu | icon-tuikuan | icon-tishi | icon-xianxiahuizong | icon-xinzeng | icon-yonghuming | icon-yanjing | icon-yufukuan | icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
+    // icon-jizhumima | icon-a-jizhumima | icon-weixindenglu | icon-kehuxinxi | icon-yewuyuanqizi | icon-chakanquanbukehu | icon-biyan | icon-bianji | icon-daikuan | icon-cangku | icon-guanlidingdan | icon-mima | icon-guanbi | icon-jianshao | icon-dingwei | icon-saomiao | icon-peihuo | icon-shaixuan | icon-paiming | icon-shanchusousuoxinxi | icon-shijian | icon-sousuo | icon-shouhou | icon-sousuofanhui | icon-sousuoshanchu | icon-tuikuan | icon-tishi | icon-xianxiahuizong | icon-xinzeng | icon-yonghuming | icon-yanjing | icon-yufukuan | icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
    name: {
      type: String,
    },
--- a/src/components/iconfont/weapp/weapp.wxml
+++ b/src/components/iconfont/weapp/weapp.wxml
@ -1,3 +1,15 @@
+<!--icon-jizhumima-->
+<view wx:if="{{name === 'icon-jizhumima'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M36.571429 36.571429m146.285714 0l658.285714 0q146.285714 0 146.285714 146.285714l0 658.285714q0 146.285714-146.285714 146.285714l-658.285714 0q-146.285714 0-146.285714-146.285714l0-658.285714q0-146.285714 146.285714-146.285714Z' fill='{{(isStr ? colors : colors[0]) || 'rgb(51,127,255)'}}' /%3E%3Cpath d='M722.358857 262.144a54.857143 54.857143 0 0 1 93.988572 56.32l-2.706286 4.534857-292.571429 438.857143a54.857143 54.857143 0 0 1-80.457143 11.995429l-3.986285-3.657143-219.428572-219.428572a54.857143 54.857143 0 0 1 73.435429-81.334857l4.169143 3.766857 172.068571 172.105143 255.488-383.158857z' fill='{{(isStr ? colors : colors[1]) || 'rgb(255,255,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--icon-a-jizhumima-->
+<view wx:if="{{name === 'icon-a-jizhumima'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1152 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M944.128 74.752a96 96 0 0 1 164.48 98.56l-4.736 7.936-512 768a96 96 0 0 1-140.8 20.992l-6.976-6.4-384-384a96 96 0 0 1 128.512-142.336l7.296 6.592 301.12 301.184 447.104-670.528z' fill='{{(isStr ? colors : colors[0]) || 'rgb(255,255,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--icon-weixindenglu-->
+<view wx:if="{{name === 'icon-weixindenglu'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='{{(isStr ? colors : colors[0]) || 'rgb(11,189,99)'}}' opacity='.9' /%3E%3Cpath d='M622.677333 425.102222c7.210667 0 14.279111 0.540444 21.404445 1.336889C624.910222 336.782222 529.521778 270.222222 420.593778 270.222222 298.851556 270.222222 199.111111 353.536 199.111111 459.377778c0 61.084444 33.166222 111.246222 88.618667 150.215111l-22.129778 66.887111 77.44-38.968889c27.690667 5.461333 49.905778 11.121778 77.553778 11.121778 6.968889 0 13.852444-0.312889 20.650666-0.824889a167.409778 167.409778 0 0 1-6.840888-46.648889c0.042667-97.194667 83.114667-176.071111 188.273777-176.071111z m-119.04-60.302222c16.739556 0 27.733333 11.036444 27.733334 27.776 0 16.654222-11.008 27.804444-27.733334 27.804444-16.554667 0-33.208889-11.150222-33.208889-27.804444 0-16.782222 16.625778-27.776 33.208889-27.776z m-155.008 55.580444c-16.611556 0-33.351111-11.150222-33.351111-27.804444 0-16.739556 16.739556-27.776 33.351111-27.776 16.625778 0 27.662222 11.008 27.662223 27.776 0 16.654222-11.036444 27.804444-27.662223 27.804444zM824.888889 598.471111c0-88.917333-88.618667-161.393778-188.16-161.393778-105.415111 0-188.359111 72.504889-188.359111 161.393778 0 89.173333 82.986667 161.408 188.359111 161.408 22.044444 0 44.316444-5.546667 66.446222-11.121778L763.904 782.222222l-16.64-55.608889C791.708444 693.048889 824.888889 648.618667 824.888889 598.471111z m-249.258667-27.847111c-10.993778 0-22.129778-10.993778-22.129778-22.229333 0-11.079111 11.136-22.229333 22.129778-22.229334 16.824889 0 27.733333 11.150222 27.733334 22.229334 0 11.235556-10.908444 22.229333-27.733334 22.229333z m121.841778 0c-10.922667 0-22.030222-10.993778-22.030222-22.229333 0-11.079111 11.064889-22.229333 22.016-22.229334 16.668444 0 27.733333 11.150222 27.733333 22.229334 0 11.235556-11.064889 22.229333-27.733333 22.229333z' fill='{{(isStr ? colors : colors[1]) || 'rgb(255,255,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--icon-kehuxinxi-->
+<view wx:if="{{name === 'icon-kehuxinxi'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M611.008 136c105.744 0 191.472 86.496 191.472 193.2 0 84.128-53.296 155.696-127.68 182.208C828.192 539.68 944 667.856 944 821.76a70.24 70.24 0 0 1-70.24 70.256l-78.624 0.016a81.664 81.664 0 0 0 4.864-27.84c0-166.08-107.52-306.464-255.248-352.336l0.192-0.016-0.48-0.08a350.88 350.88 0 0 0-34.592-8.8l2.48 0.512-2.24-0.608c89.92-29.44 154.88-114.064 154.88-213.856 0-59.04-22.72-112.752-59.92-152.896 1.952-0.064 3.936-0.096 5.92-0.096z' fill='{{(isStr ? colors : colors[0]) || 'rgb(69,129,255)'}}' opacity='.5' /%3E%3Cpath d='M440 64c124.272 0 225.008 100.736 225.008 225.008 0 99.872-65.088 184.544-155.136 213.92C675.248 536.224 800 685.28 800 864.192a81.824 81.824 0 0 1-81.824 81.824H161.824a81.824 81.824 0 0 1-81.76-78.352L80 864.16c0-178.88 124.752-327.984 290.128-361.248-90.048-29.376-155.12-114.048-155.12-213.92C215.008 164.736 315.728 64 440 64z m-0.096 442.416l-48.16 233.952c-1.072 5.184 0.208 10.592 3.488 14.752l30.528 38.8a18 18 0 0 0 28.288 0l30.544-38.8c3.264-4.16 4.544-9.568 3.472-14.752l-48.16-233.952z' fill='{{(isStr ? colors : colors[1]) || 'rgb(69,129,255)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
 <!--icon-yewuyuanqizi-->
 <view wx:if="{{name === 'icon-yewuyuanqizi'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M597.333333 256h213.333334v384h-298.666667l-42.666667-85.333333H298.666667v298.666666H213.333333V170.666667h341.333334l42.666666 85.333333z' fill='{{(isStr ? colors : colors[0]) || 'rgb(246,249,252)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />

--- a/src/components/normalButton/index.module.scss
+++ b/src/components/normalButton/index.module.scss
@ -1,37 +1,69 @@
 .button {
+  $current_color: #fff;
  display: flex;
-  padding: 0 40px;
-  height: 36PX;
-  border: 1px solid $color_main;
-  background-color: #fff;
-  text-align: center;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
+  padding: 0 80px;
+  height: 72px;
+  border: 1px solid $color_main;
+  background-color: #fff;
+  text-align: center;
+  color: #fff;
  &--normal {
-    height: 36PX;
+    height: 72px;
    font-size: $font_size_medium;
  }
  &--small {
-    height: 30PX;
+    height: 60px;
    font-size: $font_size_min;
  }
  &--disabled {
    opacity: $opacity-disabled;
  }
+  // 按钮类型
  &--primary {
    border: 1px solid $color_main;
    color: $color_main;
+    $current_color: $color_main;
  }
  &--danger {
    border: 1px solid $color_danger;
    color: $color_danger;
+    $current_color: $color_danger;
  }
  &--warning {
    border: 1px solid $color_warning;
    color: $color_warning;
+    $current_color: $color_warning;
  }
-  &--circle {
+  &--round {
    border-radius: 50px;
  }
+  &--circle {
+    border-radius: 16px;
+  }
+  &--plain {
+    background-color: currentColor;
+    border-color: currentColor;
+    .button--text {
+      color: #fff;
+    }
+  }
+  &--text {
+    color: currentColor;
+  }
+  // active 伪类
+  &--primary:active {
+    background-color: rgba($color: $color_main, $alpha: 0.5);
+    color: #fff;
+  }
+  &--danger:active {
+    background-color: rgba($color: $color_danger, $alpha: 0.5);
+    color: #fff;
+  }
+  &--warning:active {
+    background-color: rgba($color: $color_warning, $alpha: 0.5);
+    color: #fff;
+  }
 }
--- a/src/components/normalButton/index.tsx
+++ b/src/components/normalButton/index.tsx
@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { FC, ReactNode } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@ -9,18 +9,36 @@ type ButtonSize = 'normal' | 'small'
 interface PropsType {
  size?: ButtonSize
  type?: ButtonType
-  circle?: boolean
+  round?: boolean
  disabled?: boolean
+  plain?: boolean
+  circle?: boolean
  children?: ReactNode
  onClick?: Function
+  customClassName?: string
+  customStyles?: React.CSSProperties
 }

-const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle = false, disabled = false, children, onClick }) => {
+const NormalButton: FC<PropsType> = (props) => {
+  const {
+    type = 'primary',
+    size = 'normal',
+    round = false,
+    disabled = false,
+    children,
+    onClick,
+    plain = false,
+    circle = false,
+    customStyles = {},
+    customClassName = '',
+  } = props
  const getClassName = () => {
    const classObject = {
      [styles[`button--disabled`]]: disabled,
      [styles[`button--${size}`]]: size,
      [styles[`button--${type}`]]: type,
+      [styles['button--round']]: round,
+      [styles['button--plain']]: plain,
      [styles['button--circle']]: circle,
    }
    console.log('classObj==>button', classObject)
@ -35,8 +53,8 @@ const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle
  }

  return (
-    <View className={classnames(styles['button'], getClassName())} onClick={handleClick}>
-      {children}
+    <View className={classnames(styles['button'], getClassName(), customStyles, customClassName)} onClick={handleClick}>
+      <Text className={styles['button--text']}>{children}</Text>
    </View>
  )
 }
--- a/src/pages/login/index.module.scss
+++ b/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;
+  }
 }
--- a/src/pages/login/index.tsx
+++ b/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
--- a/src/pages/user/index.module.scss
+++ b/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;

--- a/src/pages/user/index.tsx
+++ b/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>