Merge remote-tracking branch 'origin/develop' into develop
Showing
13 changed files
with
206 additions
and
39 deletions
@@ -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; |
@@ -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: { |
public/js/common/vue-bus.js
0 → 100644
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> |
public/vue/component/resources/goods.vue
0 → 100644
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> |
-
Please register or login to post a comment