优化

hdApp/src/admin/ghsProduct/components/sel-popup.vue

@@ -1,4 +1,9 @@
 <template>
+  <!--
+    用途：商品购买/加购弹窗中的加减数量与规格选择
+    谁用：花店采购端/客户
+    解决什么问题：提供实体按钮样式的数量加减与输入，提高点击体验
+  -->
   <div class="sel-popup">
     <bottom-popup class="popup-wrap" :show="show" @close="close()">
       <app-close @close="close()" />
@@ -15,18 +20,27 @@
           <div class="tui-scrolldiv-box">
             <div class="tui-number-box tui-bold tui-attr-title">
               <div class="tui-attr-title">数量</div>
-              <number-box 
-                :max="maxStock" 
-                :min="1" 
-                :value="buyNum"
-                :height="64"
-                :width="120"
-                :size="32"
-                :iconSize="44"
-                iconColor="#333333"
-                bgcolor="#F5F7FA"
-                @change="change"
-              ></number-box>
+              <div class="custom-step-box">
+                <button 
+                  class="step-btn step-btn-minus" 
+                  :class="{ 'step-btn-disabled': buyNum <= 1 }"
+                  :disabled="buyNum <= 1" 
+                  @click="reduceNum"
+                >-</button>
+                <input 
+                  class="step-input" 
+                  type="number" 
+                  :value="buyNum" 
+                  @input="onNumInput" 
+                  @blur="onNumBlur" 
+                />
+                <button 
+                  class="step-btn step-btn-plus" 
+                  :class="{ 'step-btn-disabled': buyNum >= maxStock }"
+                  :disabled="buyNum >= maxStock" 
+                  @click="addNum"
+                >+</button>
+              </div>
             </div>
           </div>
         </scroll-view>
@@ -89,6 +103,34 @@ export default {
     change(e) {
       this.$emit("change", e);
     },
+    // 减少购买数量
+    reduceNum() {
+      if (this.buyNum <= 1) return;
+      const val = this.buyNum - 1;
+      this.$emit("change", { value: val });
+    },
+    // 增加购买数量
+    addNum() {
+      if (this.buyNum >= this.maxStock) return;
+      const val = this.buyNum + 1;
+      this.$emit("change", { value: val });
+    },
+    // 监听输入框实时变化
+    onNumInput(e) {
+      let val = parseInt(e.detail.value, 10);
+      if (isNaN(val)) return;
+      this.$emit("change", { value: val });
+    },
+    // 输入框失焦时纠正校验边界
+    onNumBlur(e) {
+      let val = parseInt(e.detail.value, 10);
+      if (isNaN(val) || val < 1) {
+        val = 1;
+      } else if (val > this.maxStock) {
+        val = this.maxStock;
+      }
+      this.$emit("change", { value: val });
+    },
     close() {
       this.$emit("close")
     },
@@ -132,6 +174,11 @@ export default {
     .button-com {
       width: 80%;
       font-size: 32upx;
+      padding: 32.5upx 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
     }
   }
 
@@ -226,41 +273,60 @@ export default {
     padding: 20upx 0 30upx 0;
     box-sizing: border-box;
 
-    ::v-deep .tui-numberbox {
+    .custom-step-box {
       display: flex;
       align-items: center;
 
-      .tui-numbox-icon {
+      .step-btn {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 68upx;
-        height: 68upx;
+        width: 80upx;
+        height: 76upx;
+        margin: 0;
         padding: 0;
-        background-color: #f0f2f5;
-        border-radius: 14upx;
+        border-radius: 16upx;
+        font-size: 44upx;
         font-weight: bold;
-        transition: all 0.2s ease;
+        line-height: 1;
+        box-sizing: border-box;
 
-        &:active {
-          background-color: #e2e8f0;
-          transform: scale(0.96);
+        &::after {
+          border: none;
         }
+      }
 
-        &.tui-disabled {
-          background-color: #f7f8fa;
-          color: #cccccc !important;
-        }
+      .step-btn-minus {
+        background-color: #f2f4f7;
+        color: #333333;
+        border: 1upx solid #e2e8f0;
+      }
+
+      .step-btn-plus {
+        background-color: #049e2c;
+        color: #ffffff;
+        box-shadow: 0 4upx 12upx rgba(4, 158, 44, 0.25);
+      }
+
+      .step-btn-disabled {
+        background-color: #f7f8fa !important;
+        color: #cccccc !important;
+        border-color: #eeeeee !important;
+        box-shadow: none !important;
+        opacity: 0.6;
       }
 
-      .tui-num-input {
-        height: 68upx !important;
-        line-height: 68upx;
-        border-radius: 14upx;
+      .step-input {
+        width: 130upx;
+        height: 76upx;
         margin: 0 16upx;
+        background-color: #f8fafc;
+        border: 1upx solid #e2e8f0;
+        border-radius: 16upx;
+        text-align: center;
+        font-size: 34upx;
         font-weight: bold;
         color: #333333;
-        font-size: 32upx;
       }
     }
   }