下单功能

src/pages/details/components/counter/index.module.scss

@@ -7,13 +7,15 @@
     .reduce, .plus{
         font-size: $font_size_big;
         color: $color_main;
-        width: 60px;
-        height: 60px;
+        width: 46px;
+        height: 46px;
         display: flex;
         align-items: center;
         justify-content:center;
         font-size: 50px;
-        // flex:1;
+        background-color: $color_main;
+        color: #fff;
+        border-radius: 8px;
     }
     .input{
         display: flex;
@@ -22,6 +24,7 @@
         padding: 5px 10px;
         box-sizing: border-box;
         width: 106px;
+        border-radius: 10px;
     }
     input{
         font-size: $font_size_medium;

src/pages/details/components/counter/index.tsx

@@ -1,6 +1,6 @@
 import { Input, View } from "@tarojs/components"
 import { useEffect, useMemo, useRef, useState } from "react"
-import {bignumber as mBignumber, add as mAdd, number as mNumber, subtract} from 'mathjs'
+import Big from 'big.js'
 import styles from "./index.module.scss"
 type params = {
     minNum?: number,
@@ -8,56 +8,90 @@ type params = {
     step?: number,
     defaultNum?: number,
     digits?: number //多少位小数
+    onChange?:(val:number) => void,
+    onBlue?:(val:number) => void,
+    onClickBtn?:(val:number) => void,
+    unit?: string
 }
-export default ({minNum = 0, maxNum = 100, step=0.1, digits = 1, defaultNum = 3}: params) => {
-    // const [count, setCount] = useState<number | string>(0)
+export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
     const [value, setValue] = useState<any>({count:defaultNum})
     const onPlus = () => {
         let {count} = value
-        let count_res = mBignumber(count)
-        let step_res = mBignumber(step)
-        let num = mAdd(count_res, step_res)
-        let num_res = mNumber(num) as number
+        let num_res = Big(count).add(step).toNumber()
         num_res = num_res >= maxNum?maxNum:num_res
         num_res = formatDigits(num_res)
         setValue({...value, count:num_res})
+        onChange?.(parseFloat(num_res))
+        onClickBtn?.(parseFloat(num_res))
     }
     const minus = () => {
         let {count} = value
-        let count_res = mBignumber(count)
-        let step_res = mBignumber(step)
-        let num = subtract(count_res, step_res)
-        let num_res = mNumber(num) as number
+        let num_res = Big(count).minus(step).toNumber()
         num_res = num_res <= minNum?minNum:num_res
         setValue({...value, count:num_res})
+        onChange?.(parseFloat(num_res))
+        onClickBtn?.(parseFloat(num_res))
     }
 
     //保留小数
     const formatDigits = (num) => {
         num = num + ''
-        if(num.includes('.')) { 
+        if(num.includes('.')&&digits > 0) { 
+            console.log('num::',num.includes('.'))
             let res = num.split('.')
             let last_num = res[1].substr(0, digits)
             return res[0] + '.' + last_num
         }
-        return num
+        return  parseFloat(num) 
+    }
+
+    //检查数据
+    const checkData = (val) => {
+        let num = parseFloat(val)
+        if(num > maxNum) return maxNum
+        if(num < minNum) return minNum
+        return val
     }
     
 
     const onInputEven = (e) => {
         let res = e.detail.value
-        if(res != ''&&!isNaN(Number(res))) {
-            setValue({...value, count:formatDigits(res)})
+        if(res === '') {
+            setValue({...value, count:minNum})
+            onChange?.(minNum)
+        }
+        else if(!isNaN(Number(res))) {
+            let count = formatDigits(res)
+            count = checkData(count)
+            setValue({...value, count})
+            onChange?.(parseFloat(count as string))
         } else {
             let num = parseFloat(res)
             if(!isNaN(num)) {
-                setValue({...value, count:formatDigits(num)})
+                let count  = formatDigits(num)
+                count = checkData(count)
+                setValue({...value, count})
+                onChange?.(count as number)
             } else {
                 setValue({...value, count:defaultNum})
+                onChange?.(defaultNum)
             }
             
         }
     }
+
+    const onBluerEven = () => {
+        let num = parseFloat(value.count)
+        if(!isNaN(num)) {
+            let count  = formatDigits(num)
+            count = checkData(count)
+            setValue({...value, count})
+            onBlue?.(count as number)
+        } else {
+            setValue({...value, count:defaultNum})
+            onBlue?.(defaultNum)
+        }
+    }   
     return (
         <View className={styles.main}>
             <View className={styles.reduce} onClick={() => minus()}>-</View>
@@ -65,9 +99,10 @@ export default ({minNum = 0, maxNum = 100, step=0.1, digits = 1, defaultNum = 3}
                 <Input 
                     value={String(value.count)}
                     onInput={onInputEven}
-                    onBlur={() => {}}
+                    onBlur={onBluerEven}
+                    type='digit'
                 />
-                <View className={styles.unit}>米</View>
+                <View className={styles.unit}>{unit}</View>
             </View>
             <View className={styles.plus} onClick={() => onPlus()}>+</View>
         </View>