feats

src/components/InputNumber/index.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Input, View } from '@tarojs/components';
+import './style.less'
+
+// eslint-disable-next-line no-restricted-globals
+const isNotaNumber = x => isNaN(x)
+const noop = x => x
+
+export default (props) => {
+  const { className, style, value, step = 1, onChange = noop, ...leftProps } = props
+
+  const handleInput = (e) => {
+    const val = e.detail.value
+
+    if (isNotaNumber(val)) {
+      onChange(undefined)
+    } else {
+      onChange(val - 0)
+    }
+  }
+
+  const handleAdd = () => {
+    if (isNotaNumber(value)) {
+      onChange(step)
+    } else {
+      onChange(value + step)
+    }
+  }
+
+  const handleSub = () => {
+    if (isNotaNumber(value)) {
+      onChange(-step)
+    } else {
+      onChange(value - step)
+    }
+  }
+
+  const cls = [className, 'input-number-wrapper'].filter(Boolean).join(' ')
+
+  return (
+    <View className={cls} style={style}>
+      <View>
+        <View className='input-number' onClick={handleSub}>-</View>
+        <Input value={value} onInput={handleInput} type='number' className='input-number' {...leftProps} />
+        <View className='input-number' onClick={handleAdd}>+</View>
+      </View>
+    </View>
+  )
+}

src/components/InputNumber/style.less

@@ -0,0 +1,32 @@
+
+.input-number-wrapper {
+  display: inline-block;
+
+  & > view {
+    box-sizing: border-box;
+    display: flex;
+    border: 1px solid #999999;
+    border-radius: 8px;
+    font-size: 34px;
+    font-weight: 400;
+    color: #202020;
+  }
+
+  .input-number {
+    box-sizing: border-box;
+    flex: 1;
+    outline: none;
+    height: 60px;
+    line-height: 60px;
+    width: 60px;
+  }
+
+  input {
+    &.input-number {
+      border-left: 1px solid #999999;
+      border-right: 1px solid #999999;
+      font-size: 28px;
+      width: 90px;
+    }
+  }
+}

src/pages/PayOrder/index.jsx

@@ -4,7 +4,7 @@ import { getPackageDetail } from "@/services/home";
 import { saveOrder, getOrderSub, payOrder } from "@/services/payOrder";
 import { useState, useEffect } from "react";
 import formatPrice from "@/utils/formatPrice";
-
+import InputNumber from "@/components/InputNumber";
 import { Button, Checkbox, Input, RadioGroup, Radio } from "@tarojs/components";
 import AuthPage from '@/components/AuthPage'
 import food from "@/assets/icons/ProCard/food.png";
@@ -195,25 +195,7 @@ export default withLayout((props) => {
         <CustomNav title='订单' />
         <Popup show={showDialog} maskClosable={false}>
           <OrderMolded item={detail} />
-          <view className='item-center-Number'>
-            <view
-              className='buy-num-minus'
-              disabled={DisabledBool}
-              onClick={NumberCut}
-            >
-              -
-            </view>
-            <Input
-              className='buy-num-input'
-              type='number'
-              min='1'
-              onInput={onInput}
-              value={BuyNumber}
-            />
-            <view className='buy-num-add' onClick={NumberAdd}>
-              +
-            </view>
-          </view>
+          <InputNumber value={BuyNumber} onChange={x => setBuyNumber(x)} style={{ marginTop: '40rpx' }} />
           <view className='buy-button-box'>
             <button className='button-Cancel' onClick={ButtonCancel}>
               取消