✨ feat(购物页面): 购物页面UI完成度80%

src/components/checkbox/index.module.scss

@@ -7,6 +7,7 @@
   }
 }
 .checkbox_main {
+  flex: 0 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -14,6 +15,7 @@
   background-color: #fff;
   border: 1px solid #c2c2c2;
   text-align: center;
+  overflow: hidden;
   line-height: 40px;
   &--normal {
     width: 40px;

src/components/checkbox/index.tsx

@@ -11,15 +11,30 @@ type params = {
   onClose?: () => void //取消触发
   status?: boolean //是否选中
   disabled?: boolean //是否禁用
+  triggerLabel?: boolean   // 点击label是否触发选中
   circle?: boolean
   round?: boolean
   size?: CheckboxSize
   children?: React.ReactNode
   customStyles?: React.CSSProperties
   customClassName?: string
+  customTextClass?: string
 }
 export default forwardRef((props: params, ref) => {
-  const { onSelect, onClose, status = false, disabled = false, circle = false, round = true, size = 'normal', children, customStyles, customClassName } = props
+  const {
+    onSelect,
+    onClose,
+    status = false,
+    disabled = false,
+    circle = false,
+    round = true,
+    triggerLabel = true,
+    size = 'normal',
+    children,
+    customStyles = {},
+    customClassName = '',
+    customTextClass = '',
+  } = props
   const [selected, SetSelected] = useState(false)
   const onSelectEven = () => {
     if (disabled) return false
@@ -32,6 +47,12 @@ export default forwardRef((props: params, ref) => {
     SetSelected(res)
   }
 
+  const handleClickChildren = (event) => {
+    if (!triggerLabel){
+      return event.stopPropagation()
+    }
+  }
+
   const getMainClassName = () => {
     const classObject = {
       [styles['checkbox_main--selected']]: selected,
@@ -57,13 +78,17 @@ export default forwardRef((props: params, ref) => {
     SetSelected(status)
   }, [status])
   return (
-    <View className={classnames(customClassName, styles.checkbox)} onClick={() => onSelectEven()} style={customStyles}>
+    <View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
       <View className={classnames(styles.checkbox_main, getMainClassName())}>
         <View className={classnames(styles.checkbox_item, getClassName())}>
           {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
         </View>
       </View>
-      {children && <View className={styles['checkbox--text']}>{children}</View>}
+      {children && (
+        <View className={classnames(styles['checkbox--text'], customTextClass)} onClick={handleClickChildren}>
+          {children}
+        </View>
+      )}
     </View>
   )
 })