h5zyly

93b8acc2 · 施宇 · 58ae9c5f · 93b8acc2 · 93b8acc2 · 93b8acc2
Commit 93b8acc2 authored May 24, 2019 by 施宇
Showing with 1092 additions and 356 deletions
src/api/index.js
src/assets/css/zyly/zyly.scss
src/store/modules/gooddetail/gooddetail.js
src/views/common/addCarAlert.vue
src/views/common/goodsDetail.vue
src/views/common/lyDetail.vue
src/views/common/zyDetail.vue
src/views/xianhuo/xianhuo.vue
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -293,7 +293,9 @@ export const apis = {
  /****获取弹出商品信息 */
  goodDetail: productionUrlApi + '/goods/detail',
  /****获取zy默认class查询 */
-  defaultClass:productionUrl+'api/defaultClass'
+  defaultClass:productionUrl+'api/defaultClass',
+  /******添加到购物车或者下单 */
+  addGood:productionUrlApi+'/cart/add'
 };


@@ -462,6 +464,9 @@ export const services = {
  },
  defaultClass(params){
    return axios.post(apis.defaultClass,params)
+  },
+  addGood(params){
+    return axios.post(apis.addGood,params)
  }

 };
\ No newline at end of file
--- a/src/assets/css/zyly/zyly.scss
+++ b/src/assets/css/zyly/zyly.scss
+@function remFun($rem) {
+  @return $rem * 50/37.5;
+}
+
+.zl_Detail {
+  * {
+    box-sizing: border-box;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+  }
+
+  .details-head {
+    .head_top {
+      border-bottom: 1px solid #d6d7dc;
+      padding: 10px;
+
+      .head_top_left {
+        width: 56px;
+
+        img {
+          display: block;
+          width: 56px;
+          height: 56px;
+          border: 1px solid #e5e5e5;
+        }
+      }
+
+      .head_top_right {
+        padding-left: 66px;
+
+        h4 {
+          padding-bottom: 10px;
+          font-size: 18px;
+          color: #333333;
+        }
+      }
+    }
+
+    .head_bottom {
+      border-bottom: 1px solid #d6d7dc;
+      padding: 5px 10px;
+
+      li {
+        width: 50%;
+        line-height: 20px;
+        height: 20px;
+        font-size: 12px;
+        color: #999;
+
+        b {
+          display: block;
+          float: left;
+          line-height: 20px;
+          height: 20px;
+          font-weight: 400;
+        }
+
+        span {
+          color: #333;
+          line-height: 20px;
+          height: 20px;
+          display: block;
+          padding: 0 5px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .f-orange {
+          color: #ffa200;
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  .details-cont {
+    position: absolute;
+    top: 149px;
+    bottom: 44px;
+    width: 100%;
+    padding: 10px;
+    overflow-y: auto;
+
+    .gradient {
+      width: 100%;
+
+      table {
+        width: 100%;
+        line-height: 32px;
+        font-size: 12px;
+        text-align: center;
+        color: #666666;
+        border: 1px solid #d9d9d9;
+
+        .xs-6 {
+          width: 50%;
+        }
+
+        .xs-4 {
+          width: 33.33%;
+        }
+
+        .xs-3 {
+          width:25%;
+        }
+
+        th {
+          border: 1px solid #d9d9d9;
+          font-weight: 400;
+          color: #666;
+        }
+
+        td {
+          border: 1px solid #d9d9d9;
+          color: #333;
+        }
+      }
+
+      .zkxk {
+        font-size: 12px;
+        height: 24px;
+        line-height: 24px;
+        border: 1px solid #e5e5e5;
+        border-top: none;
+        text-align: center;
+        color: #666;
+
+        .icon-top {
+          bottom: 9px;
+          position: relative;
+          content: "";
+          height: 0;
+          width: 0;
+          pointer-events: none;
+          border: solid transparent;
+          border-bottom-color: #4d4d4d;
+          border-width: 4px;
+          margin-left: 5px;
+        }
+
+        .icon-bot {
+          top: 9px;
+          position: relative;
+          content: "";
+          height: 0;
+          width: 0;
+          pointer-events: none;
+          border: solid transparent;
+          border-top-color: #4d4d4d;
+          border-width: 4px;
+          margin-left: 5px;
+        }
+      }
+    }
+
+    .price {
+      padding-top: 10px;
+
+      .zyqhc {
+        position: absolute;
+        width: remFun(3.4rem);
+        height: remFun(0.7rem);
+        color: #999;
+        font-size: remFun(0.2rem);
+        border: 1px solid #ffa200;
+        left: 130px;
+        line-height: remFun(0.28rem);
+        padding: remFun(0.05rem);
+        box-shadow: 0px 0px 3px #ffd07f;
+        border-radius: 3px;
+
+        .lfldiv {
+          width: remFun(0.3rem);
+
+          font {
+            position: relative;
+            font-size: remFun(0.22rem);
+            margin-right: remFun(0.05rem);
+          }
+        }
+
+        .lfrdiv {
+          width: remFun(2.9rem);
+        }
+      }
+
+      .bbiu {
+        display: inline-block;
+        position: absolute;
+        border-width: 6px;
+        border-style: solid;
+        border-color: transparent #ffa200 transparent transparent;
+        left: 118px;
+        top: remFun(0.15rem);
+      }
+
+      .bbiu1 {
+        display: inline-block;
+        position: absolute;
+        border-width: 6px;
+        border-style: solid;
+        border-color: transparent #fff transparent transparent;
+        left: 120px;
+        top: remFun(0.15rem);
+      }
+
+      .em1 {
+        padding: 0 0.5em;
+      }
+
+      dl {
+        font-size: 12px;
+
+        dt {
+          width: 5em;
+          color: #999;
+          float: left;
+          line-height: 30px;
+        }
+
+        dd {
+          padding-left: 5em;
+          color: #333;
+          line-height: 30px;
+
+          &.onePrice {
+            font-size: 14px;
+          }
+
+          &.totalPrice {
+            font-weight: bold;
+            color: red;
+            font-size: 14px;
+          }
+
+          &.tab {
+            span {
+              display: block;
+              float: left;
+              margin: 2px 10px 0 0;
+              color: #333;
+              height: 23px;
+              line-height: 22px;
+              padding: 0 10px;
+              border: 1px solid #d9d9d9;
+              border-radius: 3px;
+              background: #fff;
+
+              &.act {
+                color: #e10601;
+                border-color: #e10601;
+              }
+              &.act-blue {
+                color: #1080d0;
+                border-color: #1080d0;
+              }
+            }
+          }
+
+          .number {
+            float: left;
+            width: 118px;
+            height: 30px;
+            border: 1px solid #d9d9d9;
+            border-radius: 3px;
+            background: #fff;
+            position: relative;
+
+            i {
+              cursor: pointer;
+              height: 28px;
+              width: 28px;
+              text-align: center;
+              line-height: 28px;
+              display: block;
+              float: left;
+              background: none;
+              color: #999999;
+              font-size: 18px;
+            }
+
+            input {
+              text-align: center;
+              float: left;
+              padding: 4px 5px;
+              line-height: 20px;
+              height: 28px;
+              width: 60px;
+              background: none;
+              color: #333333;
+              font-size: 12px;
+              border: none;
+              border-left: 1px solid #e5e5e5;
+              border-right: 1px solid #e5e5e5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .details-foot {
+    height: 43px;
+    border-top: 1px solid #d6d7dc;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+
+    span {
+      width: 50%;
+      display: block;
+      float: left;
+      height: 43px;
+      line-height: 43px;
+      font-size: 14px;
+      color: #fff;
+      text-decoration: none;
+      text-align: center;
+      border: none;
+
+      &.but-blue {
+        background: #1080d0;
+      }
+
+      &.but-red {
+        background: #e10601;
+      }
+    }
+  }
+}
\ No newline at end of file
--- a/src/store/modules/gooddetail/gooddetail.js
+++ b/src/store/modules/gooddetail/gooddetail.js
@@ -5,21 +5,30 @@ import {
 import {
    services as Services
 } from '../../../api/index'
-import util
-from '../../../util/index';

 var qs = require('qs');

 Vue.use(Toast);

 const state = {
-    goodDetail: {},
+    zygoodDetail: {},
+    lygoodDetail: {},
+    isShowAlert: false,
+    tipText: ""
 }
 const mutations = {
-    changGoodDetail(state, payload) {
+    changeZyGoodDetail(state, payload) {
        let data = payload.data
-        state.goodDetail = data;
-    }
+        state.zygoodDetail = data;
+    },
+    changeLyGoodDetail(state, payload) {
+        let data = payload.data
+        state.lygoodDetail = data;
+    },
+    closeAlert(state) {
+        state.isShowAlert = false,
+            state.tipText = ""
+    },
 }
 const actions = {
    getDetailData({
@@ -27,23 +36,64 @@ const actions = {
    }, payload) {
        const toast = Toast.loading({
            message: '加载中...',
-            duration: 0
+            duration: 0,
+            forbidClick: true
        });
-        state.goodDetail = {};
+        state.zygoodDetail = {};
+        state.lygoodDetail = {};
        Services.goodDetail(qs.stringify(payload.data)).then((res) => {
            toast.clear()
            let data = res.data;
            if (data.err_code == 0) {
-                commit("changGoodDetail", { //过滤数据
+               if(data.data.goods_type == 3 || data.data.goods_type == 4){//自营
+                    commit('changeZyGoodDetail',{
+                        data:data.data
+                    })
+               }else if(data.data.goods_type == 1 || data.data.goods_type==2){//联营
+                commit("changeLyGoodDetail", { //过滤数据
                    data: data.data
                })
+               }
+              
            } else {

            }
        }).catch(function (err) {
            toast.clear()
        });
-    }
+    },
+    addGoods({
+        commit
+    }, payload) {
+        const toast = Toast.loading({
+            message: '加载中...',
+            duration: 0,
+            forbidClick: true
+        });
+        state.isShowAlert = false;
+        state.tipText = ""
+        Services.addGood(qs.stringify(payload.data.datax)).then((res) => {
+            toast.clear()
+            let data = res.data;
+            if (data.err_code == 0) {
+                if (payload.data.datax.buy == 1) {
+                    window.sessionStorage.setItem("car_xk", data.data);
+                    if (payload.data.type == 1) {
+                        window.location.href = "/v3/order/confirm?type=zy&k=" + payload.data.k
+                    } else {
+                        window.location.href = "/v3/order/confirm?type=other&k=" + payload.data.k
+                    }
+                } else {
+                    state.isShowAlert = true;
+                    state.tipText = data.err_msg
+                }
+            } else {
+                Toast(data.err_msg);
+            }
+        }).catch(function (err) {
+            toast.clear();
+        });
+    },
 }

 export default {

--- a/src/views/common/addCarAlert.vue
+++ b/src/views/common/addCarAlert.vue
+<template>
+  <div class="addCarAlert">
+    <div class="backdrop" v-if="isShowAlert" @click="closeAlert">
+      <div class="pop-tip">
+        <div class="window-img">
+          <div class="title">
+            <i class="iconfont icon-guanbi close"></i>
+          </div>
+          <dl class="box-img">
+            <dt>
+              <i class="icon iconfont icon-xuanzhong"></i>
+            </dt>
+            <dd>{{tipText}}</dd>
+            <dd>
+              <a href="/v3/joincart" class="qu-car">去购物车结算 &gt;&gt;</a>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  computed: {
+    ...mapState({
+      isShowAlert: state => state.gooddetail.isShowAlert,
+      tipText: state => state.gooddetail.tipText
+    })
+  },
+  methods: {
+    closeAlert() {
+      this.$store.commit("closeAlert");
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.addCarAlert {
+  .backdrop {
+    position: fixed;
+    z-index: 4;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    &.zIndex {
+      z-index: 1;
+    }
+    .pop-tip {
+      .window-img {
+        background: #fff;
+        position: fixed;
+        top: 25%;
+        left: 50%;
+        z-index: 101;
+        border-radius: 3px;
+        width: 80%;
+        transform: translateX(-50%);
+      }
+      .title {
+        position: relative;
+        width: 100%;
+        i {
+          right: 0;
+          top: -22px;
+          position: absolute;
+          color: #fff;
+        }
+      }
+      .box-img {
+        text-align: center;
+        padding: 20px 10px 30px 10px;
+        dt {
+          width: 35px;
+          height: 35px;
+          line-height: 42px;
+          margin: 0 auto;
+          border-radius: 50%;
+          margin-bottom: 5px;
+          .iconfont {
+            font-size: 27px;
+            font-weight: bold;
+            color: #1080d0;
+          }
+        }
+        dd {
+          font-size: 14px;
+          color: #333;
+          padding-top: 10px;
+          line-height: 20px;
+          a {
+            color: #1080d0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
--- a/src/views/common/goodsDetail.vue
+++ b/src/views/common/goodsDetail.vue
 <template>
-  <div class="details-pop" v-if="detailsData.isShow">
-    <div class="mui-backdrop" style="opacity:1" @click="detailsData.isShow = false"></div>
-    <div class="mui-poppicker mui-active">
-      <div class="close" @click="detailsData.isShow = false">
-        <i class="icon iconfont icon-guanbi"></i>
+  <div class="good_detail_alert">
+    <div v-if="detailsData.isShow" class="details-pop">
+      <div class="mui-backdrop" style="opacity:1" @click="detailsData.isShow = false"></div>
+      <div class="mui-poppicker mui-active">
+        <div class="close" @click="detailsData.isShow = false">
+          <i class="icon iconfont icon-guanbi"></i>
+        </div>
+        <zy v-show="zygoodDetail.goods_type==3||zygoodDetail.goods_type==4" :goodDetail="zygoodDetail"></zy>
+        <ly v-show="lygoodDetail.goods_type==1||lygoodDetail.goods_type==2" :goodDetail="lygoodDetail"></ly>
      </div>
-      <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>
 <script>
-import zy from "@/views/common/zyDetail";
-import ly from "@/views/common/lyDetail";
 import { mapState } from "vuex";
 export default {
  props: {
@@ -24,22 +24,30 @@ export default {
    }
  },
  components: {
-    zy,
-    ly
+    zy: resolve => {
+      require(["@/views/common/zyDetail"], resolve);
+    }, //懒加载
+    ly: resolve => {
+      require(["@/views/common/lyDetail"], resolve);
+    } //懒加载
  },
  computed: {
    ...mapState({
-      goodDetail: state => state.gooddetail.goodDetail
+      zygoodDetail: state => state.gooddetail.zygoodDetail,
+      lygoodDetail:state => state.gooddetail.lygoodDetail
    })
  },
  watch: {
    detailsData: {
      handler(newV, oldV) {
        if (newV.isShow) {
+          document.body.style.overflow = "hidden";
          this.$store.dispatch({
            type: "getDetailData",
            data: { id: newV.id }
          });
+        } else {
+          document.body.style.overflow = "auto";
        }
      },
      deep: true
@@ -48,42 +56,44 @@ export default {
 };
 </script>
 <style lang="scss">
-.details-pop {
-  position: fixed;
-  left: 0px;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: 999;
-  overflow: hidden;
-  .mui-backdrop {
+.good_detail_alert {
+  .details-pop {
    position: fixed;
-    z-index: 87;
+    left: 0px;
    top: 0;
    right: 0;
    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-  .mui-poppicker {
    width: 100%;
-    z-index: 90;
-    position: absolute;
-    top: 20%;
-    bottom: 0px;
-    background-color: #fff;
-    border-top: solid 1px #ccc;
-    -webkit-transition: 0.3s;
-    -webkit-transform: translateY(300px);
-    &.mui-active {
-      -webkit-transform: translateY(0px);
+    z-index: 999;
+    overflow: hidden;
+    .mui-backdrop {
+      position: fixed;
+      z-index: 87;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(0, 0, 0, 0.3);
    }
-    .close {
+    .mui-poppicker {
+      width: 100%;
+      z-index: 90;
      position: absolute;
-      top: -25px;
-      right: 10px;
-      color: #fff;
+      top: 20%;
+      bottom: 0px;
+      background-color: #fff;
+      border-top: solid 1px #ccc;
+      -webkit-transition: 0.3s;
+      -webkit-transform: translateY(300px);
+      &.mui-active {
+        -webkit-transform: translateY(0px);
+      }
+      .close {
+        position: absolute;
+        top: -25px;
+        right: 10px;
+        color: #fff;
+      }
    }
  }
 }

--- a/src/views/common/lyDetail.vue
+++ b/src/views/common/lyDetail.vue
 <template>
-    <div>111111</div>
+  <div class="zl_Detail">
+    <div class="details-head">
+      <div class="head_top clr">
+        <div class="head_top_left fl">
+          <img :src="goodDetail.brand_logo" @error="imgErr">
+        </div>
+        <div class="head_top_right">
+          <h4>
+            <strong>{{goodDetail.goods_name}}</strong>
+          </h4>
+          <p class="icon-hint"></p>
+        </div>
+      </div>
+      <ul class="head_bottom clr">
+        <li class="fl">
+          <b>型号</b>
+          <span>{{goodDetail.goods_name}}</span>
+        </li>
+        <li class="fl">
+          <b>供应商</b>
+          <span>{{goodDetail.supplier_name}}</span>
+        </li>
+        <li class="fl">
+          <b>制造商</b>
+          <span>{{goodDetail.brand_name}}</span>
+        </li>
+        <li class="fl">
+          <b>封装</b>
+          <span>{{goodDetail.encap?goodDetail.encap:'--'}}</span>
+        </li>
+        <li class="fl" v-if="goodDetail.product_batch!==''">
+          <b>批次</b>
+          <span>{{goodDetail.product_batch?goodDetail.product_batch:'--'}}</span>
+        </li>
+        <li class="fl">
+          <b>起订量</b>
+          <font class="f-orange" v-html="goodDetail.min_buy?goodDetail.min_buy:'1'"></font>
+        </li>
+        <li class="fl">
+          <b>倍数</b>
+          <font class="f-orange" v-html="goodDetail.multiple?goodDetail.multiple:'1'"></font>
+        </li>
+        <li class="fl">
+          <b>MPQ</b>
+          <span class="minMpqP" v-html="goodDetail.min_mpq?goodDetail.min_mpq:'1'"></span>
+        </li>
+        <li v-if="goodDetail.tariffRate!==''" class="fl">
+          <b>额外关税</b>
+          <span class="f-orange">'{{goodDetail.tariffRate}}</span>
+        </li>
+
+        <li class="fl">
+          <b class>库存</b>
+          <font class="f-orange" v-html="goodDetail.goods_number?goodDetail.goods_number:'0'"></font>
+        </li>
+        <li
+          class="fl"
+          style=" width: 100%; overflow:hidden;text-overflow:ellipsis;white-space: nowrap;color: #999;"
+          v-if="goodDetail.sku_name"
+        >描述：{{goodDetail.goods_desc}}</li>
+      </ul>
+    </div>
+    <div class="details-cont" style="top: 210px;">
+      <div class="gradient">
+        <table>
+          <tbody>
+            <tr>
+              <template v-if="goodDetail.ac_type == 2 || goodDetail.ac_type == 3">
+                <th class="xs-3">数量</th>
+                <th class="xs-3">原价(含税)</th>
+                <th class="xs-3">优惠价(含税)</th>
+                <th class="xs-3">美金</th>
+              </template>
+              <template v-else>
+                <th class="xs-4">数量</th>
+                <th class="xs-4">人民币</th>
+                <th class="xs-4">美金</th>
+              </template>
+            </tr>
+          </tbody>
+          <tbody>
+            <template v-if="goodDetail.tiered">
+              <tr v-for="(v,k) in goodDetail.tiered" v-if="k<3||isShowMore">
+                <template v-if="goodDetail.ac_type == 2 || goodDetail.ac_type == 3">
+                  <td class="xs-3">
+                    <span v-html="v.purchases+'+'"></span>
+                  </td>
+                  <td class="xs-3">
+                    <span v-html="v.price_cn+'￥'"></span>
+                  </td>
+                  <td class="xs-3">
+                    <span v-html="v.price_ac+'￥'"></span>
+                  </td>
+                  <td class="xs-3">
+                    <span v-html="v.price_us+'$'"></span>
+                  </td>
+                </template>
+                <template v-else>
+                  <td class="xs-4">
+                    <span v-html="v.purchases+'+'"></span>
+                  </td>
+                  <td class="xs-4">
+                    <span v-html="v.price_cn+'￥'"></span>
+                  </td>
+                  <td class="xs-4">
+                    <span v-html="v.price_us+'$'"></span>
+                  </td>
+                </template>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+        <template v-if="goodDetail.tiered">
+          <div
+            class="zkxk"
+            v-if="goodDetail.tiered.length>3&&!isShowMore"
+            @click="isShowMore=!isShowMore"
+          >
+            更多梯度价格
+            <i class="icon-bot"></i>
+          </div>
+          <div class="zkxk" v-if="isShowMore" @click="isShowMore=!isShowMore">
+            收起梯度价格
+            <i class="icon-top"></i>
+          </div>
+        </template>
+      </div>
+      <div class="price">
+        <dl class="clr">
+          <dt>交货地</dt>
+          <dd class="tab">
+            <span :class="{'act-blue':navInit==0}" @click="changeNav(0)">国内交货</span>
+            <span :class="{'act-blue':navInit==1}" @click="changeNav(1)">香港交货</span>
+          </dd>
+        </dl>
+        <dl class="clr">
+          <dt>
+            货
+            <span class="em1"></span>
+            期
+          </dt>
+          <dd>
+            <span v-if="navInit == 0">{{goodDetail.delivery_time&&goodDetail.delivery_time[1]}}</span>
+            <span v-else>{{goodDetail.delivery_time&&goodDetail.delivery_time[2]}}</span>
+          </dd>
+        </dl>
+        <dl class="clr">
+          <dt>
+            数
+            <span class="em1"></span>量
+          </dt>
+          <dd class="details-num">
+            <div class="number">
+              <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>
+            </div>
+          </dd>
+        </dl>
+        <dl class="clr">
+          <dt>
+            单
+            <span class="em1"></span>价
+          </dt>
+          <dd class="onePrice" v-if="navInit==0">¥{{singlePriceCn}}</dd>
+          <dd class="onePrice" v-else>${{singlePriceUs}}</dd>
+        </dl>
+        <dl class="clr">
+          <dt>
+            合
+            <span class="em1"></span>计
+          </dt>
+          <dd class="totalPrice">{{total}}</dd>
+        </dl>
+      </div>
+    </div>
+    <div class="details-foot">
+      <span class="but-blue" @click="xdOrAdd('1')">立即购买</span>
+      <span class="but-red" @click="xdOrAdd('2')">加入购物车</span>
+    </div>
+  </div>
 </template>
+<script>
+import util from "../../util/index";
+export default {
+  props: {
+    goodDetail: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      isShowMore: false,
+      singlePriceCn: 0, //国内单价
+      singlePriceUs: 0, //香港单价
+      navInit: 0,
+      startNum: 0, //起订量
+      multipleNum: 0, //倍数
+      aggregateNum: 0, //一组的数量
+      stockNum: 0, //库存，
+      zyladderArr: [], //阶梯价
+      zySingleInit: 0, //自营数量初始值
+      goodsNum: 0 //商品数量
+    };
+  },
+  computed: {
+    total() {
+      if (this.navInit == 1) {
+        //香港
+        return "$" + (this.goodsNum * this.singlePriceUs).toFixed(4);
+      } else {
+        //国内
+        return "￥" + (this.goodsNum * this.singlePriceCn).toFixed(4);
+      }
+    }
+  },
+  watch: {
+    "goodDetail.goods_id"() {
+      let data = this.goodDetail;
+      if (JSON.stringify(data) != "{}") {
+        if (
+          this.goodDetail.goods_type == 1 ||
+          this.goodDetail.goods_type == 2
+        ) {
+          if (data.min_buy) {
+            this.startNum = util.aggxde(data.min_buy);
+          }
+          if (data.multiple) {
+            this.multipleNum = util.aggxde(data.multiple);
+          }
+          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({
+                pricecn: Number(singleData.price_cn).toFixed(4),
+                num: util.aggxde(singleData.purchases),
+                priceus: Number(singleData.price_us).toFixed(4)
+              });
+            }
+          }
+        }
+      }
+    },
+    goodsNum(now) {
+      if (String(now).indexOf(".") > 0) this.goodsNum = "";
+      this.goodsNum = String(now).replace(/\D/g, "");
+      this.ladderComputer(now);
+      if (Number(now) > this.stockNum) {
+        this.$toast("购买数量不能大于库存！");
+        this.goodsNum = this.stockNum;
+      }
+    },
+    zySingleInit(now) {
+      this.goodsNum = now;
+    }
+  },
+  methods: {
+    imgErr() {
+      this.goodDetail.brand_logo =
+        "https://www.ichunt.com/v3/dist/res/m/images/materiel_img_3.png";
+    },
+    changeNav(i) {
+      this.navInit = i;
+    },
+    ladderComputer(v) {
+      let length = this.zyladderArr.length;
+      //阶梯价计算价格v
+      if (!length) {
+        //阶梯价的数据为空
+        this.singlePriceCn = 0;
+        this.singlePriceUs = 0;
+        return;
+      } else {
+        //阶梯价的数据不为空
+        if (length == 1) {
+          //阶梯价的数据为1
+          this.singlePriceCn = this.zyladderArr[0].pricecn;
+          this.singlePriceUs = this.zyladderArr[0].priceus;
+          return;
+        } else {
+          //阶梯价的数据不为1
+          if (v <= this.zyladderArr[0].num) {
+            //输入数量小于等于最小值
+            this.singlePriceCn = this.zyladderArr[0].pricecn;
+            this.singlePriceUs = this.zyladderArr[0].priceus;
+            return;
+          } else if (v >= this.zyladderArr[length - 1].num) {
+            //输入数量大于等于最大值
+            this.singlePriceCn = this.zyladderArr[length - 1].pricecn;
+            this.singlePriceUs = this.zyladderArr[length - 1].priceus;
+            return;
+          } else {
+            for (let i = 0; i < this.zyladderArr.length; i++) {
+              if (
+                v >= this.zyladderArr[i].num &&
+                v < this.zyladderArr[i + 1].num
+              ) {
+                this.singlePriceCn = this.zyladderArr[i].pricecn;
+                this.singlePriceUs = this.zyladderArr[i].priceus;
+                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;
+          }
+        } else {
+          if (Number(this.goodsNum) < this.zySingleInit) {
+            this.$toast(
+              `购买数量必须为${this.multipleNum}的整数倍且不能少于起订量！`
+            );
+            this.goodsNum = this.zySingleInit;
+          }
+        }
+      }
+    },
+    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;
+    },
+    xdOrAdd(type) {
+      //1购买 2加入购物车
+      let datax = {
+        id: this.goodDetail.goods_id,
+        num: this.goodsNum,
+        buy: type == 1 ? 1 : -1,
+        delivery_place: this.navInit == 0 ? 1 : 2,
+        searchModel: this.$route.query.k || "",
+        module_name: this.goodDetail.module_name || "",
+        click_adtag: this.$route.query.adtag || this.$route.query.ptag || "",
+        click_ptag: util.getCookie("ptag") || ""
+      };
+      if (type == 1) {
+        //立即购买
+        try {
+          sensors.track("brandList", {
+            click_ptag: this.goodDetail.module_name || "",
+            click_adtag:
+              this.$route.query.adtag || this.$route.query.ptag || "",
+            element_name: "立即购买",
+            click_account: this.goodDetail.account_name || "",
+            brand_id: this.goodDetail.brand_id || "",
+            class_id: this.goodDetail.class_id || "",
+            supplier_id: this.goodDetail.supplier_id || ""
+          });
+        } catch (e) {}
+      } else {
+        //加入购物车
+        try {
+          sensors.track("brandList", {
+            click_ptag: this.goodDetail.module_name || "",
+            click_adtag:
+              this.$route.query.adtag || this.$route.query.ptag || "",
+            element_name: "加入购物车",
+            click_account: this.goodDetail.account_name || "",
+            brand_id: this.goodDetail.brand_id || "",
+            class_id: this.goodDetail.class_id || "",
+            supplier_id: this.goodDetail.supplier_id || ""
+          });
+        } catch (e) {}
+      }
+      this.$store.dispatch({
+        type: "addGoods",
+        data: { datax: datax, type: 2, k: this.$route.query.k || "" } //1表示自营 2表示联营
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/css/zyly/zyly.scss";
+</style>
+
+
--- a/src/views/common/zyDetail.vue
+++ b/src/views/common/zyDetail.vue
@@ -3,7 +3,7 @@
    <div class="details-head">
      <div class="head_top clr">
        <div class="head_top_left fl">
-          <img :src="goodDetail.brand_logo">
+          <img :src="goodDetail.brand_logo" @onerror="imgErr">
        </div>
        <div class="head_top_right">
          <h4>
@@ -192,8 +192,8 @@
      </div>
    </div>
    <div class="details-foot">
-      <span class="but-blue">{{btnText}}</span>
-      <span class="but-red">加入购物车</span>
+      <span class="but-blue" @click="xdOrAdd('1')">{{btnText}}</span>
+      <span class="but-red" @click="xdOrAdd('2')">加入购物车</span>
    </div>
  </div>
 </template>
@@ -216,8 +216,8 @@ export default {
      tipText: "",
      btnText: "",
      navInit: 0,
-      startNum: 1, //起订量
-      multipleNum: 1, //倍数
+      startNum: 0, //起订量
+      multipleNum: 0, //倍数
      aggregateNum: 0, //一组的数量
      stockNum: 0, //库存，
      zyladderArr: [], //阶梯价
@@ -232,11 +232,17 @@ export default {
  },
  watch: {
    ypNum(now) {
+      if (String(now).indexOf(".") > 0) this.ypNum = "";
+      this.ypNum = String(now).replace(/\D/g, "");
      this.goodsNum = now * this.aggregateNum;
    },
-    goodDetail: {
-      handler(data) {
-        if (JSON.stringify(data) != "{}") {
+    "goodDetail.goods_id"() {
+      let data = this.goodDetail;
+      if (JSON.stringify(data) != "{}") {
+        if (
+          this.goodDetail.goods_type == 3 ||
+          this.goodDetail.goods_type == 4
+        ) {
          if (data.min_buy) {
            this.startNum = util.aggxde(data.min_buy);
          }
@@ -276,10 +282,11 @@ export default {
            }
          }
        }
-      },
-      deep: true
+      }
    },
    goodsNum(now) {
+      if (String(now).indexOf(".") > 0) this.goodsNum = "";
+      this.goodsNum = String(now).replace(/\D/g, "");
      this.ladderComputer(now);
      if (Number(now) > this.stockNum) {
        this.tipText = "库存不足，下单后我们将帮您订货";
@@ -294,13 +301,16 @@ export default {
    }
  },
  methods: {
+    imgErr() {
+      this.goodDetail.brand_logo =
+        "https://www.ichunt.com/v3/dist/res/m/images/materiel_img_3.png";
+    },
    changeNav(i) {
      this.navInit = i;
      if (i == 1) {
        if (this.goodsNum % this.aggregateNum) {
          //如果商品数量除以组数不为整数
-          this.ypNum =
-            Math.ceil(this.goodsNum / this.aggregateNum) * this.aggregateNum;
+          this.ypNum = Math.ceil(this.goodsNum / this.aggregateNum);
        } else {
          //如果商品数量除以组数为整数
          this.ypNum = Number(this.goodsNum) / this.aggregateNum;
@@ -371,14 +381,21 @@ export default {
            );
            this.goodsNum = num;
          }
+        } else {
+          if (Number(this.goodsNum) < this.zySingleInit) {
+            this.$toast(
+              `购买数量必须为${this.multipleNum}的整数倍且不能少于起订量！`
+            );
+            this.goodsNum = this.zySingleInit;
+          }
        }
      }
    },
    blurZu() {
-      if (Number(this.goodsNum)*Number(this.aggregateNum)<this.startNum) {
+      if (Number(this.goodsNum) * Number(this.aggregateNum) < this.startNum) {
        this.$toast("购买数量不能少于起订量！");
-        this.ypNum =  Math.ceil(this.startNum/this.aggregateNum)
-      } 
+        this.ypNum = Math.ceil(this.startNum / this.aggregateNum);
+      }
    },
    reduceSingle() {
      if (Number(this.goodsNum) <= this.startNum) {
@@ -400,299 +417,64 @@ export default {
      this.goodsNum = Number(this.goodsNum) + this.multipleNum;
    },
    reduceZu() {
-      if(Number(this.goodsNum) <= this.startNum){
-          return
-      }else{
+      if (Number(this.goodsNum) <= this.startNum) {
+        return;
+      } else {
        this.ypNum = Number(this.ypNum) - 1;
      }
    },
    addZu() {
      this.ypNum = Number(this.ypNum) + 1;
+    },
+    xdOrAdd(type) {
+      let datax = {
+        id: this.goodDetail.goods_id,
+        num: this.goodsNum,
+        buy: type == 1 ? 1 : -1,
+        searchModel: this.$route.query.k || "",
+        module_name: this.goodDetail.module_name || "",
+        click_adtag: this.$route.query.adtag || this.$route.query.ptag || "",
+        click_ptag: util.getCookie("ptag") || ""
+      };
+      if (type == 1) {
+        //立即购买
+        try {
+          sensors.track("brandList", {
+            click_ptag: this.goodDetail.module_name || "",
+            click_adtag:
+              this.$route.query.adtag || this.$route.query.ptag || "",
+            element_name: "立即购买",
+            click_account: this.goodDetail.account_name || "",
+            brand_id: this.goodDetail.brand_id || "",
+            class_id: this.goodDetail.class_id || "",
+            supplier_id: this.goodDetail.supplier_id || ""
+          });
+        } catch (e) {}
+      } else {
+        //加入购物车
+        try {
+          sensors.track("brandList", {
+            click_ptag: this.goodDetail.module_name || "",
+            click_adtag:
+              this.$route.query.adtag || this.$route.query.ptag || "",
+            element_name: "加入购物车",
+            click_account: this.goodDetail.account_name || "",
+            brand_id: this.goodDetail.brand_id || "",
+            class_id: this.goodDetail.class_id || "",
+            supplier_id: this.goodDetail.supplier_id || ""
+          });
+        } catch (e) {}
+      }
+      this.$store.dispatch({
+        type: "addGoods",
+        data: { datax: datax, type: 1, k: this.$route.query.k || "" } //1表示自营 2表示联营
+      });
    }
  }
 };
 </script>

 <style lang="scss">
-@function remFun($rem) {
-  @return $rem * 50/37.5;
-}
-.zl_Detail {
-  * {
-    box-sizing: border-box;
-    font-family: "Helvetica Neue", Helvetica, sans-serif;
-  }
-  .details-head {
-    .head_top {
-      border-bottom: 1px solid #d6d7dc;
-      padding: 10px;
-      .head_top_left {
-        width: 56px;
-        img {
-          display: block;
-          width: 56px;
-          height: 56px;
-          border: 1px solid #e5e5e5;
-        }
-      }
-      .head_top_right {
-        padding-left: 66px;
-        h4 {
-          padding-bottom: 10px;
-          font-size: 18px;
-          color: #333333;
-        }
-      }
-    }
-    .head_bottom {
-      border-bottom: 1px solid #d6d7dc;
-      padding: 5px 10px;
-      li {
-        width: 50%;
-        line-height: 20px;
-        height: 20px;
-        font-size: 12px;
-        color: #999;
-        b {
-          display: block;
-          float: left;
-          line-height: 20px;
-          height: 20px;
-          font-weight: 400;
-        }
-        span {
-          color: #333;
-          line-height: 20px;
-          height: 20px;
-          display: block;
-          padding: 0 5px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .f-orange {
-          color: #ffa200;
-          margin-left: 5px;
-        }
-      }
-    }
-  }
-  .details-cont {
-    position: absolute;
-    top: 149px;
-    bottom: 44px;
-    width: 100%;
-    padding: 10px;
-    overflow-y: auto;
-    .gradient {
-      width: 100%;
-      table {
-        width: 100%;
-        line-height: 32px;
-        font-size: 12px;
-        text-align: center;
-        color: #666666;
-        border: 1px solid #d9d9d9;
-        .xs-6 {
-          width: 50%;
-        }
-        .xs-4 {
-          width: 33.33%;
-        }
-        .xs-3 {
-          width: 25%;
-        }
-        th {
-          border: 1px solid #d9d9d9;
-          font-weight: 400;
-          color: #666;
-        }
-        td {
-          border: 1px solid #d9d9d9;
-          color: #333;
-        }
-      }
-      .zkxk {
-        font-size: 12px;
-        height: 24px;
-        line-height: 24px;
-        border: 1px solid #e5e5e5;
-        border-top: none;
-        text-align: center;
-        color: #666;
-        .icon-top {
-          bottom: 9px;
-          position: relative;
-          content: "";
-          height: 0;
-          width: 0;
-          pointer-events: none;
-          border: solid transparent;
-          border-bottom-color: #4d4d4d;
-          border-width: 4px;
-          margin-left: 5px;
-        }
-        .icon-bot {
-          top: 9px;
-          position: relative;
-          content: "";
-          height: 0;
-          width: 0;
-          pointer-events: none;
-          border: solid transparent;
-          border-top-color: #4d4d4d;
-          border-width: 4px;
-          margin-left: 5px;
-        }
-      }
-    }
-    .price {
-      padding-top: 10px;
-      .zyqhc {
-        position: absolute;
-        width: remFun(3.4rem);
-        height: remFun(0.7rem);
-        color: #999;
-        font-size: remFun(0.2rem);
-        border: 1px solid #ffa200;
-        left: 130px;
-        line-height: remFun(0.28rem);
-        padding: remFun(0.05rem);
-        box-shadow: 0px 0px 3px #ffd07f;
-        border-radius: 3px;
-        .lfldiv {
-          width: remFun(0.3rem);
-          font {
-            position: relative;
-            font-size: remFun(0.22rem);
-            margin-right: remFun(0.05rem);
-          }
-        }
-        .lfrdiv {
-          width: remFun(2.9rem);
-        }
-      }
-      .bbiu {
-        display: inline-block;
-        position: absolute;
-        border-width: 6px;
-        border-style: solid;
-        border-color: transparent #ffa200 transparent transparent;
-        left: 118px;
-        top: remFun(0.15rem);
-      }
-      .bbiu1 {
-        display: inline-block;
-        position: absolute;
-        border-width: 6px;
-        border-style: solid;
-        border-color: transparent #fff transparent transparent;
-        left: 120px;
-        top: remFun(0.15rem);
-      }
-      .em1 {
-        padding: 0 0.5em;
-      }
-      dl {
-        font-size: 12px;
-        dt {
-          width: 5em;
-          color: #999;
-          float: left;
-          line-height: 30px;
-        }
-        dd {
-          padding-left: 5em;
-          color: #333;
-          line-height: 30px;
-          &.onePrice {
-            font-size: 14px;
-          }
-          &.totalPrice {
-            font-weight: bold;
-            color: red;
-            font-size: 14px;
-          }
-          span {
-            display: block;
-            float: left;
-            margin: 2px 10px 0 0;
-            color: #333;
-            height: 23px;
-            line-height: 22px;
-            padding: 0 10px;
-            border: 1px solid #d9d9d9;
-            border-radius: 3px;
-            background: #fff;
-            &.act {
-              color: #e10601;
-              border-color: #e10601;
-            }
-          }
-          .number {
-            float: left;
-            width: 118px;
-            height: 30px;
-            border: 1px solid #d9d9d9;
-            border-radius: 3px;
-            background: #fff;
-            position: relative;
-            i {
-              cursor: pointer;
-              height: 28px;
-              width: 28px;
-              text-align: center;
-              line-height: 28px;
-              display: block;
-              float: left;
-              background: none;
-              color: #999999;
-              font-size: 18px;
-            }
-            input {
-              text-align: center;
-              float: left;
-              padding: 4px 5px;
-              line-height: 20px;
-              height: 28px;
-              width: 60px;
-              background: none;
-              color: #333333;
-              font-size: 12px;
-              border: none;
-              border-left: 1px solid #e5e5e5;
-              border-right: 1px solid #e5e5e5;
-            }
-          }
-        }
-      }
-    }
-  }
-  .details-foot {
-    height: 43px;
-    border-top: 1px solid #d6d7dc;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    span {
-      width: 50%;
-      display: block;
-      float: left;
-      height: 43px;
-      line-height: 43px;
-      font-size: 14px;
-      color: #fff;
-      text-decoration: none;
-      text-align: center;
-      border: none;
-      &.but-blue {
-        background: #1080d0;
-      }
-      &.but-red {
-        background: #e10601;
-      }
-    }
-  }
-}
+@import "../../assets/css/zyly/zyly.scss";
 </style>

--- a/src/views/xianhuo/xianhuo.vue
+++ b/src/views/xianhuo/xianhuo.vue
@@ -176,6 +176,10 @@
      v-if="isShowRight || zyFilterInit!=-1"
    ></div>
    <goodsDetail :detailsData="detailsData"></goodsDetail>
+    <!-- 购物车添加成功 -->
+    <addCarAlert></addCarAlert>
+
+    <!-- 购物车添加成功 -->
  </div>
 </template>
 <script>
@@ -187,6 +191,7 @@ import GoodsOne from "@/views/common/GoodsOne.vue";
 import goodsDetail from "@/views/common/goodsDetail.vue";
 import SideBar from "@/views/common/SideBar.vue";
 import { services as Services } from "../../api/index";
+import addCarAlert from "@/views/common/addCarAlert";
 export default {
  name: "xianhuo",
  components: {
@@ -196,7 +201,8 @@ export default {
    "van-list": List,
    GoodsOne,
    goodsDetail,
-    SideBar
+    SideBar,
+    addCarAlert
  },
  data() {
    return {
@@ -249,10 +255,16 @@ export default {
      zyData: state => state.xianhuo.zyData,
      total: state => state.xianhuo.total,
      loading: state => state.xianhuo.loading,
-      finished: state => state.xianhuo.finished
+      finished: state => state.xianhuo.finished,
+      isShowAlert: state => state.gooddetail.isShowAlert
    })
  },
  watch: {
+    isShowAlert(now) {
+      if (now) {
+        this.detailsData = { isShow: false, id: "" };
+      }
+    },
    loading(now) {
      this.loadingXh = now;
    },
@@ -569,14 +581,14 @@ export default {
 }
 .backdrop {
  position: fixed;
-  z-index:4;
+  z-index: 4;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  &.zIndex {
-    z-index:1;
+    z-index: 1;
  }
 }
 .xianhuo {
@@ -594,7 +606,7 @@ export default {
    .search-sift {
      width: 100%;
      position: relative;
-      z-index:2;
+      z-index: 2;
      .title-cut {
        padding: 0 10px;
        font-size: 14px;