Merge remote-tracking branch 'origin/develop' into develop

@@ -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 = {

@@ -2,6 +2,8 @@ const Vue = require('yoho-vue');
 const tab = require('channel/tab.vue');
 const resources = require('channel/resources.vue');
 
+require('common/vue-filter');
+
 new Vue({
     el: '#app',
     components: {

+const Vue = require('yoho-vue');
+
+let vue = new Vue();
+
+module.exports = vue;

 <template>
     <div class="resources">
         <template v-for="floor in resources">
-            <div class="focus" v-if="floor.focus">
-                <focus :list="floor.data"></focus>
-            </div>
-            <div class="title-image" v-if="floor.titleImage">
-                <title-image></title-image>
-            </div>
+            <focus v-if="floor.focus" v-bind:floor="floor.data" v-bind:style="{height: '182px'}"></focus>
+            <title-image v-if="floor.titleImage" v-bind:floor="floor.data"></title-image>
+            <goods v-if="floor.goods" v-bind:floor="floor.data"></goods>
         </template>
     </div>
 </template>
@@ -14,10 +11,13 @@
 <script>
     const $ = require('yoho-jquery');
     const tip = require('common/tip');
+    const bus = require('common/vue-bus');
     const focus = require('component/resources/focus.vue');
     const titleImage = require('component/resources/title-image.vue');
+    const goods = require('component/resources/goods.vue');
 
     module.exports = {
+        props: ['channel', 'contentCode'],
         data() {
             return {
                 resources: []
@@ -25,20 +25,49 @@
         },
         components: {
             focus: focus,
-            titleImage: titleImage
+            titleImage: titleImage,
+            goods: goods
         },
-        init() {
+        watch: {
+            channel() {
+                this.getResourcesData();
+            },
+            contentCode() {
+                this.getResourcesData();
+            }
+        },
+        methods: {
+            getResourcesData() {
+                let data = {};
+
+                if (this.contentCode) {
+                    data.contentCode = this.contentCode;
+                } else {
+                    data.channel = this.channel;
+                }
+
                 $.ajax({
-                url: '/resources'
+                    url: '/resources',
+                    data: data
                 }).then(result => {
                     this.resources = result;
                 }).fail(() => {
                     tip('网络错误');
                 });
             }
+        },
+        created() {
+            this.getResourcesData();
+            bus.$on('changeChannel', channel => {
+                this.channel = channel;
+                this.getResourcesData();
+            });
+        }
     };
 </script>
 
 <style>
-
+    .resources {
+        background: #f6f6f6;
+    }
 </style>

 <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>
 </template>
 
 <script>
+    const bus = require('common/vue-bus');
+
     module.exports = {
         data() {
             return {
                 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;
+                bus.$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 +49,7 @@
             color: #999;
 
             &.focus {
-                color: $black;
+                color: #000;
             }
         }
 
@@ -56,13 +57,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;
             }
         }
     }

+<template>
+    <div class="floor-header">
+        {{title.title}}
+
+        <a class="more" href="{{title.moreUrl}}">
+            {{title.moreName}}
+        </a>
+    </div>
+</template>
+
+<script>
+    module.exports = {
+        props: ['title']
+    };
+</script>
+
+<style>
+    .floor-header {
+        position: relative;
+        width: 100%;
+        height: 100px;
+        font-size: 32px;
+        line-height: 100px;
+        text-align: center;
+        font-weight: bold;
+        border-top: 1px solid #eee;
+        margin-top: 20px;
+        background: #fff;
+
+        .more {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100px;
+            height: 100px;
+        }
+    }
+</style>

 <template>
-    <swipe class="my-swipe">
-        <swipe-item v-for="item in list" class="aaaa">
+    <div class="focus">
+        <swipe class="swipe swipe-{{floor.length}}">
+            <swipe-item v-for="item in floor" v-bind:style="{backgroundColor: item.bgColor}">
                 <a href="{{item.url}}" title="{{item.title}}">
-                <img src="{{item.src}}">
+                    <img v-bind:src="item.src | resize 750 365">
                 </a>
             </swipe-item>
         </swipe>
+    </div>
 </template>
 
 <script>
@@ -13,7 +15,7 @@
     const swipe = require('vue-swipe');
 
     module.exports = {
-        props: ['list'],
+        props: ['floor'],
         components: {
             swipe: swipe.Swipe,
             swipeItem: swipe.SwipeItem
@@ -22,5 +24,43 @@
 </script>
 
 <style>
+    .focus {
+        .swipe {
+            height: 100%;
+        }
+
+        .swipe-1 {
+            .swipe-indicators {
+                display: none;
+            }
+        }
+
+        .swipe-item {
+            a {
+                display: block;
+            }
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .swipe-indicators {
+            left: initial;
+            right: 20px;
+        }
+
+        .swipe-indicator {
+            width: 8px;
+            height: 8px;
+            background: #ccc;
+            opacity: 1;
 
+            &.active {
+                width: 12px;
+                height: 12px;
+                background: #fff;
+            }
+        }
+    }
 </style>

+<template>
+    <div class="goods">
+        goods
+    </div>
+</template>
+
+<script>
+    const floorHeader = require('component/resources/floor-header.vue');
+
+    module.exports = {
+        props: ['floor'],
+        components: {
+            floorHeader: floorHeader
+        }
+    };
+</script>
+
+<style>
+</style>

 <template>
-    <div class="focus">
-        title-image
+    <div class="title-image">
+        <floor-header v-bind:title="floor.title"></floor-header>
+        <a class="image" v-bind:href="floor.image.url">
+            <img v-bind:src="floor.image.src | resize 750 364">
+        </a>
     </div>
 </template>
 
 <script>
+    const floorHeader = require('component/resources/floor-header.vue');
+
     module.exports = {
-        data() {
-            return {
-                message: 'resources'
-            };
+        props: ['floor'],
+        components: {
+            floorHeader: floorHeader
         }
     };
 </script>
 
 <style>
+    .title-image {
+        a {
+            display: block;
+        }
 
+        .image {
+            width: 100%;
+            height: 364px;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
 </style>