面料详情

package.json

@@ -37,27 +37,28 @@
   "dependencies": {
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.3.10",
+    "@tarojs/react": "3.3.10",
     "@tarojs/runtime": "3.3.10",
     "@tarojs/taro": "3.3.10",
-    "@tarojs/react": "3.3.10",
-    "react-dom": "^17.0.0",
-    "react": "^17.0.0"
+    "mathjs": "^10.4.3",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@types/webpack-env": "^1.13.6",
-    "@types/react": "^17.0.2",
-    "@tarojs/mini-runner": "3.3.10",
     "@babel/core": "^7.8.0",
+    "@tarojs/mini-runner": "3.3.10",
     "@tarojs/webpack-runner": "3.3.10",
+    "@types/react": "^17.0.2",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
     "babel-preset-taro": "3.3.10",
-    "eslint-config-taro": "3.3.10",
     "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-config-taro": "3.3.10",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "stylelint": "9.3.0",
-    "@typescript-eslint/parser": "^4.15.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
     "typescript": "^4.1.0"
   }
 }

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>