fe / yohoblk-wap · Commits

Go to a project

Authored by 李奇
Commit 5ef36f31124b884de964663eba57996ac7d861d4 1 parent 3205ce43

资源位焦点图组件添加

Inline Side-by-side
Showing 6 changed files with 103 additions and 75 deletions
@@ -98,5 +98,5 @@ const ssrRender = isDev ? (req, res, next) => { @@ -98,5 +98,5 @@ const ssrRender = isDev ? (req, res, next) => {
98 module.exports = app => { 98 module.exports = app => {
99 app.get(/product\/\d+/, ssrRender); 99 app.get(/product\/\d+/, ssrRender);
100 app.get('/channel', ssrRender); 100 app.get('/channel', ssrRender);
101 - app.get('/channel/channelHome', ssrRender); 101 + app.get('/channel/home', ssrRender);
102 }; 102 };
1 <template> 1 <template>
2 <div class="focus-image"> 2 <div class="focus-image">
3 - <swipe :class="`swipe swipe-${value.length}`">  
4 - <swipe-item v-for="item in value" :key="item.src" :style="{backgroundColor: item.bgColor}">  
5 - <a-link :href="item.url" :title="item.title">  
6 - <img-format :src="item.src" :w="750" :h="365"></img-format> 3 + <div v-swiper:mySwiper="swiperOption" class="swipe">
  4 + <div class="swiper-wrapper">
  5 + <div class="swiper-slide" v-for="focus in value" :style="{backgroundColor: focus.bgColor}">
  6 + <a-link :href="focus.url">
  7 + <img-format :src="focus.src" :w="375" :h="240"></img-format>
7 </a-link> 8 </a-link>
8 - </swipe-item>  
9 - </swipe> 9 + </div>
  10 + </div>
  11 + <div class="swiper-pagination"></div>
  12 + </div>
10 </div> 13 </div>
11 </template> 14 </template>
12 15
13 <client> 16 <client>
14 import Vue from 'vue'; 17 import Vue from 'vue';
15 - import('vue-swipe/dist/vue-swipe.css');  
16 - const { Swipe, SwipeItem } = require('vue-swipe'); 18 + import('swiper/dist/css/swiper.css');
  19 + const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr');
17 20
18 - Vue.component('swipe', Swipe);  
19 - Vue.component('swipe-item', SwipeItem); 21 + Vue.use(VueAwesomeSwiper);
20 </client> 22 </client>
21 23
22 <script> 24 <script>
@@ -27,26 +29,35 @@ @@ -27,26 +29,35 @@
27 props: { 29 props: {
28 value: Array 30 value: Array
29 }, 31 },
  32 + data() {
  33 + return {
  34 + swiperOption: {
  35 + loop: true,
  36 + autoplay: true,
  37 + pagination: {
  38 + el: '.swiper-pagination'
  39 + }
  40 + }
  41 + }
  42 + },
  43 + created(){
  44 + console.log(this.value)
  45 + },
30 components: {Resource} 46 components: {Resource}
31 }; 47 };
32 </script> 48 </script>
33 49
34 <style lang="scss"> 50 <style lang="scss">
35 .focus-image { 51 .focus-image {
36 - height: 365px; 52 + height: 480px;
  53 + overflow: hidden;
37 54
38 .swipe { 55 .swipe {
39 position: relative; 56 position: relative;
40 height: 100%; 57 height: 100%;
41 } 58 }
42 59
43 - .swipe-1 {  
44 - .mint-swipe-indicators {  
45 - display: none;  
46 - }  
47 - }  
48 -  
49 - .mint-swipe-item { 60 + .swiper-slide {
50 a { 61 a {
51 display: block; 62 display: block;
52 } 63 }
@@ -57,28 +68,16 @@ @@ -57,28 +68,16 @@
57 } 68 }
58 } 69 }
59 70
60 - .mint-swipe-indicators {  
61 - left: initial;  
62 - right: 30px;  
63 - transform: none;  
64 - }  
65 -  
66 - .mint-swipe-indicator {  
67 - width: 16px;  
68 - height: 16px;  
69 - background: #ccc; 71 + .swiper-pagination-bullet {
  72 + width: 10px;
  73 + height: 10px;
  74 + background: #e0e0e0;
70 opacity: 1; 75 opacity: 1;
71 - vertical-align: middle;  
72 - border-radius: 50%;  
73 - transform: scale(0.5, 0.5);  
74 - margin-left: -4px; 76 + border-radius: 0;
75 77
76 - &.active {  
77 - width: 24px;  
78 - height: 24px; 78 + &.swiper-pagination-bullet-active {
  79 + width: 20px;
79 background: #fff; 80 background: #fff;
80 - border-radius: 50%;  
81 - transform: scale(0.5, 0.5);  
82 } 81 }
83 } 82 }
84 } 83 }
1 <template> 1 <template>
2 <layout-body class="page-detail"> 2 <layout-body class="page-detail">
3 <header-box slot="header"> 3 <header-box slot="header">
4 - <span slot="left"></span>  
5 - <span slot="title">男士</span> 4 + <span slot="left">
  5 + <i class="icon icon-nav"></i>
  6 + </span>
  7 + <span slot="title">
  8 + 男士
  9 + </span>
  10 + <span slot="right">
  11 + <i class="icon icon-search"></i>
  12 + </span>
