品牌和分类资源位修改

@@ -28,5 +28,12 @@ module.exports = {
         params: {
             content_code: {type: String},
         }
+    },
+    '/sort/list': {
+        api: 'app.sort.get',
+        cache: true,
+        params: {
+            app_type: 1,
+        }
     }
 };

 <template>
     <div class="resource-category">
         <a-link class="cate-label" :href="brandLink">品牌<i class="icon icon-right"></i></a-link>
-        <p class="cate-label" @click="show=!show">{{label}}<i class="icon" :class="sortClass"></i></p>
-        <div class="cate-items" v-if="show">
-            <a-link :href="item.url" class="cate-item" v-for="item in items" :key="item.name">{{item.name}}</a-link>
+        <div v-for="(item, index) in value">
+            <p class="cate-label" @click="toggle(index)">{{item.category_name
+                }}<i class="icon" :class="sortClass[index]"></i></p>
+            <div class="cate-items" v-if="show[index]">
+                <a-link class="cate-item"
+                        :href="`/product/list?sort=${getAllSortId(index)}&sort_name=全部${item.category_name}&gender=${genderCvt}`">
+                    {{`全部${item.category_name}`}}</a-link>
+                <a-link
+                    :href="`/product/list?sort=${sub.relation_parameter.sort}&sort_name=${sub.category_name}&gender=${genderCvt}`"
+                    class="cate-item" v-for="sub in item.sub" :key="sub.category_id">{{sub.category_name}}
+                </a-link>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import _ from 'lodash/core';
 import Resource from './resource';
 
 export default {
-    name: 'ResourceTwoImage',
+    name: 'ResourceCategory',
     props: {
+        value: Array,
         gender: {
             type: String
-        },
-        label: {
-            type: String,
-            default: '测试'
-        },
-        items: {
-            type: Array,
-            default() {
-                return [
-                    {
-                        name: '大衣',
-                        url: 'https://wwww.yohobuy.com'
-                    },
-                    {
-                        name: '裤子',
-                        url: 'https://wwww.yohobuy.com'
-                    }
-                ]
-            }
         }
     },
     data() {
         return {
-            show: false
+            show: [],
+            sortClass: []
         }
     },
     computed: {
-        sortClass() {
-            return {
-                'icon-sort-up': this.show,
-                'icon-sort-down': !this.show,
-            }
-        },
         brandLink() {
             return `/brand?channel=${this.gender}`;
+        },
+        genderCvt() {
+            return { men: '1,3', women: '2,3' }[this.gender];
+        }
+    },
+    methods: {
+        toggle(idx) {
+            this.$set(this.show, idx, !this.show[idx]);
+            this.$set(this.sortClass, idx, {
+                'icon-sort-up': this.show[idx],
+                'icon-sort-down': !this.show[idx]
+            });
+        },
+        getAllSortId(idx) {
+            return this.value[idx].sub.map(sort=>sort.relation_parameter.sort).join(',') + ',';
+        }
+    },
+    created() {
+        const len = this.value.length;
+
+        this.show = [];
+        for (let i = 0; i < len; i++) {
+            this.show.push(false);
+            this.sortClass.push({
+                'icon-sort-up': false,
+                'icon-sort-down': true,
+            });
         }
     },
     components: {Resource}

@@ -11,8 +11,8 @@
                 <i class="icon icon-search"></i>
             </span>
         </header-box>
-        <div class="resources" v-for="floor in data">
-            <resource-category :gender="gender"></resource-category>
+        <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>
@@ -85,7 +85,7 @@
                 return this.$store.state.channel.gender;
             },
             data() {
-                return this.$store.state.channel[this.gender].data;
+                return this.$store.state.channel[this.gender];
             }
         },
         asyncData({store, router: to}) {

@@ -18,10 +18,12 @@ export default {
         home: {},
         gender: 'men',
         men: {
+            sort: {},
             data: {},
             isFetching: false
         },
         women: {
+            sort: {},
             data: {},
             isFetching: false
         },
@@ -45,9 +47,20 @@ export default {
         [FETCH_CHANNEL_FAILURE](state) {
             state[state.gender].isFetching = false;
         },
-        [FETCH_CHANNEL_SUCCESS](state, {data}) {
+        [FETCH_CHANNEL_SUCCESS](state, {data, sort}) {
+            const keyCvt = {
+                men: 'MEN男士',
+                women: 'WOMEN女士',
+            };
+
             state[state.gender].isFetching = false;
+
+            // mock data
+            data.splice(1, 0 , {
+                category: true
+            });
             state[state.gender].data = data;
+            state[state.gender].sort = sort[keyCvt[state.gender]];
         },
     },
     actions: {
@@ -74,7 +87,11 @@ export default {
                     content_code: gender === 'men' ? CHANNEL_MAN_CONTENT_CODE : CHANNEL_WOMEN_CONTENT_CODE
                 });
 
-                commit(FETCH_CHANNEL_SUCCESS, result);
+                const sort = await this.$api.get('/sort/list', {
+                    channel: gender
+                });
+
+                commit(FETCH_CHANNEL_SUCCESS, {data: result.data, sort: sort.data});
                 return result;
             } catch (e) {
                 console.error(e);