Authored by ccbikai

增加tab切换

@@ -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 = {
@@ -9,5 +9,10 @@ new Vue({ @@ -9,5 +9,10 @@ new Vue({
9 components: { 9 components: {
10 tab: tab, 10 tab: tab,
11 resources: resources 11 resources: resources
  12 + },
  13 + created() {
  14 + this.$on('changeChannel', channel => {
  15 + this.$refs.resources.channel = channel;
  16 + });
12 } 17 }
13 }); 18 });
@@ -20,8 +20,11 @@ @@ -20,8 +20,11 @@
20 const focus = require('component/resources/focus.vue'); 20 const focus = require('component/resources/focus.vue');
21 const titleImage = require('component/resources/title-image.vue'); 21 const titleImage = require('component/resources/title-image.vue');
22 const goods = require('component/resources/goods.vue'); 22 const goods = require('component/resources/goods.vue');
  23 + const Loading = require('common/loading');
  24 + const loading = new Loading();
23 25
24 module.exports = { 26 module.exports = {
  27 + props: ['channel', 'contentCode'],
25 data() { 28 data() {
26 return { 29 return {
27 resources: [] 30 resources: []
@@ -32,14 +35,38 @@ @@ -32,14 +35,38 @@
32 titleImage: titleImage, 35 titleImage: titleImage,
33 goods: goods 36 goods: goods
34 }, 37 },
35 - init() {  
36 - $.ajax({  
37 - url: '/resources'  
38 - }).then(result => {  
39 - this.resources = result;  
40 - }).fail(() => {  
41 - tip('网络错误');  
42 - }); 38 + watch: {
  39 + channel() {
  40 + this.getResourcesData();
  41 + },
  42 + contentCode() {
  43 + this.getResourcesData();
  44 + }
  45 + },
  46 + methods: {
  47 + getResourcesData() {
  48 + let data = {};
  49 +
  50 + if (this.contentCode) {
  51 + data.contentCode = this.contentCode;
  52 + } else {
  53 + data.channel = this.channel;
  54 + }
  55 +
  56 + loading.show();
  57 + $.ajax({
  58 + url: '/resources',
  59 + data: data
  60 + }).then(result => {
  61 + loading.hide();
  62 + this.resources = result;
  63 + }).fail(() => {
  64 + tip('网络错误');
  65 + });
  66 + }
  67 + },
  68 + created() {
  69 + this.getResourcesData();
43 } 70 }
44 }; 71 };
45 </script> 72 </script>
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>
@@ -13,33 +13,32 @@ @@ -13,33 +13,32 @@
13 current: 0, 13 current: 0,
14 channel: [{ 14 channel: [{
15 name: 'MEN男士', 15 name: 'MEN男士',
16 - url: '/men' 16 + channel: 'men'
17 }, { 17 }, {
18 name: 'WOMEN女士', 18 name: 'WOMEN女士',
19 - url: '/women' 19 + channel: 'women'
20 }, { 20 }, {
21 name: 'LIFESTYLE生活', 21 name: 'LIFESTYLE生活',
22 - url: '/lifestyle' 22 + channel: 'lifestyle'
23 }] 23 }]
24 }; 24 };
25 }, 25 },
26 methods: { 26 methods: {
27 changeChannel(index) { 27 changeChannel(index) {
28 this.current = index; 28 this.current = index;
  29 + this.$parent.$emit('changeChannel', this.channel[index].channel);
29 } 30 }
30 } 31 }
31 }; 32 };
32 </script> 33 </script>
33 34
34 <style> 35 <style>
35 - @import "../../scss/common/color";  
36 -  
37 .channel-tab { 36 .channel-tab {
38 width: 100%; 37 width: 100%;
39 height: 90px; 38 height: 90px;
40 font-size: 24px; 39 font-size: 24px;
41 text-align: center; 40 text-align: center;
42 - background: $white; 41 + background: #fff;
43 42
44 a { 43 a {
45 display: inline-block; 44 display: inline-block;
@@ -48,7 +47,7 @@ @@ -48,7 +47,7 @@
48 color: #999; 47 color: #999;
49 48
50 &.focus { 49 &.focus {
51 - color: $black; 50 + color: #000;
52 } 51 }
53 } 52 }
54 53
@@ -56,13 +55,13 @@ @@ -56,13 +55,13 @@
56 padding: 9px 0; 55 padding: 9px 0;
57 56
58 &.focus { 57 &.focus {
59 - border-bottom: 4px solid $black; 58 + border-bottom: 4px solid #000;
60 } 59 }
61 } 60 }
62 61
63 .focus { 62 .focus {
64 .name { 63 .name {
65 - border-bottom: 4px solid $black; 64 + border-bottom: 4px solid #000;
66 } 65 }
67 } 66 }
68 } 67 }