对接购物车列表

src/components/checkbox/index.module.scss

@@ -1,26 +1,30 @@
 .checkbox_main{
-    width: 40px;
-    height: 40px;
+    width: 50px;
+    height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .checkbox_item{
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
     border: 1px solid #707070;
     border-radius: 50%;
     text-align: center;
     line-height: 40px;
 }
+.no_checkbox_item{
+    border:0;
+    background-color: #DDDDDD;
+}
 .checkbox_item_select{
     background-color: $color_main;
     border: 0;
     color: #fff;
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
     text-align: center;
-    line-height: 30px;
+    line-height: 40px;
     .miconfont{
         font-size: 26px;
     }

src/components/checkbox/index.tsx

@@ -4,13 +4,15 @@ import { useEffect, useState } from "react";
 import styles from "./index.module.scss"
 
 type params = {
-    onSelect?: () => void,
-    onClose?: () => void,
-    status?: false|true
+    onSelect?: () => void, //选择触发
+    onClose?: () => void, //取消触发
+    status?: false|true //是否选中
+    disabled?: false|true //是否禁用
 }
-export default ({onSelect, onClose, status = false}: params) => {
+export default ({onSelect, onClose, status = false, disabled = false}: params) => {
     const [selected, SetSelected] = useState(false)
     const onSelectEven = () => {
+        if(disabled) return false
         let res = !selected
         if(res) {
             onSelect?.()
@@ -25,7 +27,7 @@ export default ({onSelect, onClose, status = false}: params) => {
     return (
         <>
             <View className={styles.checkbox_main}  onClick={() => onSelectEven()}>
-                <View className={classnames(styles.checkbox_item, selected&&styles.checkbox_item_select)}>
+                <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>