增加tab切换

@@ -9,18 +9,19 @@ const channelModel = require('../models/channel');
 /**
  * 频道选择页
  */
-const channel = {
+module.exports = {
     index(req, res) {
+        let channel = req.path.split('/')[1] || req.yoho.channel;
+
         res.render('index', {
             module: 'channel',
-            page: 'home'
+            page: 'home',
+            channel: channel
         });
     },
     resources(req, res, next) {
-        channelModel.getResourcesData(req.yoho.channel).then(result => {
+        channelModel.getResourcesData(req.query).then(result => {
             return res.json(result);
         }).catch(next);
     }
 };
-
-module.exports = channel;

@@ -4,9 +4,18 @@ const contentCode = require('../../../config/content-code');
 const resourcesProcess = require('../../../utils/resources-process');
 
 let channel = {
-    getResourcesData(c) {
+    getResourcesData(params) {
+        let code;
+
+        if (params.channel) {
+            code = contentCode.channel[params.channel];
+        } else if (params.contentCode) {
+            code = params.contentCode;
+        } else {
+            code = contentCode.channel.men;
+        }
         return api.get('operations/api/v5/resource/get', {
-            content_code: contentCode.channel[c]
+            content_code: code
         }, {
             cache: true,
             code: 200

@@ -13,6 +13,9 @@ const channel = require(cRoot + '/channel');
 const router = expressRouter();
 
 router.get('/', channel.index); // 首页
+router.get('/men', channel.index); // 首页
+router.get('/women', channel.index); // 首页
+router.get('/lifestyle', channel.index); // 首页
 router.get('/resources', channel.resources); // 资源位接口
 
 module.exports = router;

 <div id="app">
     <tab></tab>
-    <resources></resources>
+    <resources v-bind:channel="'{{channel}}'" v-ref:resources></resources>
 </div>

@@ -7,7 +7,9 @@
 'use strict';
 
 const channel = {
-    men: '9ee58aadd9559d07207fe4a98843eaac'
+    men: '9ee58aadd9559d07207fe4a98843eaac', // 男 9ee58aadd9559d07207fe4a98843eaac
+    women: '9ee58aadd9559d07207fe4a98843eaac',
+    lifestyle: '9ee58aadd9559d07207fe4a98843eaac'
 };
 
 module.exports = {

@@ -9,5 +9,10 @@ new Vue({
     components: {
         tab: tab,
         resources: resources
+    },
+    created() {
+        this.$on('changeChannel', channel => {
+            this.$refs.resources.channel = channel;
+        });
     }
 });

@@ -20,8 +20,11 @@
     const focus = require('component/resources/focus.vue');
     const titleImage = require('component/resources/title-image.vue');
     const goods = require('component/resources/goods.vue');
+    const Loading = require('common/loading');
+    const loading = new Loading();
 
     module.exports = {
+        props: ['channel', 'contentCode'],
         data() {
             return {
                 resources: []
@@ -32,14 +35,38 @@
             titleImage: titleImage,
             goods: goods
         },
-        init() {
-            $.ajax({
-                url: '/resources'
-            }).then(result => {
-                this.resources = result;
-            }).fail(() => {
-                tip('网络错误');
-            });
+        watch: {
+            channel() {
+                this.getResourcesData();
+            },
+            contentCode() {
+                this.getResourcesData();
+            }
+        },
+        methods: {
+            getResourcesData() {
+                let data = {};
+
+                if (this.contentCode) {
+                    data.contentCode = this.contentCode;
+                } else {
+                    data.channel = this.channel;
+                }
+
+                loading.show();
+                $.ajax({
+                    url: '/resources',
+                    data: data
+                }).then(result => {
+                    loading.hide();
+                    this.resources = result;
+                }).fail(() => {
+                    tip('网络错误');
+                });
+            }
+        },
+        created() {
+            this.getResourcesData();
         }
     };
 </script>

 <template>
     <div class="channel-tab">
-        <a v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click.prevent="changeChannel(index)" href="{{item.url}}">
+        <a v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click.prevent="changeChannel(index)" href="/{{item.channel}}">
             <span class="name">{{item.name | uppercase}}</span>
         </a>
     </div>
@@ -13,33 +13,32 @@
                 current: 0,
                 channel: [{
                     name: 'MEN男士',
-                    url: '/men'
+                    channel: 'men'
                 }, {
                     name: 'WOMEN女士',
-                    url: '/women'
+                    channel: 'women'
                 }, {
                     name: 'LIFESTYLE生活',
-                    url: '/lifestyle'
+                    channel: 'lifestyle'
                 }]
             };
         },
         methods: {
             changeChannel(index) {
                 this.current = index;
+                this.$parent.$emit('changeChannel', this.channel[index].channel);
             }
         }
     };
 </script>
 
 <style>
-    @import "../../scss/common/color";
-
     .channel-tab {
         width: 100%;
         height: 90px;
         font-size: 24px;
         text-align: center;
-        background: $white;
+        background: #fff;
 
         a {
             display: inline-block;
@@ -48,7 +47,7 @@
             color: #999;
 
             &.focus {
-                color: $black;
+                color: #000;
             }
         }
 
@@ -56,13 +55,13 @@
             padding: 9px 0;
 
             &.focus {
-                border-bottom: 4px solid $black;
+                border-bottom: 4px solid #000;
             }
         }
 
         .focus {
             .name {
-                border-bottom: 4px solid $black;
+                border-bottom: 4px solid #000;
             }
         }
     }