器件选型

components/product/CategoryProperty.vue

@@ -21,7 +21,7 @@
           <tr>
             <td class="td-width dropdown">
               <span  class="dropdown-toggle dropdown-back" data-toggle="dropdown">品牌<span class="fa fa-angle-down td-icon"></span></span>
-              <ul class="dropdown-menu parameter-selection-ul" role="menu" aria-labelledby="dropdownMenu1">
+              <ul class="dropdown-menu parameter-selection-ul" role="menu" aria-labelledby="dropdownMenu1" style="top: 38px;">
                 <!--orderBy:'nameCn'-->
                 <li v-for="b in brands"><a @click="selectBrand(b)"><span>{{b.nameCn}}</span></a></li>
               </ul>
@@ -56,8 +56,8 @@
           <tbody>
           <tr v-if="hasProperties" class="tr-properties">
             <td v-for="pro in properties" class="td-properties" style="vertical-align:middle;" >
- 								<span class="sl-selected" v-if="pro.selected" @click="selectProperty(pro)">
- 									<a class="text-num">{{pro.selected.value}}</a>
+ 								<span class="sl-selected" @click="selectProperty(pro.propertyId)" v-if="selectedProduct['a' + pro.propertyId] != ''">
+ 									<a class="text-num" v-text="selectedProduct['a' + pro.propertyId].value" style="color: #5078CB"></a>
 									<span><i class="fa fa-close"></i></span>
  								</span>
             </td>
@@ -71,7 +71,7 @@
         </table>
       </div>
           <ul v-show="list_exp_flag" @mouseenter="show_exp_list()" @mouseleave="hide_exp_list()" class="parameter-selection-ul drop-down-list" role="menu" aria-labelledby="dropdownMenu1">
-            <li v-for="v in selectedProperties.values"><a @click="selectPropertyValue(selectedProperties, value)" class="a-color"><span>{{v.value}}</span></a></li>
+            <li v-for="item in selectedProperties.values"><a @click="selectPropertyValue(item, selectedProperties.propertyId)" class="a-color"><span>{{item.value}}</span></a></li>
           </ul>
     </div>
   </div>
@@ -87,7 +87,9 @@
           nameCn: null
         },
         selectedProperties: {},
-        list_exp_flag: false
+        list_exp_flag: false,
+        selectedProduct: {},
+        JSONObj: {}
       }
     },
     mounted () {
@@ -106,7 +108,11 @@
         return this.$store.state.product.kind.children.data
       },
       properties () {
-        return this.$store.state.product.kind.kindProperty.data
+        let arr = this.$store.state.product.kind.kindProperty.data
+        for (let i = 0; i < arr.length; i++) {
+          this.selectedProduct[ 'a' + arr[i].propertyId ] = ''
+        }
+        return arr
       },
       brands () {
         return this.$store.state.product.kind.brands.data
@@ -132,11 +138,24 @@
         this.selectedBrand = {}
         this.$emit('loadCmpGoodsByBrandEvent', null)
       },
-      selectProperty (item) {
-        return null
+      selectProperty (propertyId) {
+        this.selectedProduct['a' + propertyId] = ''
+        this.hasProperties = this.isempty(this.selectedProduct)
+        this.$emit('loadCmpGoodsByTypeEvent', null)
       },
-      selectPropertyValue (item, value) {
-        return null
+      isempty (obj) {
+        for (let attr in obj) {
+          if (obj[attr] !== '') {
+            return true
+          }
+        }
+        return false
+      },
+      selectPropertyValue (item, propertyId) {
+        this.hasProperties = true
+        this.selectedProduct['a' + propertyId] = item
+        this.JSONObj[propertyId] = item.value
+        this.$emit('loadCmpGoodsByTypeEvent', JSON.stringify(this.JSONObj))
       },
       use_exp_list: function (pro, index) {
         this.selectedProperties = pro
@@ -170,7 +189,6 @@
   .breadcrumbs ul.list-unstyled.list-inline {
     margin-left: 0px;
   }
-
   .breadcrumbs ul.list-inline.list-unstyled li.crumb-item {
     position: relative;
     padding-left: 0px;

pages/product/kind/_id.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <categroy-nav></categroy-nav>
-    <category-property  @loadCmpGoodsByBrandEvent="listemBrandFilter"></category-property>
+    <category-property  @loadCmpGoodsByBrandEvent="listemBrandFilter" @loadCmpGoodsByTypeEvent="listemProTypeFilter"></category-property>
     <component-goods></component-goods>
   </div>
 </template>
@@ -33,6 +33,13 @@
         } else {
           this.$store.dispatch('product/pageComGoods', {kindid: this.$route.params.id})
         }
+      },
+      listemProTypeFilter (propertyJSON) {
+        if (propertyJSON !== {}) {
+          this.$store.dispatch('product/pageComGoods', propertyJSON == null ? {kindid: this.$route.params.id} : {kindid: this.$route.params.id, properties: propertyJSON})
+        } else {
+          this.$store.dispatch('product/pageComGoods', {kindid: this.$route.params.id})
+        }
       }
     }
   }

store/product.js

@@ -86,7 +86,7 @@ export const actions = {
   },
   pageComGoods ({ commit }, kindid = '', brandid = '', pageParams = { page: 1, count: 10 }) {
     let params = {}
-    let filter = {kindid: kindid.kindid, brandid: kindid.brandid}
+    let filter = {kindid: kindid.kindid, brandid: kindid.brandid, properties: kindid.properties}
     params.filter = filter
     params.page = pageParams.page
     params.count = pageParams.count