购物车添加数量组件

src/components/shopCart/index.tsx

@@ -12,6 +12,7 @@ import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart"
 import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
 import { setParam } from "@/common/system";
 import { debounce } from "@/common/util";
+import Counter from "../counter";
 
 type param = {
     show?: true|false,
@@ -19,11 +20,9 @@ type param = {
 }
 export default ({show = false, onClose}: param) => {
     const selectList = [
-        // {value:-1, title:'不限', unit:'', eunit:''},
-        {value:0, title:'大货', unit:'件', eunit:'kg'},
-        {value:1,title:'剪板', unit:'米', eunit:'m'}, 
-        {value:2,title:'散剪', unit:'米', eunit:'kg'}, 
-        
+        {value:0, title:'大货', unit:'条', eunit:'kg', step:1,  digits:0, minNum:1, maxNum:100000,  defaultNum:1},
+        {value:1,title:'剪板', unit:'米', eunit:'m',  step:1,  digits:2, minNum:0.5, maxNum:9.99, defaultNum:1}, 
+        {value:2,title:'散剪', unit:'米', eunit:'kg', step:1,  digits:2, minNum:5, maxNum:100000, defaultNum:10}, 
     ]
 
     const [selectIndex, setSelectIndex] = useState(0)
@@ -56,7 +55,6 @@ export default ({show = false, onClose}: param) => {
         setLoading(true)
         const {data} = await fetchData()
         let color_list = data.color_list||[]
-        color_list.reverse()
         initList(color_list)
         setList(color_list)
         setLoading(false)
@@ -66,6 +64,7 @@ export default ({show = false, onClose}: param) => {
     const initList = (color_list) => {
         color_list?.map(item => {
             if(selectIndex == item.sale_mode) item.select = true
+            item.count =  formatCount(item)
         })
     }
 
@@ -181,7 +180,13 @@ export default ({show = false, onClose}: param) => {
 
     //格式化数量
     const formatCount = useCallback((item) => {
-        return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm'
+        console.log('item:::',item)
+        return item.sale_mode == 0? item.roll : (item.length/100)
+    }, [])
+
+    //格式化单位
+    const formatUnit = useCallback((item) => {
+        return item.sale_mode == 0? '条':'米'
     }, [])
 
     //预估金额
@@ -205,6 +210,13 @@ export default ({show = false, onClose}: param) => {
             goLink('/pages/order/comfirm')
         }
     }, 500)
+
+    //计数组件
+    const getInputValue = (num, item) => {
+        item.count = parseFloat(num) 
+        setList([...list])
+    }
+
     
     return (
         <View className={styles.shop_cart_main}>
@@ -241,7 +253,17 @@ export default ({show = false, onClose}: param) => {
                                         </View>
                                         <View className={styles.count}>
                                             <View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/{selectList[selectIndex].eunit}</text></View>
-                                            <View className={styles.long}>×{formatCount(item)}</View>
+                                            {/* <View className={styles.long}>×{formatCount(item)}</View> */}
+                                            <Counter
+                                                onBlue={(e) => getInputValue(e, item)} 
+                                                defaultNum={item.count}   
+                                                step={selectList[selectIndex].step} 
+                                                digits={selectList[selectIndex].digits}
+                                                onClickBtn={(e) => getInputValue(e, item)}
+                                                unit={formatUnit(item)}
+                                                minNum={selectList[selectIndex].minNum}
+                                                maxNum={selectList[selectIndex].maxNum}
+                                            />
                                         </View>
                                     </View>
                                 })}