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

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

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>
+    </>
+  )
 })