✨ feat(购物车): 使用context解决跨层级问题

src/components/checkbox/index.tsx

@@ -10,9 +10,9 @@ type params = {
   onSelect?: () => void //选择触发
   onClose?: () => void //取消触发
   status?: boolean //是否选中
-  hidden?: boolean   // 隐藏单选框
+  hiddenCheckboxIcon?: boolean // 隐藏多选框
   disabled?: boolean //是否禁用
-  triggerLabel?: boolean   // 点击label是否触发选中
+  triggerLabel?: boolean // 点击label是否触发选中
   circle?: boolean
   round?: boolean
   size?: CheckboxSize
@@ -35,7 +35,7 @@ export default forwardRef((props: params, ref) => {
     customStyles = {},
     customClassName = '',
     customTextClass = '',
-    hidden = false,
+    hiddenCheckboxIcon = false,
   } = props
   const [selected, SetSelected] = useState(false)
   const onSelectEven = () => {
@@ -81,11 +81,14 @@ export default forwardRef((props: params, ref) => {
   }, [status])
   return (
     <View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
-      <View className={classnames(styles.checkbox_main, getMainClassName())} hidden={hidden}>
-        <View className={classnames(styles.checkbox_item, getClassName())}>
-          {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
+      {!hiddenCheckboxIcon && (
+        <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>
-      </View>
+      )}
+
       {children && (
         <View className={classnames(styles['checkbox--text'], customTextClass)} onClick={handleClickChildren}>
           {children}

src/components/counter/index.tsx

@@ -12,22 +12,24 @@ type params = {
     onBlue?:(val:number) => void, //失去焦点触发
     onClickBtn?:(val:number) => void, 
     unit?: string,
-    disable?: true|false, //是否禁用
+    disable?: boolean, //是否禁用
 }
 export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
     const [value, setValue] = useState<any>({count:defaultNum})
 
-    const onPlus = () => {
-        if(disable) return false
-        let {count} = value
+    const onPlus = (event) => {
+        event.stopPropagation()
+        if (disable) return false
+        let { count } = value
         let num_res = Big(count).add(step).toNumber()
-        num_res = num_res >= maxNum?maxNum:num_res
+        num_res = num_res >= maxNum ? maxNum : num_res
         num_res = formatDigits(num_res)
-        setValue({...value, count:num_res})
+        setValue({ ...value, count: num_res })
         onChange?.(parseFloat(num_res))
         onClickBtn?.(parseFloat(num_res))
     }
-    const minus = () => {
+    const minus = (event) => {
+        event.stopPropagation()
         if(disable) return false
         let {count} = value
         let num_res = Big(count).minus(step).toNumber()
@@ -98,7 +100,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
     }   
     return (
         <View className={styles.main}>
-            <View className={styles.reduce} onClick={() => minus()}>-</View>
+            <View className={styles.reduce} onClick={minus}>-</View>
             <View className={styles.input}>
                 <Input 
                     value={String(value.count)}
@@ -109,7 +111,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
                 />
                 <View className={styles.unit}>{unit}</View>
             </View>
-            <View className={styles.plus} onClick={() => onPlus()}>+</View>
+            <View className={styles.plus} onClick={onPlus}>+</View>
         </View>
     )
-}
+}