fe / yohoblk-wap · Commits

Go to a project

Authored by 李奇
Commit 5ef36f31124b884de964663eba57996ac7d861d4 1 parent 3205ce43

资源位焦点图组件添加

Inline Side-by-side
Showing 6 changed files with 106 additions and 78 deletions
... ... @@ -98,5 +98,5 @@ const ssrRender = isDev ? (req, res, next) => {
module.exports = app => {
app.get(/product\/\d+/, ssrRender);
app.get('/channel', ssrRender);
app.get('/channel/channelHome', ssrRender);
app.get('/channel/home', ssrRender);
};
... ...
<template>
<div class="focus-image">
<swipe :class="`swipe swipe-${value.length}`">
<swipe-item v-for="item in value" :key="item.src" :style="{backgroundColor: item.bgColor}">
<a-link :href="item.url" :title="item.title">
<img-format :src="item.src" :w="750" :h="365"></img-format>
</a-link>
</swipe-item>
</swipe>
<div v-swiper:mySwiper="swiperOption" class="swipe">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="focus in value" :style="{backgroundColor: focus.bgColor}">
<a-link :href="focus.url">
<img-format :src="focus.src" :w="375" :h="240"></img-format>
</a-link>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<client>
import Vue from 'vue';
import('vue-swipe/dist/vue-swipe.css');
const { Swipe, SwipeItem } = require('vue-swipe');
import('swiper/dist/css/swiper.css');
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr');
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
Vue.use(VueAwesomeSwiper);
</client>
<script>
... ... @@ -27,26 +29,35 @@
props: {
value: Array
},
data() {
return {
swiperOption: {
loop: true,
autoplay: true,
pagination: {
el: '.swiper-pagination'
}
}
}
},
created(){
console.log(this.value)
},
components: {Resource}
};
</script>
<style lang="scss">
.focus-image {
height: 365px;
height: 480px;
overflow: hidden;
.swipe {
position: relative;
height: 100%;
}
.swipe-1 {
.mint-swipe-indicators {
display: none;
}
}
.mint-swipe-item {
.swiper-slide {
a {
display: block;
}
... ... @@ -57,28 +68,16 @@
}
}
.mint-swipe-indicators {
left: initial;
right: 30px;
transform: none;
}
.mint-swipe-indicator {
width: 16px;
height: 16px;
background: #ccc;
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #e0e0e0;
opacity: 1;
vertical-align: middle;
border-radius: 50%;
transform: scale(0.5, 0.5);
margin-left: -4px;
border-radius: 0;
&.active {
width: 24px;
height: 24px;
&.swiper-pagination-bullet-active {
width: 20px;
background: #fff;
border-radius: 50%;
transform: scale(0.5, 0.5);
}
}
}
... ...
<template>
<layout-body class="page-detail">
<header-box slot="header">
<span slot="left"></span>
<span slot="title">男士</span>
<span slot="left">
<i class="icon icon-nav"></i>
</span>
<span slot="title">
男士
</span>
<span slot="right">
<i class="icon icon-search"></i>
</span>
</header-box>
<div class="resources">
<resource-focus-image v-if="focus" :value="focus"></resource-focus-image>
<resource-two-image v-if="twoImages" :value="twoImages"></resource-two-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-focus-image :value="channel.man[0].data"></resource-focus-image>
</div>
</layout-body>
</template>
<script>
import {
FETCH_CHANNEL_MAN_REQUEST
} from 'store/channel/types';
import {mapState} from 'vuex';
import components from 'components/resources';
export default {
name: 'Cate',
data() {
return {
twoImages: [{
src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'
}, {
src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'
}],
singleImages: {
src: '//img11.static.yhbimg.com/yhb-img01/2017/07/26/09/01496efd7e853c2aaa1e38035d788eaa8e.jpg?imageView2/2/w/750/h/364/interlace/1'
},
focus: [
{
src: '//img10.static.yhbimg.com/yhb-img01/2017/08/14/16/01da1614141a2e60b48360b8c46d054b9f.png?imageView2/2/w/750/h/365/interlace/1',
url: '//www.baidu.com',
title: 'haha',
bgColor: '#000'
},
{
src: '//img11.static.yhbimg.com/yhb-img01/2017/07/26/09/01496efd7e853c2aaa1e38035d788eaa8e.jpg?imageView2/2/w/750/h/365/interlace/1',
url: '//www.baidu.com',
title: 'haha',
bgColor: '#000'
}
]
}
},
computed: {
...mapState(['channel']),
},
asyncData({store}) {
return store.dispatch(FETCH_CHANNEL_MAN_REQUEST);
},
components: {...components}
};
</script>
... ...
export default {
path: '/',
name: 'cate',
alias: '/channel/home',
component: () => import(/* webpackChunkName: "cate" */ './channel-home')
};
... ...
import {
FETCH_HOME_REQUEST,
FETCH_HOME_FAILURE,
FETCH_HOME_SUCCESS
FETCH_HOME_SUCCESS,
FETCH_CHANNEL_MAN_REQUEST,
FETCH_CHANNEL_MAN_SUCCESS,
FETCH_CHANNEL_MAN_FAILURE
} from './types';
import {
HOME_CONTENT_CODE
HOME_CONTENT_CODE,
CHANNEL_MAN_CONTENT_CODE,
CHANNEL_WOMEN_CONTENT_CODE
} from '../content-code';
import _ from 'lodash';
export default {
state: {
home: {},
fethingHome: false
man: {},
fethingHome: false,
fethingMan: false,
fethingWoman: false
},
mutations: {
[FETCH_HOME_REQUEST](state) {
... ... @@ -24,6 +32,16 @@ export default {
state.fethingHome = false;
state.home = data;
},
[FETCH_CHANNEL_MAN_REQUEST](state) {
state.fethingMan = true;
},
[FETCH_CHANNEL_MAN_FAILURE](state) {
state.fethingMan = false;
},
[FETCH_CHANNEL_MAN_SUCCESS](state, {data}) {
state.fethingMan = false;
state.man = data;
},
},
actions: {
async [FETCH_HOME_REQUEST]({commit, state}) {
... ... @@ -40,6 +58,19 @@ export default {
console.error(e);
commit(FETCH_HOME_FAILURE);
}
},
async [FETCH_CHANNEL_MAN_REQUEST]({commit, state}) {
commit(FETCH_CHANNEL_MAN_REQUEST);
try {
const result = await this.$api.get('/resource/get', {content_code: CHANNEL_MAN_CONTENT_CODE});
console.log(result)
commit(FETCH_CHANNEL_MAN_SUCCESS, result);
return result;
} catch (e) {
console.error(e);
commit(FETCH_CHANNEL_MAN_FAILURE);
}
}
}
};
... ...
export const FETCH_HOME_REQUEST = 'FETCH_HOME_REQUEST';
export const FETCH_HOME_SUCCESS = 'FETCH_HOME_SUCCESS';
export const FETCH_HOME_FAILURE = 'FETCH_HOME_FAILURE';
\ No newline at end of file
export const FETCH_HOME_FAILURE = 'FETCH_HOME_FAILURE';
export const FETCH_CHANNEL_MAN_REQUEST = 'FETCH_CHANNEL_MAN_REQUEST';
export const FETCH_CHANNEL_MAN_SUCCESS = 'FETCH_CHANNEL_MAN_SUCCESS';
export const FETCH_CHANNEL_MAN_FAILURE = 'FETCH_CHANNEL_MAN_FAILURE';
export const FETCH_CHANNEL_WOMEN_REQUEST = 'FETCH_CHANNEL_WOMEN_REQUEST';
export const FETCH_CHANNEL_WOMEN_SUCCESS = 'FETCH_CHANNEL_WOMEN_SUCCESS';
export const FETCH_CHANNEL_WOMEN_FAILURE = 'FETCH_CHANNEL_WOMEN_FAILURE';
export const FETCH_ABOUT_REQUEST = 'FETCH_ABOUT_REQUEST';
export const FETCH_ABOUT_SUCCESS = 'FETCH_ABOUT_SUCCESS';
export const FETCH_ABOUT_FAILURE = 'FETCH_ABOUT_FAILURE';
... ...