Przeglądaj źródła

Merge branch 'newsh' into redesign‌-260706

shish 3 dni temu
rodzic
commit
59b21f9eb5

+ 116 - 1
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,7 +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" @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>
@@ -78,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")
     },
@@ -121,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;
     }
   }
 
@@ -214,6 +272,63 @@ export default {
     justify-content: space-between;
     padding: 20upx 0 30upx 0;
     box-sizing: border-box;
+
+    .custom-step-box {
+      display: flex;
+      align-items: center;
+
+      .step-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80upx;
+        height: 76upx;
+        margin: 0;
+        padding: 0;
+        border-radius: 16upx;
+        font-size: 44upx;
+        font-weight: bold;
+        line-height: 1;
+        box-sizing: border-box;
+
+        &::after {
+          border: none;
+        }
+      }
+
+      .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;
+      }
+
+      .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;
+      }
+    }
   }
 }
 </style>

+ 90 - 1
hdApp/src/admin/ghsProduct/detail.vue

@@ -9,6 +9,7 @@
         <view class="tui-pro-title app-size-32">
           <text v-if="productInfo.presell == 1">【预售】</text>
           <text v-if="Number(productInfo.discountPrice) > 0">【推荐】</text>
+          <text v-if="productInfo.variety == 1" class="variety-tag">【多颜色】</text>
           {{ productInfo.name}}
         </view>
         <button
@@ -103,10 +104,48 @@ export default {
       previewContent: [],
       id:0,
       shopId:0,
-      ghsInfo:{}
+      ghsInfo:{},
+      xjData: {},
+      hasColorInfo: {}
     };
   },
   onLoad(option) {},
+  onShow() {
+    // 监听选颜色页面 (xj.vue) 确认后的返回事件与数据
+    if (this.xjData && this.xjData.hasUpdate == 1) {
+      this.customData = (this.hasColorInfo && this.hasColorInfo.id) ? this.hasColorInfo : this.productInfo;
+      if (this.xjData.cancel == 1) {
+        const customData = {
+          ...this.customData,
+          bigCount: 0,
+          smallCount: 0,
+          itemPrice: this.customData.price
+        };
+        this.addItemEvent(customData);
+      } else {
+        const num = Number(this.xjData.stock) || 0;
+        const price = this.xjData.price || this.customData.price;
+        const customData = {
+          ...this.customData,
+          bigCount: num,
+          smallCount: 0,
+          itemPrice: price,
+          bigPrice: price,
+          smallPrice: 0
+        };
+        this.addItemEvent(customData);
+        if (this.popupAction === 'buy') {
+          this.$util.pageTo({ url: this.getAffirmUrl(), type: 2 });
+        } else {
+          uni.showToast({
+            title: '已加入购物车',
+            duration: 1500
+          });
+        }
+      }
+    }
+    this.xjData = {};
+  },
   mounted() {},
   computed: {
     ...mapGetters({ shopUser: "getShopUser",loginInfo: "getLoginInfo" })
@@ -176,6 +215,31 @@ export default {
       }
       return true
     },
+    /**
+     * 跳转到多颜色花材选颜色页面 (xj.vue)
+     * @param {Object} info 花材商品信息
+     * @param {string} actionType 操作类型: 'cart' 加入购物车, 'buy' 立即购买
+     */
+    goToSpecialVariety(info, actionType = 'cart') {
+      this.popupAction = actionType;
+      this.hasColorInfo = info;
+      const stock = Number(info.stock) || 0;
+      if (stock <= 0) {
+        uni.showToast({ title: "没有库存", icon: "none" });
+        return;
+      }
+      const ghsId = this.option.ghsId || (this.ghsInfo && this.ghsInfo.id) || '';
+      const ptItemId = info.itemId || info.id || 0;
+      this.$util.pageTo({
+        url: "/pagesPurchase/xj",
+        query: {
+          stock: info.stock,
+          price: info.price,
+          ghsId: ghsId,
+          ptItemId: ptItemId
+        }
+      });
+    },
     openCartPopup() {
       if (!this.checkLogin()) {
         return
@@ -188,6 +252,10 @@ export default {
         this.$msg('暂无库存')
         return
       }
+      if (this.productInfo.variety == 1) {
+        this.goToSpecialVariety(this.productInfo, 'cart')
+        return
+      }
       this.popupAction = 'cart'
       this.buyNum = 1
       this.popupShow = true
@@ -204,6 +272,10 @@ export default {
         this.$msg('暂无库存')
         return
       }
+      if (this.productInfo.variety == 1) {
+        this.goToSpecialVariety(this.productInfo, 'buy')
+        return
+      }
       this.popupAction = 'buy'
       this.buyNum = 1
       this.popupShow = true
@@ -341,6 +413,23 @@ export default {
   .shop-intro {
     background: #fff;
     padding: 30upx 0 10upx 30upx;
+    .variety-tag {
+      color: #049e2c;
+      font-weight: bold;
+    }
+    .variety-action-row {
+      margin: 10upx 0 20upx;
+      .variety-button {
+        display: inline-block;
+        border: 2upx solid #049e2c;
+        border-radius: 24upx;
+        padding: 10upx 30upx;
+        font-size: 28upx;
+        color: #049e2c;
+        font-weight: bold;
+        text-align: center;
+      }
+    }
     .tui-pro-titbox {
       margin: 30upx 0 20upx;
       @include disFlex(center, space-between);