From 274a03fe73a1f390d90a90cb6ee936d586395f84 Mon Sep 17 00:00:00 2001
From: Yer <17633066053@163.com>
Date: Thu, 4 May 2023 11:03:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:art:=20=E8=B4=AD=E7=89=A9=E8=BD=A6?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=AD=A5=E8=BF=9B=E5=99=A8=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E6=9B=B4=E6=94=B9=EF=BC=8C=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=86=97=E4=BD=99=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/uni-number-box.vue  | 220 +++++++++++++++++++++++++++++++++
 pages/tabbar/cart/cartList.vue |  32 +----
 2 files changed, 224 insertions(+), 28 deletions(-)
 create mode 100644 components/uni-number-box.vue

diff --git a/components/uni-number-box.vue b/components/uni-number-box.vue
new file mode 100644
index 0000000..220a256
--- /dev/null
+++ b/components/uni-number-box.vue
@@ -0,0 +1,220 @@
+<template>
+	<view class="uni-numbox">
+		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
+		</view>
+		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
+			v-model="inputValue" :style="{background, color}" />
+		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * NumberBox 数字输入框
+	 * @description 带加减按钮的数字输入框
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
+	 * @property {Number} value 输入框当前值
+	 * @property {Number} min 最小值
+	 * @property {Number} max 最大值
+	 * @property {Number} step 每次点击改变的间隔大小
+	 * @property {String} background 背景色
+	 * @property {String} color 字体颜色（前景色）
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+	 */
+
+	export default {
+		name: "UniNumberBox",
+		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			modelValue: {
+				type: [Number, String],
+				default: 1
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			background: {
+				type: String,
+				default: '#f5f5f5'
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+			modelValue(val) {
+				this.inputValue = +val;
+			}
+		},
+		created() {
+			if (this.value === 1) {
+				this.inputValue = +this.modelValue;
+			}
+			if (this.modelValue === 1) {
+				this.inputValue = +this.value;
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				if (this.disabled) {
+					return;
+				}
+				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
+					}
+				}
+
+				if (type === "plus") {
+					value += step;
+					if (value > (this.max * scale)) {
+						return;
+					}
+					if (value < (this.min * scale)) {
+						value = this.min * scale
+					}
+				}
+
+				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+				this.$emit("change", +this.inputValue);
+				// TODO vue2 兼容
+				this.$emit("input", +this.inputValue);
+				// TODO vue3 兼容
+				this.$emit("update:modelValue", +this.inputValue);
+			},
+			_getDecimalScale() {
+
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, String(this.step).split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				this.$emit('blur', event)
+				let value = event.detail.value;
+				if (!value) {
+					// this.inputValue = 0;
+					return;
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+				const scale = this._getDecimalScale();
+				this.inputValue = value.toFixed(String(scale).length - 1);
+				this.$emit("change", +this.inputValue);
+				this.$emit("input", +this.inputValue);
+			},
+			_onFocus(event) {
+				this.$emit('focus', event)
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	$box-height: 48rpx;
+	$bg: #f5f5f5;
+	$br: 4rpx;
+	$color: #333;
+
+	.uni-numbox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-numbox-btns {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 0 8px;
+		background-color: $bg;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-numbox__value {
+		margin: 0 4rpx;
+		background-color: $bg;
+		width: 70rpx;
+		height: $box-height;
+		text-align: center;
+		font-size: 24rpx;
+		border-left-width: 0;
+		border-right-width: 0;
+		color: $color;
+	}
+
+	.uni-numbox__minus {
+		border-top-left-radius: $br;
+		border-bottom-left-radius: $br;
+	}
+
+	.uni-numbox__plus {
+		border-top-right-radius: $br;
+		border-bottom-right-radius: $br;
+	}
+
+	.uni-numbox--text {
+		// fix nvue
+		line-height: 40rpx;
+
+		font-size: 40rpx;
+		font-weight: 300;
+		color: $color;
+	}
+
+	.uni-numbox .uni-numbox--disabled {
+		color: #c0c0c0 !important;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
+	}
+</style>
diff --git a/pages/tabbar/cart/cartList.vue b/pages/tabbar/cart/cartList.vue
index 662908c..8f3e21e 100644
--- a/pages/tabbar/cart/cartList.vue
+++ b/pages/tabbar/cart/cartList.vue
@@ -84,14 +84,7 @@
                   </div>
                 </view>
                 <view>
-                  <!-- #ifndef MP-WEIXIN -->
-                  <u-number-box class="uNumber" :min="1" input-width="70" input-height="40" size="20"
-                    v-model="skuItem.num" @change="numChange(skuItem)"></u-number-box>
-                  <!-- #endif -->
-                    <!-- #ifdef MP-WEIXIN -->
-                    <u-number-box class="uNumber" :min="1" input-width="70" input-height="40" size="20"
-                    v-model="skuItem.num" @change="numChange(skuItem)"></u-number-box>
-                  <!-- #endif -->
+                  <uni-number-box class="uNumber" :min="1" :max="999"  @change="numChange(skuItem)"	 v-model="skuItem.num"></uni-number-box>
                 </view>
                 <!-- 如果当有促销并且促销是 限时抢购 -->
                 <!-- promotions -->
@@ -180,7 +173,9 @@
 <script>
 import * as API_Trade from "@/api/trade";
 import { debounce } from "@/utils/tools.js";
+import uniNumberBox from '@/components/uni-number-box'
 export default {
+  components:{uniNumberBox}, // 数量加减组件
   data() {
     return {
       loading:false,
@@ -359,29 +354,10 @@ export default {
       });
     },
 
-    /**
-     * 点击步进器微信回调
-     */
-    numChange_WEIXIN(callback) {
-      this.WEIXIN_num = callback.value;
-      this.numChange(callback.data, "3");
-    },
-
     /**
      * 点击步进器回调
      */
-     numChange: debounce(function (val, nums) {   
-      console.log(val, nums)
-        // 需要防抖的内容
-      // #ifdef MP-WEIXIN
-      if (nums && nums == "1") {
-        val.num++;
-      } else if (nums && nums == "0") {
-        val.num--;
-      } else if (nums && nums == "3") {
-        val.num = this.WEIXIN_num;
-      }
-      // #endif
+     numChange: debounce(function (val) {   
       this.updateSkuNumFun(val.goodsSku.id, val.num);
     }, 1000),
     /**