替代料报价及器件选型

components/common/buyOrCar/buyComponent.vue

@@ -1,13 +1,28 @@
 <template>
   <div>
-    <button style="z-index: 1000;" class="btn btn-primary btn-buy-now" :class="{'disabled': disabledFlag}"  @click="buyNow(true, $event)"><span class="watch">立即购买</span></button>
-    <button style="z-index: 1000;" class="btn btn-add-cart" :class="{'disabled': disabledFlag}"  @click="buyNow(false, $event)"><span class="watch">加入购物车</span></button>
+    <button style="z-index: 1000;"
+            class="btn btn-primary btn-buy-now"
+            :style="btnColor ? `background:${btnColor};border-color:${btnColor};` : ''"
+            :class="{'disabled': disabledFlag}"
+            @click="buyNow(true, $event)">
+      <span class="watch">立即购买</span>
+    </button>
+    <button style="z-index: 1000;"
+            ref="addCartBtn"
+            class="btn btn-add-cart"
+            @mouseenter="setHoverStyle(true)"
+            @mouseleave="setHoverStyle(false)"
+            :style="btnColor ? `color:${btnColor};border-color:${btnColor};` : ''"
+            :class="{'disabled': disabledFlag}"
+            @click="buyNow(false, $event)">
+      <span class="watch">加入购物车</span>
+    </button>
   </div>
 </template>
 
 <script>
   export default {
-    props: ['item', 'disabledFlag'],
+    props: ['item', 'disabledFlag', 'btnColor'],
     methods: {
       buyNow: function (isBuy, event) {
         event.stopPropagation()
@@ -91,6 +106,12 @@
             }
           }
         }
+      },
+      setHoverStyle: function (isShow) {
+        if (this.btnColor) {
+          this.$refs.addCartBtn.style.color = isShow ? '#fff' : this.btnColor
+          this.$refs.addCartBtn.style.background = isShow ? this.btnColor : '#fff'
+        }
       }
     }
   }

components/mobile/applyPurchase/SayPriceInfo.vue

@@ -2,7 +2,7 @@
   <div class="mobile-modal" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">
-        {{purchaseDetail.isReplace == 1 ? '替代型号报价' : '当前型号报价'}}
+        {{sayInfoTitle}}
         <!--{{purchaseDetail.agreed == 1 || agreed == 1 ? '已采纳' : '已报价'}}-->
         <i class="icon-guanbi iconfont" @click="cancel"></i>
       </div>
@@ -324,6 +324,13 @@
       },
       isBuyer () {
         return this.$route.query.type === 'buyer' || this.userType === 'buyer'
+      },
+      sayInfoTitle () {
+        if (this.isBuyer) {
+          return this.sayType === 'current' ? '当前型号报价' : '替代型号报价'
+        } else {
+          return this.purchaseDetail.isReplace === 1 ? '替代型号报价' : '当前型号报价'
+        }
       }
     },
     methods: {

components/product/CategoryNav.vue

@@ -18,6 +18,11 @@
         <i class="icon-glass"></i>
       </li>
     </ul>
+    <div class="breadcrumbs-children" v-if="firstChildrenKinds.length">
+      <div class="inline-block text-ellipse" v-for="item in firstChildrenKinds">
+        <nuxt-link :to="`/product/kind/${item.id}`" class="item" :title="item.nameCn">{{item.nameCn}}</nuxt-link>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -51,6 +56,9 @@
     computed: {
       actives () {
         return this.$store.state.product.kind.kindsParentWithBother.data
+      },
+      firstChildrenKinds () {
+        return this.$store.state.product.kind.firstChildren.data
       }
     }
   }
@@ -67,22 +75,20 @@
   }
   .breadcrumbs ul.list-inline.list-unstyled li.crumb-item {
     position: relative;
-    padding-left: 0px;
-    padding-right: 10px;
-    padding-bottom: 1px;
+    padding: 0;
     height: 30px;
     line-height: 30px;
-    background: #fff;
     span{
-      padding-left: 6px;
+      padding: 0 6px;
     }
   }
-  .breadcrumbs ul li.crumb-item-angle {
+/*  .breadcrumbs ul li.crumb-item-angle {
     margin-left: -5px;
-  }
+  }*/
   .breadcrumbs ul li.crumb-item>a {
     border: 1px solid #ddd;
     display: inline-block;
+    background: #fff;
     height: 30px;
     line-height: 30px;
     padding-left: 15px;
@@ -419,4 +425,23 @@
     text-overflow: ellipsis;
     float: left;
   }
+  .breadcrumbs-children {
+    padding: 20px 0;
+    background: #fff;
+    border: 1px solid #ddd;
+    .inline-block {
+      width: 20%;
+      text-align: center;
+      padding: 0 5px;
+      &:nth-child(n + 6) {
+        margin-top: 18px;
+      }
+      .item {
+        color: #666;
+        &:hover {
+          color: #f54802;
+        }
+      }
+    }
+  }
 </style>

components/product/ComponentGoods.vue

@@ -51,8 +51,8 @@
             <!–| number–>
             <span>{{price.start}}</span> +
           </div>-->
-          <div>
-            <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank"><span v-if="compGoods.storeNames">{{compGoods.storeName | storeNameFilter}}</span></nuxt-link>
+          <div v-if="compGoods.storeName">
+            <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank"><span>{{compGoods.storeName | storeNameFilter}}</span></nuxt-link>
           </div>
         </td>
         <td class="text-left">
@@ -105,7 +105,7 @@
             <span>—</span>
           </div>
           <div v-if="compGoods.reserve > 0">
-            <buy :item="compGoods"></buy>
+            <buy :item="compGoods" :btnColor="'#3975f4'"></buy>
           </div>
         </td>
       </tr>
@@ -349,7 +349,11 @@
     }
   }
   .product-list tbody>tr {
-    border: 1px solid #e8e8e8;
+    border: 1px solid #d4e1ff;
+    background: #fff;
+  }
+  .product-list tbody>tr:hover {
+    background: #f9fbff;
   }
 
   .product-list tbody>tr img {

components/product/KindBox.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div class="showKindId"></div>
-      <div class="box-catagory" :style="mardin" v-for="(kind, index) in kinds" style="clear: both">
+      <div class="box-catagory clearfix" v-for="(kind, index) in kinds">
         <div class="box">
           <div class="box-title" :id="kind.id">
             <div class="box-smtitle">
@@ -118,7 +118,7 @@
         }
       },
       scrollTo: function (el) {
-        scrollTo(document.getElementById(el), 10)
+        scrollTo(document.getElementById(el), 10, {offset: -58})
       }
     }
   }
