zy

src/store/modules/gooddetail/gooddetail.js

@@ -14,33 +14,11 @@ Vue.use(Toast);
 
 const state = {
     goodDetail: {},
-    startNum: 1, //起订量
-    multipleNum: 1, //倍数
-    aggregateNum: 0, //一组的数量
-    stockNum: 0, //库存，
-    zyladderArr: [] //阶梯价
 }
 const mutations = {
-    changGoodDetai(state, payload) {
+    changGoodDetail(state, payload) {
         let data = payload.data
         state.goodDetail = data;
-        if (data.min_buy) {
-            state.startNum = util.aggxde(data.min_buy)
-        }
-        if (data.mpl) {
-            state.multipleNum = util.aggxde(data.mpl)
-        }
-        if (data.min_mpq) {
-            state.aggregateNum = util.aggxde(data.min_mpq)
-        }
-        if (data.goods_number) {
-            state.stockNum = util.aggxde(data.goods_number)
-        }
-        if(data.tiered){
-            for(let i=0;i<data.tiered.length;i++){
-                
-            }
-        }
     }
 }
 const actions = {
@@ -56,7 +34,7 @@ const actions = {
             toast.clear()
             let data = res.data;
             if (data.err_code == 0) {
-                commit("changGoodDetai", { //过滤数据
+                commit("changGoodDetail", { //过滤数据
                     data: data.data
                 })
             } else {

src/views/common/goodsDetail.vue

@@ -5,8 +5,8 @@
       <div class="close" @click="detailsData.isShow = false">
         <i class="icon iconfont icon-guanbi"></i>
       </div>
-      <zy v-if="goodDetail.goods_type==3||goodDetail.goods_type==4"></zy>
-      <ly v-if="goodDetail.goods_type==1||goodDetail.goods_type==2"></ly>
+      <zy v-show="goodDetail.goods_type==3||goodDetail.goods_type==4" :goodDetail="goodDetail"></zy>
+      <ly v-show="goodDetail.goods_type==1||goodDetail.goods_type==2"></ly>
     </div>
   </div>
 </template>
@@ -21,10 +21,6 @@ export default {
       default() {
         return {};
       }
-    },
-    test1: {
-      type: String,
-      default: "1"
     }
   },
   components: {
@@ -47,7 +43,7 @@ export default {
         }
       },
       deep: true
-    },
+    }
   }
 };
 </script>

src/views/common/zyDetail.vue

@@ -133,8 +133,16 @@
         <dl class="clr">
           <dt>购买形式</dt>
           <dd class="tab">
-            <span class="act" v-html="'按'+goodDetail.goods_unit_name+'购买'"></span>
-            <span v-html="'按'+goodDetail.mpq_unit_name+'购买'"></span>
+            <span
+              v-html="'按'+goodDetail.goods_unit_name+'购买'"
+              :class="{'act':navInit==0}"
+              @click="changeNav(0)"
+            ></span>
+            <span
+              v-html="'按'+goodDetail.mpq_unit_name+'购买'"
+              :class="{'act':navInit==1}"
+              @click="changeNav(1)"
+            ></span>
           </dd>
         </dl>
         <dl class="clr">
@@ -144,15 +152,22 @@
           </dt>
           <dd class="details-num">
             <div class="number">
-              <i class="jumpB iconfont icon-jian"></i>
-              <input class="valuepx" type="text" value="1">
-              <i class="addB iconfont icon-jia"></i>
+              <template v-if="navInit==0">
+                <i class="iconfont icon-jian" @click="reduceSingle"></i>
+                <input type="text" v-model.trim="goodsNum" @blur="blurSingle">
+                <i class="iconfont icon-jia" @click="addSingle"></i>
+              </template>
+              <template v-else>
+                <i class="iconfont icon-jian" @click="reduceZu"></i>
+                <input type="text" v-model.trim="ypNum" @blur="blurZu">
+                <i class="iconfont icon-jia" @click="addZu"></i>
+              </template>
               <div class="zyqhcbox" style="display: block;">
                 <div class="zyqhc clr">
                   <div class="lfldiv fl">
                     <font class="icon iconfont icon-tishi fl"></font>
                   </div>
-                  <div class="lfrdiv fr">想要购买更多？直接下单，我们帮您订货</div>
+                  <div class="lfrdiv fr">{{tipText}}</div>
                 </div>
                 <b class="bbiu"></b>
                 <b class="bbiu1"></b>
@@ -165,50 +180,236 @@
             单
             <span class="em1"></span>价
           </dt>
-          <dd class="onePrice">¥0.0018</dd>
+          <dd class="onePrice">¥{{singlePrice}}</dd>
         </dl>
         <dl class="clr">
           <dt>
             合
             <span class="em1"></span>计
           </dt>
-          <dd class="totalPrice">¥0.1800</dd>
+          <dd class="totalPrice">¥{{total}}</dd>
         </dl>
       </div>
     </div>
     <div class="details-foot">
-      <span class="but-blue">立即购买</span>
+      <span class="but-blue">{{btnText}}</span>
       <span class="but-red">加入购物车</span>
     </div>
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import util from "../../util/index";
 export default {
+  props: {
+    goodDetail: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
   data() {
     return {
       isShowMore: false,
-      singleNum: 0,
-      ypNum: 0,
-      singlePrice: 0,
-      total: 0,
-      tipText: ""
+      ypNum: 0, //组
+      singlePrice: 0, //单价
+      tipText: "",
+      btnText: "",
+      navInit: 0,
+      startNum: 1, //起订量
+      multipleNum: 1, //倍数
+      aggregateNum: 0, //一组的数量
+      stockNum: 0, //库存，
+      zyladderArr: [], //阶梯价
+      zySingleInit: 0, //自营数量初始值
+      goodsNum: 0 //商品数量
     };
   },
   computed: {
-    ...mapState({
-      goodDetail: state => state.gooddetail.goodDetail
-    })
+    total() {
+      return (this.goodsNum * this.singlePrice).toFixed(4);
+    }
   },
   watch: {
+    ypNum(now) {
+      this.goodsNum = now * this.aggregateNum;
+    },
     goodDetail: {
-      handler(newV, oldV) {
-        console.log(1111)
+      handler(data) {
+        if (JSON.stringify(data) != "{}") {
+          if (data.min_buy) {
+            this.startNum = util.aggxde(data.min_buy);
+          }
+          if (data.mpl) {
+            this.multipleNum = util.aggxde(data.mpl);
+          }
+          if (data.min_mpq) {
+            this.aggregateNum = util.aggxde(data.min_mpq);
+          }
+          if (data.goods_number) {
+            this.stockNum = util.aggxde(data.goods_number);
+          }
+          if (this.startNum == this.multipleNum) {
+            //倍数和起订量相等
+            this.zySingleInit = this.startNum;
+          } else if (this.startNum > this.multipleNum) {
+            //起订量大于倍数
+            if (this.startNum % this.multipleNum) {
+              //起订量跟倍数的比值为小数
+              this.zySingleInit =
+                Math.ceil(this.startNum / this.multipleNum) * this.multipleNum;
+            } else {
+              //起订量跟倍数的比值为整数时取起订量
+              this.zySingleInit = this.startNum;
+            }
+          } else {
+            //起订量小于倍数
+            this.zySingleInit = this.multipleNum;
+          }
+          if (data.tiered) {
+            for (let i = 0; i < data.tiered.length; i++) {
+              let singleData = data.tiered[i];
+              this.zyladderArr.push({
+                price: Number(singleData.price_cn).toFixed(4),
+                num: util.aggxde(singleData.purchases)
+              });
+            }
+          }
+        }
       },
       deep: true
+    },
+    goodsNum(now) {
+      this.ladderComputer(now);
+      if (Number(now) > this.stockNum) {
+        this.tipText = "库存不足，下单后我们将帮您订货";
+        this.btnText = "预售订货";
+      } else {
+        this.tipText = "想要购买更多？直接下单，我们帮您订货";
+        this.btnText = "立即购买";
+      }
+    },
+    zySingleInit(now) {
+      this.goodsNum = now;
+    }
+  },
+  methods: {
+    changeNav(i) {
+      this.navInit = i;
+      if (i == 1) {
+        if (this.goodsNum % this.aggregateNum) {
+          //如果商品数量除以组数不为整数
+          this.ypNum =
+            Math.ceil(this.goodsNum / this.aggregateNum) * this.aggregateNum;
+        } else {
+          //如果商品数量除以组数为整数
+          this.ypNum = Number(this.goodsNum) / this.aggregateNum;
+        }
+      }
+    },
+    ladderComputer(v) {
+      //阶梯价计算价格v
+      let length = this.zyladderArr.length;
+      if (!length) {
+        //阶梯价的数据为空
+        this.singlePrice = 0;
+        return;
+      } else {
+        //阶梯价的数据不为空
+        if (length == 1) {
+          //阶梯价的数据为1
+          this.singlePrice = this.zyladderArr[0].price;
+          return;
+        } else {
+          //阶梯价的数据不为1
+          if (v <= this.zyladderArr[0].num) {
+            //输入数量小于等于最小值
+            this.singlePrice = this.zyladderArr[0].price;
+            return;
+          } else if (v >= this.zyladderArr[length - 1].num) {
+            //输入数量大于等于最大值
+            this.singlePrice = this.zyladderArr[length - 1].price;
+            return;
+          } else {
+            for (let i = 0; i < this.zyladderArr.length; i++) {
+              if (
+                v >= this.zyladderArr[i].num &&
+                v < this.zyladderArr[i + 1].num
+              ) {
+                this.singlePrice = this.zyladderArr[i].price;
+                break;
+              }
+            }
+          }
+        }
+      }
+    },
+    blurSingle() {
+      //购买数量为0
+      if (!Number(this.goodsNum)) {
+        this.$toast("购买数量不能少于起订量！");
+        this.goodsNum = this.zySingleInit;
+      } else {
+        //购买数量不为0
+        if (Number(this.goodsNum) % this.multipleNum) {
+          //当购买数量不是倍数的整数倍
+          let num =
+            Math.ceil(Number(this.goodsNum) / this.multipleNum) *
+            this.multipleNum;
+          if (num < this.startNum) {
+            //取倍数的整数后小于起订量
+            this.$toast(
+              `购买数量必须为${this.multipleNum}的整数倍且不能少于起订量！`
+            );
+            this.goodsNum = this.zySingleInit;
+          } else {
+            //取倍数的整数后不小于起订量
+            this.$toast(
+              `购买数量必须为${
+                this.multipleNum
+              }的整数倍，我们已为您调整购买数量。`
+            );
+            this.goodsNum = num;
+          }
+        }
       }
     },
-  methods: {}
+    blurZu() {
+      if (Number(this.goodsNum)*Number(this.aggregateNum)<this.startNum) {
+        this.$toast("购买数量不能少于起订量！");
+        this.ypNum =  Math.ceil(this.startNum/this.aggregateNum)
+      } 
+    },
+    reduceSingle() {
+      if (Number(this.goodsNum) <= this.startNum) {
+        //购买数量小于等于起订量
+        this.$toast("购买数量不能少于起订量！");
+      } else {
+        //购买数量大于起订量
+        if (Number(this.goodsNum) - this.multipleNum < this.startNum) {
+          //购买数量减倍数小于起订量
+          this.$toast(
+            `购买数量必须为${this.multipleNum}的整数倍且不能少于起订量！`
+          );
+        } else {
+          this.goodsNum = Number(this.goodsNum) - this.multipleNum;
+        }
+      }
+    },
+    addSingle() {
+      this.goodsNum = Number(this.goodsNum) + this.multipleNum;
+    },
+    reduceZu() {
+      if(Number(this.goodsNum) <= this.startNum){
+          return
+      }else{
+        this.ypNum = Number(this.ypNum) - 1;
+      }
+    },
+    addZu() {
+      this.ypNum = Number(this.ypNum) + 1;
+    }
+  }
 };
 </script>
 

src/views/xianhuo/xianhuo.vue

@@ -210,12 +210,12 @@ export default {
       brand: "",
       encap: "",
       packing: "",
-      classStr: 161,
+      classStr: "",
       brandStr: "",
       encapStr: "",
       packingStr: "",
       secondClass: [], //二级分类的数组
-      addClassStr: 161, //点击确定生成的分类id
+      addClassStr: "", //点击确定生成的分类id
       firstCheckId: "", //当二级数据存在时判断一级数据的id
       firstClassName: "", //第一级数据的name，
       secondClassName: "", //第二级数据的name
@@ -569,14 +569,14 @@ export default {
 }
 .backdrop {
   position: fixed;
-  z-index: 999;
+  z-index:4;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.3);
   &.zIndex {
-    z-index: 87;
+    z-index:1;
   }
 }
 .xianhuo {
@@ -594,7 +594,7 @@ export default {
     .search-sift {
       width: 100%;
       position: relative;
-      z-index: 88;
+      z-index:2;
       .title-cut {
         padding: 0 10px;
         font-size: 14px;