6 </header-box> 13 </header-box>
7 <div class="resources"> 14 <div class="resources">
8 -  
9 - <resource-focus-image v-if="focus" :value="focus"></resource-focus-image>  
10 - <resource-two-image v-if="twoImages" :value="twoImages"></resource-two-image>  
11 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>  
12 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>  
13 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>  
14 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>  
15 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>  
16 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>  
17 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>  
18 - <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image> 15 + <resource-focus-image :value="channel.man[0].data"></resource-focus-image>
19 </div> 16 </div>
20 </layout-body> 17 </layout-body>
21 </template> 18 </template>
22 19
23 <script> 20 <script>
  21 + import {
  22 + FETCH_CHANNEL_MAN_REQUEST
  23 + } from 'store/channel/types';
  24 + import {mapState} from 'vuex';
24 import components from 'components/resources'; 25 import components from 'components/resources';
25 26
26 export default { 27 export default {
27 name: 'Cate', 28 name: 'Cate',
28 data() { 29 data() {
29 return { 30 return {
30 - twoImages: [{  
31 - src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'  
32 - }, {  
33 - src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'  
34 - }],  
35 - singleImages: {  
36 - src: '//img11.static.yhbimg.com/yhb-img01/2017/07/26/09/01496efd7e853c2aaa1e38035d788eaa8e.jpg?imageView2/2/w/750/h/364/interlace/1' 31 + }
37 }, 32 },
38 - focus: [  
39 - {  
40 - src: '//img10.static.yhbimg.com/yhb-img01/2017/08/14/16/01da1614141a2e60b48360b8c46d054b9f.png?imageView2/2/w/750/h/365/interlace/1',  
41 - url: '//www.baidu.com',  
42 - title: 'haha',  
43 - bgColor: '#000' 33 + computed: {
  34 + ...mapState(['channel']),
44 }, 35 },
45 - {  
46 - src: '//img11.static.yhbimg.com/yhb-img01/2017/07/26/09/01496efd7e853c2aaa1e38035d788eaa8e.jpg?imageView2/2/w/750/h/365/interlace/1',  
47 - url: '//www.baidu.com',  
48 - title: 'haha',  
49 - bgColor: '#000'  
50 - }  
51 - ]  
52 - } 36 + asyncData({store}) {
  37 + return store.dispatch(FETCH_CHANNEL_MAN_REQUEST);
53 }, 38 },
54 components: {...components} 39 components: {...components}
55 }; 40 };
1 export default { 1 export default {
2 path: '/', 2 path: '/',
3 name: 'cate', 3 name: 'cate',
  4 + alias: '/channel/home',
4 component: () => import(/* webpackChunkName: "cate" */ './channel-home') 5 component: () => import(/* webpackChunkName: "cate" */ './channel-home')
5 }; 6 };
1 import { 1 import {
2 FETCH_HOME_REQUEST, 2 FETCH_HOME_REQUEST,
3 FETCH_HOME_FAILURE, 3 FETCH_HOME_FAILURE,
4 - FETCH_HOME_SUCCESS 4 + FETCH_HOME_SUCCESS,
  5 + FETCH_CHANNEL_MAN_REQUEST,
  6 + FETCH_CHANNEL_MAN_SUCCESS,
  7 + FETCH_CHANNEL_MAN_FAILURE
5 } from './types'; 8 } from './types';
6 import { 9 import {
7 - HOME_CONTENT_CODE 10 + HOME_CONTENT_CODE,
  11 + CHANNEL_MAN_CONTENT_CODE,
  12 + CHANNEL_WOMEN_CONTENT_CODE
8 } from '../content-code'; 13 } from '../content-code';
9 import _ from 'lodash'; 14 import _ from 'lodash';
10 15
11 export default { 16 export default {
12 state: { 17 state: {
13 home: {}, 18 home: {},
14 - fethingHome: false 19 + man: {},
  20 + fethingHome: false,
  21 + fethingMan: false,
  22 + fethingWoman: false
15 }, 23 },
16 mutations: { 24 mutations: {
17 [FETCH_HOME_REQUEST](state) { 25 [FETCH_HOME_REQUEST](state) {
@@ -24,6 +32,16 @@ export default { @@ -24,6 +32,16 @@ export default {
24 state.fethingHome = false; 32 state.fethingHome = false;
25 state.home = data; 33 state.home = data;
26 }, 34 },
  35 + [FETCH_CHANNEL_MAN_REQUEST](state) {
  36 + state.fethingMan = true;
  37 + },
  38 + [FETCH_CHANNEL_MAN_FAILURE](state) {
  39 + state.fethingMan = false;
  40 + },
  41 + [FETCH_CHANNEL_MAN_SUCCESS](state, {data}) {
  42 + state.fethingMan = false;
  43 + state.man = data;
  44 + },
27 }, 45 },
28 actions: { 46 actions: {
29 async [FETCH_HOME_REQUEST]({commit, state}) { 47 async [FETCH_HOME_REQUEST]({commit, state}) {
@@ -40,6 +58,19 @@ export default { @@ -40,6 +58,19 @@ export default {
40 console.error(e); 58 console.error(e);
41 commit(FETCH_HOME_FAILURE); 59 commit(FETCH_HOME_FAILURE);
42 } 60 }
  61 + },
  62 + async [FETCH_CHANNEL_MAN_REQUEST]({commit, state}) {
  63 + commit(FETCH_CHANNEL_MAN_REQUEST);
  64 + try {
  65 + const result = await this.$api.get('/resource/get', {content_code: CHANNEL_MAN_CONTENT_CODE});
  66 +
  67 + console.log(result)
  68 + commit(FETCH_CHANNEL_MAN_SUCCESS, result);
  69 + return result;
  70 + } catch (e) {
  71 + console.error(e);
  72 + commit(FETCH_CHANNEL_MAN_FAILURE);
  73 + }
43 } 74 }
44 } 75 }
45 }; 76 };
1 export const FETCH_HOME_REQUEST = 'FETCH_HOME_REQUEST'; 1 export const FETCH_HOME_REQUEST = 'FETCH_HOME_REQUEST';
2 export const FETCH_HOME_SUCCESS = 'FETCH_HOME_SUCCESS'; 2 export const FETCH_HOME_SUCCESS = 'FETCH_HOME_SUCCESS';
3 export const FETCH_HOME_FAILURE = 'FETCH_HOME_FAILURE'; 3 export const FETCH_HOME_FAILURE = 'FETCH_HOME_FAILURE';
  4 +
  5 +export const FETCH_CHANNEL_MAN_REQUEST = 'FETCH_CHANNEL_MAN_REQUEST';
  6 +export const FETCH_CHANNEL_MAN_SUCCESS = 'FETCH_CHANNEL_MAN_SUCCESS';
  7 +export const FETCH_CHANNEL_MAN_FAILURE = 'FETCH_CHANNEL_MAN_FAILURE';
  8 +
  9 +export const FETCH_CHANNEL_WOMEN_REQUEST = 'FETCH_CHANNEL_WOMEN_REQUEST';
  10 +export const FETCH_CHANNEL_WOMEN_SUCCESS = 'FETCH_CHANNEL_WOMEN_SUCCESS';
  11 +export const FETCH_CHANNEL_WOMEN_FAILURE = 'FETCH_CHANNEL_WOMEN_FAILURE';
  12 +
  13 +export const FETCH_ABOUT_REQUEST = 'FETCH_ABOUT_REQUEST';
  14 +export const FETCH_ABOUT_SUCCESS = 'FETCH_ABOUT_SUCCESS';
  15 +export const FETCH_ABOUT_FAILURE = 'FETCH_ABOUT_FAILURE';