home.vue
3.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
<div>
<home-slider v-model="homeSlider" :sliders="channel.slider"></home-slider>
<search-slider v-model="searchSlider"></search-slider>
<layout-body>
<header-box slot="header" class="home-header">
<span slot="left">
<i class="icon icon-nav-new" @click="homeSliderSwitch"></i>
</span>
<span slot="title" class="logo">
</span>
<span slot="right">
<i class="icon icon-search-new" @click="searchSliderSwitch"></i>
</span>
</header-box>
<scroller ref="scroller" @loading="loading">
<div class="resources">
<component
:is="component.template_name"
v-for="(component, index) in (channel.home || []).filter(c => ['twoPicture', 'tfGoodsList', 'newSingleImage', 'BlkNewProductFloorResource'].some(k => k === c.template_name) )"
:value="component.data"
:key="index"></component>
</div>
</scroller>
</layout-body>
</div>
</template>
<script>
import {
FETCH_HOME_REQUEST,
FETCH_CHANNEL_REQUEST
} from 'store/channel/types';
import ResourceTwoImage from 'components/resources/resource-two-image';
import ResourceSingleImage from 'components/resources/resource-single-image';
import ResourceNewProductList from 'components/resources/resource-new-product-list';
import ResourceTfGoodsList from 'components/resources/resource-tfgoods-list';
import {SearchSlider} from 'components/search';
import {mapState} from 'vuex';
import {HomeSlider} from './components';
export default {
name: 'Channel',
data() {
return {
homeSlider: false,
searchSlider: false
};
},
asyncData({store}) {
return store.dispatch(FETCH_HOME_REQUEST);
},
computed: {
...mapState(['channel'])
},
methods: {
homeSliderSwitch() {
this.homeSlider = !this.homeSlider;
},
searchSliderSwitch() {
this.searchSlider = !this.searchSlider;
},
async loading() {
await this.$store.dispatch(FETCH_HOME_REQUEST, true);
this.$refs.scroller.stop();
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.$yoho && vm.$yoho.blkBackStatus(false);
});
},
beforeRouteLeave (to, from, next) {
this.$yoho && this.$yoho.blkBackStatus(false);
next();
},
components: {
twoPicture: ResourceTwoImage,
tfGoodsList: ResourceTfGoodsList,
newSingleImage: ResourceSingleImage,
BlkNewProductFloorResource: ResourceNewProductList,
SearchSlider,
HomeSlider
},
async mounted() {
await this.$store.dispatch(FETCH_CHANNEL_REQUEST, {gender: 'men'});
await this.$store.dispatch(FETCH_CHANNEL_REQUEST, {gender: 'women'});
}
};
</script>
<style lang="scss">
.resources {
padding-bottom: 20px;
}
.home-header {
.icon-nav-new {
font-size: 34px !important;
}
.icon-search-new {
font-size: 42px !important;
}
.logo {
background-image: url('~statics/img/logo.png');
display: block;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: 152px 27px;
}
}
</style>