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

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"],

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",

src/api/index.ts

@@ -1,5 +1,7 @@
 
 
+export {LoginApi} from './login/index'
+
 import { useRequest } from "@/use/useHttp"
 /**
  *  系列列表

src/api/login/index.ts

@@ -0,0 +1 @@
+export {LoginApi} from './login'

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',
+  })
+}

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',

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: currentColor;
-    color: #333;
     background-color: #fff;
   }
 }

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 { View } from '@tarojs/components'
-import { FC, ReactNode } from "react";
+import { FC, ReactNode } from 'react'
-import styles from "./index.module.scss";
+import styles from './index.module.scss'
-import classnames from "classnames";
+import classnames from 'classnames'
 
 type BorderStype = 'solid' | 'dashed' | 'dotted' | 'double'
 
 interface DividerProps {
-  direction?: "horizontal" | "vertical";
+  direction?: 'horizontal' | 'vertical'
-  borderStyle?: BorderStype;
+  borderStyle?: BorderStype
-  contentPosition?: "left" | "center" | "right";
+  contentPosition?: 'left' | 'center' | 'right'
-  children?: ReactNode;
+  children?: ReactNode
+  customClassName?: string
 }
-const Divider: FC<DividerProps> = props => {
+const Divider: FC<DividerProps> = (props) => {
-  const {
+  const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName='' } = props
-    direction = "horizontal",
-    borderStyle = "solid",
-    contentPosition = "center"
-  } = props;
 
-  const classname = classnames(
+  const classname = classnames(styles['divider'], styles['divider-' + direction], customClassName)
-    styles["divider"],
+  const contentClassname = classnames(styles['divider-text'], styles['is-' + contentPosition])
-    styles["divider-" + direction]
-  );
-  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 =
+  const dividerStyle = direction === 'horizontal' ? borderTopStyle : borderLeftStyle
-    direction === "horizontal" ? borderTopStyle : borderLeftStyle;
 
   return (
     <View className={classname} style={dividerStyle}>
-      {props.children && direction !== "vertical" && (
+      {props.children && direction !== 'vertical' && <View className={contentClassname}>{props.children}</View>}
-        <View className={contentClassname}>{props.children}</View>
-      )}
     </View>
-  );
+  )
-};
+}
 export default Divider

src/components/checkbox/index.module.scss

@@ -1,32 +1,46 @@
-.checkbox_main{
+.checkbox_main {
-    width: 50px;
+  display: flex;
-    height: 50px;
+  justify-content: center;
-    display: flex;
+  align-items: center;
-    justify-content: center;
+  position: relative;
-    align-items: center;
+  background-color: #fff;
-}
+  border: 1px solid #c2c2c2;
-.checkbox_item{
+  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;
+  &--circle {
-    background-color: #fff;
+    border-radius: 10px;
+  }
+  //   选中
+  &--selected {
+    border-color: $color_main;
+  }
 }
-.no_checkbox_item{
+.checkbox_item {
-    border:0;
+  display: flex;
-    background-color: #DDDDDD;
+  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;
-    }
-}

src/components/checkbox/index.tsx

@@ -1,39 +1,65 @@
-import { View } from "@tarojs/components"
+import { View } from '@tarojs/components'
-import classnames from "classnames";
+import classnames from 'classnames'
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
-import styles from "./index.module.scss"
+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) => {
+export default forwardRef((props: params, ref) => {
-    const [selected, SetSelected] = useState(false)
+  const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal' } = props
-    const onSelectEven = () => {
+  const [selected, SetSelected] = useState(false)
-        if(disabled) return false
+  const onSelectEven = () => {
-        let res = !selected
+    if (disabled) return false
-        if(res) {
+    let res = !selected
-            onSelect?.()
+    if (res) {
-        } else {
+      onSelect?.()
-            onClose?.()
+    } else {
-        }
+      onClose?.()
-        SetSelected(res)
     }
-    useImperativeHandle(ref, () => ({
+    SetSelected(res)
-        onSelectEven
+  }
-    }))
+
-    useEffect(() => {
+  const getMainClassName = () => {
-        SetSelected(status)
+    const classObject = {
-    }, [status])
+      [styles['checkbox_main--selected']]: selected,
-    return (
+      [styles[`checkbox_main--${size}`]]: size,
-        <>
+      [styles['checkbox_main--round']]: round,
-            <View className={styles.checkbox_main}  onClick={() => onSelectEven()}>
+      [styles['checkbox_main--circle']]: circle,
-                <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>}
+    return classObject
-                </View>
+  }
-            </View>
+
-        </>
+  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>
+    </>
+  )
 })

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;
   }
 }

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}>
+    <View className={classname(styles.iconCard, customClass)} onClick={handleClick}>
-      <IconFont name={iconName} size={72}></IconFont>
+      <IconFont name={iconName} size={iconSize}></IconFont>
       <View className={styles['iconCard-name']}>{title}</View>
     </View>
   )

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;

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;

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;

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;

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':

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;

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,
     },

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" />
 

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;
+  }
 }

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}>
+    <View className={classnames(styles['button'], getClassName(), customStyles, customClassName)} onClick={handleClick}>
-      {children}
+      <Text className={styles['button--text']}>{children}</Text>
     </View>
   )
 }

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 { View, Image, Text, Input, CommonEventFunction } from '@tarojs/components'
-import { FC, useState } from "react"
+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>
+          <Input onInput={handleInputPassword} className={styles['input-bar--password']} type='safe-password' placeholder='请输入密码'></Input>
-          <IconFont name='icon-yanjing' size={48} color='#999999'></IconFont>
+          <View onClick={handlePwdVisible}>
-          <IconFont name='icon-biyan' size={48} color='#999999'></IconFont>
+            {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> */}
+            <MCheckbox status={isRemember} size='small' circle onSelect={selectCallBack} onClose={closeCallBack}></MCheckbox>
-            <Text>记住密码</Text>
+            <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>