售后开发

src/components/counter/index.module.scss

@@ -0,0 +1,37 @@
+
+.main{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .reduce, .plus{
+        font-size: $font_size_big;
+        color: $color_main;
+        width: 46px;
+        height: 46px;
+        display: flex;
+        align-items: center;
+        justify-content:center;
+        font-size: 50px;
+        background-color: $color_main;
+        color: #fff;
+        border-radius: 8px;
+    }
+    .input{
+        display: flex;
+        align-items: flex-end;
+        background-color: #fff;
+        padding: 5px 10px;
+        box-sizing: border-box;
+        width: 106px;
+        border-radius: 10px;
+    }
+    input{
+        font-size: $font_size_medium;
+    }
+    .unit{
+        font-size: $font_size_min;
+        color: $color_font_two;
+    }   
+    
+}

src/components/counter/index.tsx

@@ -0,0 +1,111 @@
+import { Input, View } from "@tarojs/components"
+import { useEffect, useMemo, useRef, useState } from "react"
+import Big from 'big.js'
+import styles from "./index.module.scss"
+type params = {
+    minNum?: number, //最小值
+    maxNum?: number, //最大值
+    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=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
+    const [value, setValue] = useState<any>({count:defaultNum})
+
+    const onPlus = () => {
+        let {count} = value
+        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 num_res = Big(count).minus(step).toNumber()
+        num_res = num_res < minNum?0:num_res
+        setValue({...value, count:num_res})
+        onChange?.(parseFloat(num_res))
+        onClickBtn?.(parseFloat(num_res))
+    }
+
+    //保留小数
+    const formatDigits = (num) => {
+        num = num + ''
+        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  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 === '') {
+            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)) {
+                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>
+            <View className={styles.input}>
+                <Input 
+                    value={String(value.count)}
+                    onInput={onInputEven}
+                    onBlur={onBluerEven}
+                    type='digit'
+                />
+                <View className={styles.unit}>{unit}</View>
+            </View>
+            <View className={styles.plus} onClick={() => onPlus()}>+</View>
+        </View>
+    )
+}