初始化商家端

components/uni-number-box/lang.js

@@ -0,0 +1,9 @@
+export default {
+  "zh" : {
+    "不能再少了呦~": "不能再少了呦~",
+    "该商品已售馨": "该商品已售馨",
+    "该商品最多能购买": "该商品最多能购买",
+    "件": "件",
+  }
+
+}

components/uni-number-box/uni-number-box.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="uni-numbox">
+    <view :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" class="uni-numbox__minus" @click.stop="_calcValue('minus')">－</view>
+    <input :disabled="disabled || inputValue <= min" class="uni-numbox__value" type="number" :value="inputValue" @input="changeValue" />
+    <view :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" class="uni-numbox__plus" @click.stop="_calcValue('plus')">＋</view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'UniNumberBox',
+  props: {
+    value: {
+      type: [Number, String],
+      default: 1,
+    },
+    min: {
+      type: [Number, String],
+      default: 1,
+    },
+    max: {
+      type: [Number, String],
+      default: 100,
+    },
+    step: {
+      type: [Number, String],
+      default: 1,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      inputValue: 0,
+      timer: null,
+    }
+  },
+  watch: {
+    value: {
+      handler(value) {
+        if (this.inputValue != +value) {
+          this.inputValue = +value
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    inputValue(newVal, oldVal) {
+      this.timer && clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        if (oldVal === 0) return
+        if (!newVal) return
+        this.$emit('input', newVal)
+        this.$emit('change', newVal)
+      }, 100)
+      // }
+    },
+  },
+  created() {
+    this.inputValue = +this.value
+  },
+  methods: {
+    _calcValue(type) {
+      if (this.disabled) return
+      if (this.max == 0) return this.$message.info('该商品已售馨')
+      if (type === 'minus' && this.inputValue == 1) return this.$message.info('不能再少了呦~')
+      if (type === 'plus' && +this.max <= +this.inputValue) return this.$message.info('该商品最多能购买' + this.max + '件')
+      const scale = this._getDecimalScale()
+      let value = this.inputValue * scale
+      let step = this.step * scale
+      if (type === 'minus') {
+        value -= step
+        if (value < this.min * scale) return
+        if (value > this.max * scale) {
+          value = this.max * scale
+        }
+      } else if (type === 'plus') {
+        value += step
+        if (value > this.max * scale) return
+        if (value < this.min * scale) {
+          value = this.min * scale
+        }
+      }
+      this.inputValue = String(value / scale)
+    },
+    _getDecimalScale() {
+      let scale = 1
+      // 浮点型
+      if (~~this.step !== this.step) {
+        scale = Math.pow(10, (this.step + '').split('.')[1].length)
+      }
+      return scale
+    },
+    changeValue(e) {
+      let value = +e.detail.value ? +e.detail.value : this.min
+      if (value > +this.max) {
+        value = this.max
+        this.$message.info('该商品最多能购买' + this.max + '件')
+      } else if (value < +this.min) {
+        value = this.min
+        this.$message.info('不能再少了呦~')
+      }
+      setTimeout(() => {
+        this.inputValue = parseInt(Number(value))
+      }, 400)
+      return value
+    },
+  },
+}
+</script>
+<style>
+.uni-numbox {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  height: 46upx;
+  position: relative;
+}
+
+.uni-numbox__minus,
+.uni-numbox__plus {
+  margin: 0;
+  width: 46upx;
+  font-size: 32upx;
+  height: 100%;
+  line-height: 46upx;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  position: relative;
+  font-weight: bold;
+  background: #eeeeee;
+  padding: 10rpx 40rpx;
+}
+
+.uni-numbox__value {
+  position: relative;
+  /* background-color: #f9f9f9; */
+  width: 80upx;
+  height: 100%;
+  text-align: center;
+  padding: 0;
+  border-radius: 8rpx;
+  margin: 0 20rpx;
+  /* background: #F7F7F7; */
+}
+
+.uni-numbox--disabled {
+  color: silver;
+  /* background: #f9f9f9; */
+}
+</style>