面料详情

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

@@ -1,31 +1,70 @@
 import { Input, View } from "@tarojs/components"
-import { useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
+import {bignumber as mBignumber, add as mAdd, number as mNumber, subtract} from 'mathjs'
 import styles from "./index.module.scss"
 type params = {
     minNum?: number,
     maxNum?: number,
-    step?: number
+    step?: number,
+    defaultNum?: number,
+    digits?: number //多少位小数
 }
-export default ({minNum = 0, maxNum = 100, step=0.1}: params) => {
-    const [count, setCount] = useState(0)
-
+export default ({minNum = 0, maxNum = 100, step=0.1, digits = 1, defaultNum = 3}: params) => {
+    // const [count, setCount] = useState<number | string>(0)
+    const [value, setValue] = useState<any>({count:defaultNum})
     const onPlus = () => {
-        let num = count + step
-        num = num >= maxNum?maxNum:num
-        setCount(num)
+        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
+        num_res = num_res >= maxNum?maxNum:num_res
+        num_res = formatDigits(num_res)
+        setValue({...value, count:num_res})
     }
     const minus = () => {
-        let num = count - step
-        num = num <= minNum?minNum:num
-        setCount(num)
+        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
+        num_res = num_res <= minNum?minNum:num_res
+        setValue({...value, count:num_res})
+    }
+
+    //保留小数
+    const formatDigits = (num) => {
+        num = num + ''
+        if(num.includes('.')) { 
+            let res = num.split('.')
+            let last_num = res[1].substr(0, digits)
+            return res[0] + '.' + last_num
+        }
+        return num
+    }
+    
+
+    const onInputEven = (e) => {
+        let res = e.detail.value
+        if(res != ''&&!isNaN(Number(res))) {
+            setValue({...value, count:formatDigits(res)})
+        } else {
+            let num = parseFloat(res)
+            if(!isNaN(num)) {
+                setValue({...value, count:formatDigits(num)})
+            } else {
+                setValue({...value, count:defaultNum})
+            }
+            
+        }
     }
     return (
         <View className={styles.main}>
             <View className={styles.reduce} onClick={() => minus()}>-</View>
             <View className={styles.input}>
                 <Input 
-                    value={String(count)}
-                    onInput={() => {}}
+                    value={String(value.count)}
+                    onInput={onInputEven}
                     onBlur={() => {}}
                 />
                 <View className={styles.unit}>米</View>