@@ -137,6 +137,9 @@
   }
   .box {
     margin-bottom: 20px;
+    -webkit-box-shadow: 0 6px 10px #c8c8c8;
+    -moz-box-shadow: 0 6px 10px #c8c8c8;
+    box-shadow: 0 6px 10px #c8c8c8;
   }
   .box .box-title {
     width: 100%;
@@ -174,6 +177,9 @@
   .box .box-content .box-subcatagory .childkind {
     border-bottom: 1px dashed #ccc;
   }
+  .box .box-content .box-subcatagory .childkind:last-child {
+    border-bottom: none;
+  }
   .box .box-content .box-subcatagory dl, .box .box-content .box-subcatagory ul
   {
     padding-bottom: 0px;
@@ -245,6 +251,7 @@
   }
   .box .box-content .box-subcatagory .list-inline {
     margin-left: 0;
+    padding-left: 7px;
   }
   .box .box-content .box-subcatagory .list-inline>li {
     width: 20%;
@@ -323,11 +330,12 @@
   }
   .box-first{
     border: #c8c8c8 1px solid;
-    box-shadow: 0px 6px 10px #c8c8c8;
+    box-shadow: 0 6px 10px #c8c8c8;
     width: 1190px;
     display: inline-block;
     margin-top: 16px;
     margin-bottom: 16px;
     padding-top: 10px;
+    min-height: 108px;
   }
 </style>

pages/product/kind/_id.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="container">
-    <div v-if="actives.length">
-      <categroy-nav></categroy-nav>
-      <!--<category-property  @loadCmpGoodsByBrandEvent="listemBrandFilter" @loadCmpGoodsByTypeEvent="listemProTypeFilter"></category-property>-->
-      <component-goods :brandid="brandid" :propertyJSON="propertyJSON"></component-goods>
-    </div>
-    <div v-else>
-      <error-page :title="'类目'"></error-page>
+  <div class="kind-wrap">
+    <div class="container">
+      <div v-if="actives.length">
+        <categroy-nav></categroy-nav>
+        <!--<category-property  @loadCmpGoodsByBrandEvent="listemBrandFilter" @loadCmpGoodsByTypeEvent="listemProTypeFilter"></category-property>-->
+        <component-goods :brandid="brandid" :propertyJSON="propertyJSON"></component-goods>
+      </div>
+      <div v-else>
+        <error-page :title="'类目'"></error-page>
+      </div>
     </div>
   </div>
 </template>
@@ -25,6 +27,7 @@
     fetch ({store, route}) {
       return Promise.all([
         store.dispatch('product/loadKindParentsWithBothers', {id: route.params.id}),
+        store.dispatch('product/loadKindFirstChild', {id: route.params.id}),
         store.dispatch('product/loadKindBrands', {id: route.params.id}),
         store.dispatch('product/pageComGoods', {kindid: route.params.id})
       ])
@@ -72,7 +75,10 @@
   }
 </script>
 
-<style>
+<style scoped>
+  .kind-wrap {
+    background: #f7f7f7;
+  }
   .container {
     position: relative;
     width: 1190px;

store/product.js

@@ -115,6 +115,16 @@ export const actions = {
         commit('kind/GET_KINDPARENTSWITHBOTHERS_FAILURE', err)
       })
   },
+  loadKindFirstChild ({ commit }, params = {}) {
+    let id = params.id
+    commit('kind/REQUEST_KINDFIRSTCHILD', params)
+    return axios.get(`/api/product/kind/${id}/children`)
+      .then(response => {
+        commit('kind/GET_KINDFIRSTCHILD_SUCCESS', response.data)
+      }, err => {
+        commit('kind/GET_KINDFIRSTCHILD_FAILURE', err)
+      })
+  },
   loadKindBrands ({ commit }, params = {}) {
     let id = params.id
     commit('kind/REQUEST_KINDBRANDS')

store/product/kind.js

@@ -18,6 +18,10 @@ export const state = () => ({
   brands: {
     fetching: false,
     data: []
+  },
+  firstChildren: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -96,5 +100,15 @@ export const mutations = {
   },
   GET_KINDBRANDS_FAILURE (state) {
     state.brands.fetching = false
+  },
+  REQUEST_KINDFIRSTCHILD (state) {
+    state.firstChildren.fetching = true
+  },
+  GET_KINDFIRSTCHILD_SUCCESS (state, result) {
+    state.firstChildren.fetching = false
+    state.firstChildren.data = result
+  },
+  GET_KINDFIRSTCHILD_FAILURE (state) {
+    state.firstChildren.fetching = false
   }
 }