组件优化

 <template>
 <template>
     <div class="resource-category">
     <div class="resource-category">
         <a-link class="cate-label" :href="brandLink">品牌<i class="icon icon-right"></i></a-link>
         <a-link class="cate-label" :href="brandLink">品牌<i class="icon icon-right"></i></a-link>
-        <div v-for="(item, index) in value" v-if="item.sub">
+        <div v-for="(item, index) in sort" v-if="item.sub">
             <p class="cate-label" @click="toggle(index)">{{item.category_name
             <p class="cate-label" @click="toggle(index)">{{item.category_name
                 }}<i class="icon" :class="sortClass[index]"></i></p>
                 }}<i class="icon" :class="sortClass[index]"></i></p>
             <div class="cate-items" v-if="show[index]">
             <div class="cate-items" v-if="show[index]">
@@ -24,10 +24,7 @@ import Resource from './resource';
 export default {
 export default {
     name: 'ResourceCategory',
     name: 'ResourceCategory',
     props: {
     props: {
-        value: Array,
-        gender: {
-            type: String
-        }
+        value: Object
     },
     },
     data() {
     data() {
         return {
         return {
@@ -41,6 +38,12 @@ export default {
         },
         },
         genderCvt() {
         genderCvt() {
             return { men: '1,3', women: '2,3' }[this.gender];
             return { men: '1,3', women: '2,3' }[this.gender];
+        },
+        gender() {
+            return this.value.gender;
+        },
+        sort() {
+            return this.value.sort;
         }
         }
     },
     },
     methods: {
     methods: {
@@ -52,11 +55,11 @@ export default {
             });
             });
         },
         },
         getAllSortId(idx) {
         getAllSortId(idx) {
-            return this.value[idx].sub.map(sort=>sort.relation_parameter.sort).join(',') + ',';
+            return this.value.sort[idx].sub.map(sort=>sort.relation_parameter.sort).join(',') + ',';
         }
         }
     },
     },
     created() {
     created() {
-        const len = this.value.length;
+        const len = this.sort.length;
 
 
         this.show = [];
         this.show = [];
         for (let i = 0; i < len; i++) {
         for (let i = 0; i < len; i++) {

@@ -10,19 +10,11 @@
                     <i class="icon icon-search-new" @click="searchSliderSwitch"></i>
                     <i class="icon icon-search-new" @click="searchSliderSwitch"></i>
                 </span>
                 </span>
             </header-box>
             </header-box>
-            <div class="resources" v-for="floor in data.data">
-                <resource-category :gender="gender" :value="data.sort" v-if="floor.category"></resource-category>
-                <resource-focus-image v-if="floor.template_name=='focus'" :value="floor.data"></resource-focus-image>
-                <resource-single-image v-if="floor.template_name =='newSingleImage'"
-                                       :value="floor.data.list[0]"></resource-single-image>
-                <div class="shop-floor" v-if="floor.template_name=='shopFloor'">
-                    <resource-single-image :value="floor.data.list[0]"></resource-single-image>
-                    <resource-product-list :value="products"></resource-product-list>
-                </div>
-                <div class="new-arrival-floor" v-if="floor.template_name=='BlkNewProductFloorResource'">
-                    <resource-product-list :value="floor.data.list"></resource-product-list>
-                </div>
-            </div>
+            <component
+                :is="component.template_name"
+                v-for="(component, index) in floors.filter(c => ['focus', 'category', 'newSingleImage'].some(k => k === c.template_name) )"
+                :value="component.data"
+                :key="index"></component>
         </layout-body>
         </layout-body>
     </div>
     </div>
 </template>
 </template>
@@ -102,8 +94,8 @@
             gender() {
             gender() {
                 return this.$store.state.channel.gender;
                 return this.$store.state.channel.gender;
             },
             },
-            data() {
-                return this.$store.state.channel[this.gender];
+            floors() {
+                return this.$store.state.channel[this.gender].floors;
             }
             }
         },
         },
         asyncData({store, router: to}) {
         asyncData({store, router: to}) {
@@ -111,9 +103,9 @@
             return store.dispatch(FETCH_CHANNEL_REQUEST, gender);
             return store.dispatch(FETCH_CHANNEL_REQUEST, gender);
         },
         },
         components: {
         components: {
-            ResourceCategory,
-            ResourceFocusImage,
-            ResourceSingleImage,
+            focus: ResourceFocusImage,
+            newSingleImage: ResourceSingleImage,
+            category: ResourceCategory,
             ResourceProductList,
             ResourceProductList,
             SearchSlider
             SearchSlider
         }
         }

@@ -23,12 +23,12 @@ export default {
         gender: 'men',
         gender: 'men',
         men: {
         men: {
             sort: {},
             sort: {},
-            data: {},
+            floors: {},
             isFetching: false
             isFetching: false
         },
         },
         women: {
         women: {
             sort: {},
             sort: {},
-            data: {},
+            floors: {},
             isFetching: false
             isFetching: false
         },
         },
         fethingHome: false,
         fethingHome: false,
@@ -72,9 +72,14 @@ export default {
 
 
             // mock data
             // mock data
             data.splice(1, 0 , {
             data.splice(1, 0 , {
-                category: true
+                template_name: 'category',
+                data: {
+                    gender: 'men',
+                    sort: sort[keyCvt[state.gender]]
+
+                }
             });
             });
-            state[state.gender].data = data;
+            state[state.gender].floors = data;
             state[state.gender].sort = sort[keyCvt[state.gender]];
             state[state.gender].sort = sort[keyCvt[state.gender]];
         },
         },
     },
     },