Authored by 陈轩

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

@@ -9,18 +9,19 @@ const channelModel = require('../models/channel'); @@ -9,18 +9,19 @@ const channelModel = require('../models/channel');
9 /** 9 /**
10 * 频道选择页 10 * 频道选择页
11 */ 11 */
12 -const channel = { 12 +module.exports = {
13 index(req, res) { 13 index(req, res) {
  14 + let channel = req.path.split('/')[1] || req.yoho.channel;
  15 +
14 res.render('index', { 16 res.render('index', {
15 module: 'channel', 17 module: 'channel',
16 - page: 'home' 18 + page: 'home',
  19 + channel: channel
17 }); 20 });
18 }, 21 },
19 resources(req, res, next) { 22 resources(req, res, next) {
20 - channelModel.getResourcesData(req.yoho.channel).then(result => { 23 + channelModel.getResourcesData(req.query).then(result => {
21 return res.json(result); 24 return res.json(result);
22 }).catch(next); 25 }).catch(next);
23 } 26 }
24 }; 27 };
25 -  
26 -module.exports = channel;  
@@ -4,9 +4,18 @@ const contentCode = require('../../../config/content-code'); @@ -4,9 +4,18 @@ const contentCode = require('../../../config/content-code');
4 const resourcesProcess = require('../../../utils/resources-process'); 4 const resourcesProcess = require('../../../utils/resources-process');
5 5
6 let channel = { 6 let channel = {
7 - getResourcesData(c) { 7 + getResourcesData(params) {
  8 + let code;
  9 +
  10 + if (params.channel) {
  11 + code = contentCode.channel[params.channel];
  12 + } else if (params.contentCode) {
  13 + code = params.contentCode;
  14 + } else {
  15 + code = contentCode.channel.men;
  16 + }
8 return api.get('operations/api/v5/resource/get', { 17 return api.get('operations/api/v5/resource/get', {
9 - content_code: contentCode.channel[c] 18 + content_code: code
10 }, { 19 }, {
11 cache: true, 20 cache: true,
12 code: 200 21 code: 200
@@ -13,6 +13,9 @@ const channel = require(cRoot + '/channel'); @@ -13,6 +13,9 @@ const channel = require(cRoot + '/channel');
13 const router = expressRouter(); 13 const router = expressRouter();
14 14
15 router.get('/', channel.index); // 首页 15 router.get('/', channel.index); // 首页
  16 +router.get('/men', channel.index); // 首页
  17 +router.get('/women', channel.index); // 首页
  18 +router.get('/lifestyle', channel.index); // 首页
16 router.get('/resources', channel.resources); // 资源位接口 19 router.get('/resources', channel.resources); // 资源位接口
17 20
18 module.exports = router; 21 module.exports = router;
1 <div id="app"> 1 <div id="app">
2 <tab></tab> 2 <tab></tab>
3 - <resources></resources> 3 + <resources v-bind:channel="'{{channel}}'" v-ref:resources></resources>
4 </div> 4 </div>
@@ -7,7 +7,9 @@ @@ -7,7 +7,9 @@
7 'use strict'; 7 'use strict';
8 8
9 const channel = { 9 const channel = {
10 - men: '9ee58aadd9559d07207fe4a98843eaac' 10 + men: '9ee58aadd9559d07207fe4a98843eaac', // 男 9ee58aadd9559d07207fe4a98843eaac
  11 + women: '9ee58aadd9559d07207fe4a98843eaac',
  12 + lifestyle: '9ee58aadd9559d07207fe4a98843eaac'
11 }; 13 };
12 14
13 module.exports = { 15 module.exports = {
@@ -2,6 +2,8 @@ const Vue = require('yoho-vue'); @@ -2,6 +2,8 @@ const Vue = require('yoho-vue');
2 const tab = require('channel/tab.vue'); 2 const tab = require('channel/tab.vue');
3 const resources = require('channel/resources.vue'); 3 const resources = require('channel/resources.vue');
4 4
  5 +require('common/vue-filter');
  6 +
5 new Vue({ 7 new Vue({
6 el: '#app', 8 el: '#app',
7 components: { 9 components: {
  1 +const Vue = require('yoho-vue');
  2 +
  3 +let vue = new Vue();
  4 +
  5 +module.exports = vue;
1 <template> 1 <template>
2 <div class="resources"> 2 <div class="resources">
3 <template v-for="floor in resources"> 3 <template v-for="floor in resources">
4 - <div class="focus" v-if="floor.focus">  
5 - <focus :list="floor.data"></focus>  
6 - </div>  
7 - <div class="title-image" v-if="floor.titleImage">  
8 - <title-image></title-image>  
9 - </div> 4 + <focus v-if="floor.focus" v-bind:floor="floor.data" v-bind:style="{height: '182px'}"></focus>
  5 + <title-image v-if="floor.titleImage" v-bind:floor="floor.data"></title-image>
  6 + <goods v-if="floor.goods" v-bind:floor="floor.data"></goods>
10 </template> 7 </template>
11 </div> 8 </div>
12 </template> 9 </template>
@@ -14,10 +11,13 @@ @@ -14,10 +11,13 @@
14 <script> 11 <script>
15 const $ = require('yoho-jquery'); 12 const $ = require('yoho-jquery');
16 const tip = require('common/tip'); 13 const tip = require('common/tip');
  14 + const bus = require('common/vue-bus');
17 const focus = require('component/resources/focus.vue'); 15 const focus = require('component/resources/focus.vue');
18 const titleImage = require('component/resources/title-image.vue'); 16 const titleImage = require('component/resources/title-image.vue');
  17 + const goods = require('component/resources/goods.vue');
19 18
20 module.exports = { 19 module.exports = {
  20 + props: ['channel', 'contentCode'],
21 data() { 21 data() {
22 return { 22 return {
23 resources: [] 23 resources: []
@@ -25,20 +25,49 @@ @@ -25,20 +25,49 @@
25 }, 25 },
26 components: { 26 components: {
27 focus: focus, 27 focus: focus,
28 - titleImage: titleImage 28 + titleImage: titleImage,
  29 + goods: goods
29 }, 30 },
30 - init() { 31 + watch: {
  32 + channel() {
  33 + this.getResourcesData();
  34 + },
  35 + contentCode() {
  36 + this.getResourcesData();
  37 + }
  38 + },
  39 + methods: {
  40 + getResourcesData() {
  41 + let data = {};
  42 +
  43 + if (this.contentCode) {
  44 + data.contentCode = this.contentCode;
  45 + } else {
  46 + data.channel = this.channel;
  47 + }
  48 +
31 $.ajax({ 49 $.ajax({
32 - url: '/resources' 50 + url: '/resources',
  51 + data: data
33 }).then(result => { 52 }).then(result => {
34 this.resources = result; 53 this.resources = result;
35 }).fail(() => { 54 }).fail(() => {
36 tip('网络错误'); 55 tip('网络错误');
37 }); 56 });
38 } 57 }
  58 + },
  59 + created() {
  60 + this.getResourcesData();
  61 + bus.$on('changeChannel', channel => {
  62 + this.channel = channel;
  63 + this.getResourcesData();
  64 + });
  65 + }
39 }; 66 };
40 </script> 67 </script>
41 68
42 <style> 69 <style>
43 - 70 + .resources {
  71 + background: #f6f6f6;
  72 + }
44 </style> 73 </style>
1 <template> 1 <template>
2 <div class="channel-tab"> 2 <div class="channel-tab">
3 - <a v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click.prevent="changeChannel(index)" href="{{item.url}}"> 3 + <a v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click.prevent="changeChannel(index)" href="/{{item.channel}}">
4 <span class="name">{{item.name | uppercase}}</span> 4 <span class="name">{{item.name | uppercase}}</span>
5 </a> 5 </a>
6 </div> 6 </div>
7 </template> 7 </template>
8 8
9 <script> 9 <script>
  10 + const bus = require('common/vue-bus');
  11 +
10 module.exports = { 12 module.exports = {
11 data() { 13 data() {
12 return { 14 return {
13 current: 0, 15 current: 0,
14 channel: [{ 16 channel: [{
15 name: 'MEN男士', 17 name: 'MEN男士',
16 - url: '/men' 18 + channel: 'men'
17 }, { 19 }, {
18 name: 'WOMEN女士', 20 name: 'WOMEN女士',
19 - url: '/women' 21 + channel: 'women'
20 }, { 22 }, {
21 name: 'LIFESTYLE生活', 23 name: 'LIFESTYLE生活',
22 - url: '/lifestyle' 24 + channel: 'lifestyle'
23 }] 25 }]
24 }; 26 };
25 }, 27 },
26 methods: { 28 methods: {
27 changeChannel(index) { 29 changeChannel(index) {
28 this.current = index; 30 this.current = index;
  31 + bus.$emit('changeChannel', this.channel[index].channel);
29 } 32 }
30 } 33 }
31 }; 34 };
32 </script> 35 </script>
33 36
34 <style> 37 <style>
35 - @import "../../scss/common/color";  
36 -  
37 .channel-tab { 38 .channel-tab {
38 width: 100%; 39 width: 100%;
39 height: 90px; 40 height: 90px;
40 font-size: 24px; 41 font-size: 24px;
41 text-align: center; 42 text-align: center;
42 - background: $white; 43 + background: #fff;
43 44
44 a { 45 a {
45 display: inline-block; 46 display: inline-block;
@@ -48,7 +49,7 @@ @@ -48,7 +49,7 @@
48 color: #999; 49 color: #999;
49 50
50 &.focus { 51 &.focus {
51 - color: $black; 52 + color: #000;
52 } 53 }
53 } 54 }
54 55
@@ -56,13 +57,13 @@ @@ -56,13 +57,13 @@
56 padding: 9px 0; 57 padding: 9px 0;
57 58
58 &.focus { 59 &.focus {
59 - border-bottom: 4px solid $black; 60 + border-bottom: 4px solid #000;
60 } 61 }
61 } 62 }
62 63
63 .focus { 64 .focus {
64 .name { 65 .name {
65 - border-bottom: 4px solid $black; 66 + border-bottom: 4px solid #000;
66 } 67 }
67 } 68 }
68 } 69 }
  1 +<template>
  2 + <div class="floor-header">
  3 + {{title.title}}
  4 +
  5 + <a class="more" href="{{title.moreUrl}}">
  6 + {{title.moreName}}
  7 + </a>
  8 + </div>
  9 +</template>
  10 +
  11 +<script>
  12 + module.exports = {
  13 + props: ['title']
  14 + };
  15 +</script>
  16 +
  17 +<style>
  18 + .floor-header {
  19 + position: relative;
  20 + width: 100%;
  21 + height: 100px;
  22 + font-size: 32px;
  23 + line-height: 100px;
  24 + text-align: center;
  25 + font-weight: bold;
  26 + border-top: 1px solid #eee;
  27 + margin-top: 20px;
  28 + background: #fff;
  29 +
  30 + .more {
  31 + position: absolute;
  32 + top: 0;
  33 + right: 0;
  34 + width: 100px;
  35 + height: 100px;
  36 + }
  37 + }
  38 +</style>
1 <template> 1 <template>
2 - <swipe class="my-swipe">  
3 - <swipe-item v-for="item in list" class="aaaa"> 2 + <div class="focus">
  3 + <swipe class="swipe swipe-{{floor.length}}">
  4 + <swipe-item v-for="item in floor" v-bind:style="{backgroundColor: item.bgColor}">
4 <a href="{{item.url}}" title="{{item.title}}"> 5 <a href="{{item.url}}" title="{{item.title}}">
5 - <img src="{{item.src}}"> 6 + <img v-bind:src="item.src | resize 750 365">
6 </a> 7 </a>
7 </swipe-item> 8 </swipe-item>
8 </swipe> 9 </swipe>
  10 + </div>
9 </template> 11 </template>
10 12
11 <script> 13 <script>
@@ -13,7 +15,7 @@ @@ -13,7 +15,7 @@
13 const swipe = require('vue-swipe'); 15 const swipe = require('vue-swipe');
14 16
15 module.exports = { 17 module.exports = {
16 - props: ['list'], 18 + props: ['floor'],
17 components: { 19 components: {
18 swipe: swipe.Swipe, 20 swipe: swipe.Swipe,
19 swipeItem: swipe.SwipeItem 21 swipeItem: swipe.SwipeItem
@@ -22,5 +24,43 @@ @@ -22,5 +24,43 @@
22 </script> 24 </script>
23 25
24 <style> 26 <style>
  27 + .focus {
  28 + .swipe {
  29 + height: 100%;
  30 + }
  31 +
  32 + .swipe-1 {
  33 + .swipe-indicators {
  34 + display: none;
  35 + }
  36 + }
  37 +
  38 + .swipe-item {
  39 + a {
  40 + display: block;
  41 + }
  42 + img {
  43 + width: 100%;
  44 + height: 100%;
  45 + }
  46 + }
  47 +
  48 + .swipe-indicators {
  49 + left: initial;
  50 + right: 20px;
  51 + }
  52 +
  53 + .swipe-indicator {
  54 + width: 8px;
  55 + height: 8px;
  56 + background: #ccc;
  57 + opacity: 1;
25 58
  59 + &.active {
  60 + width: 12px;
  61 + height: 12px;
  62 + background: #fff;
  63 + }
  64 + }
  65 + }
26 </style> 66 </style>
  1 +<template>
  2 + <div class="goods">
  3 + goods
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 + const floorHeader = require('component/resources/floor-header.vue');
  9 +
  10 + module.exports = {
  11 + props: ['floor'],
  12 + components: {
  13 + floorHeader: floorHeader
  14 + }
  15 + };
  16 +</script>
  17 +
  18 +<style>
  19 +</style>
1 <template> 1 <template>
2 - <div class="focus">  
3 - title-image 2 + <div class="title-image">
  3 + <floor-header v-bind:title="floor.title"></floor-header>
  4 + <a class="image" v-bind:href="floor.image.url">
  5 + <img v-bind:src="floor.image.src | resize 750 364">
  6 + </a>
4 </div> 7 </div>
5 </template> 8 </template>
6 9
7 <script> 10 <script>
  11 + const floorHeader = require('component/resources/floor-header.vue');
  12 +
8 module.exports = { 13 module.exports = {
9 - data() {  
10 - return {  
11 - message: 'resources'  
12 - }; 14 + props: ['floor'],
  15 + components: {
  16 + floorHeader: floorHeader
13 } 17 }
14 }; 18 };
15 </script> 19 </script>
16 20
17 <style> 21 <style>
  22 + .title-image {
  23 + a {
  24 + display: block;
  25 + }
18 26
  27 + .image {
  28 + width: 100%;
  29 + height: 364px;
  30 + }
  31 +
  32 + img {
  33 + width: 100%;
  34 + height: 100%;
  35 + }
  36 + }
19 </style> 37 </style>