fe / yohoblk-wap · Commits

Go to a project

Authored by 李奇
Commit ec56b4d4fcf54dfcdcc9e6756fbce8b5ce5d49ff 1 parent 33f7e8a7

关于页面数据整合

Inline Side-by-side
Showing 4 changed files with 64 additions and 31 deletions
... ... @@ -104,7 +104,10 @@ const ssrRender = isDev ? (req, res, next) => {
const routes = [
/product\/\d+/,
'/channel',
'/channel/search'
'/channel/search',
'/channel/men',
'/channel/women',
'/about'
];
module.exports = app => {
... ...
... ... @@ -2,9 +2,10 @@
<resource>
<ul class="resource-products">
<li class="product-item" v-for="(item, index) in value" :key="index">
<img-format :src="item.src" :w="94" :h="125"></img-format>
<p class="title">{{item.title}}</p>
<p class="price">{{item.price}}</p>
<img-format :src="item.default_images" :w="94" :h="125"></img-format>
<p class="brand ellipsis" v-if="item.brand_name">{{item.brand_name}}</p>
<p class="title ellipsis" v-if="item.product_name">{{item.product_name}}</p>
<p class="price ellipsis" v-if="item.sales_price">￥{{item.sales_price}}</p>
</li>
</ul>
</resource>
... ... @@ -14,7 +15,7 @@
import Resource from './resource';
export default {
name: 'ResourceSingleImage',
name: 'ResourceProductList',
props: {
value: Array
},
... ... @@ -41,6 +42,14 @@ export default {
width: 188px;
height: 250px;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 28px;
max-width: 188px;
}
}
}
</style>
... ...
<template>
<layout-body class="page-detail">
<header-box slot="header">
<span slot="left">
<i class="icon icon-nav"></i>
</span>
<span slot="title">
{{title[gender]}}
</span>
<span slot="right">
<i class="icon icon-search"></i>
</span>
</header-box>
<div class="resources" v-for="floor in data.data">
<resource-category :gender="gender" :value="data.sort" v-if="floor.category"></resource-category>
<resource-focus-image v-if="floor.template_name=='focus'" :value="floor.data"></resource-focus-image>
<resource-single-image v-if="floor.template_name =='newSingleImage'"
:value="floor.data.list[0]"></resource-single-image>
<div class="shop-floor" v-if="floor.template_name=='shopFloor'">
<resource-single-image :value="floor.data.list[0]"></resource-single-image>
<resource-product-list :value="products"></resource-product-list>
<div>
<search-slider v-model="searchSlider"></search-slider>
<layout-body class="page-detail">
<header-box slot="header">
<span slot="title">
{{title[gender]}}
</span>
<span slot="right">
<i class="icon icon-search-new" @click="searchSliderSwitch"></i>
</span>
</header-box>
<div class="resources" v-for="floor in data.data">
<resource-category :gender="gender" :value="data.sort" v-if="floor.category"></resource-category>
<resource-focus-image v-if="floor.template_name=='focus'" :value="floor.data"></resource-focus-image>
<resource-single-image v-if="floor.template_name =='newSingleImage'"
:value="floor.data.list[0]"></resource-single-image>
<div class="shop-floor" v-if="floor.template_name=='shopFloor'">
<resource-single-image :value="floor.data.list[0]"></resource-single-image>
<resource-product-list :value="products"></resource-product-list>
</div>
<div class="new-arrival-floor" v-if="floor.template_name=='BlkNewProductFloorResource'">
<resource-product-list :value="floor.data.list"></resource-product-list>
</div>
</div>
</div>
</layout-body>
</layout-body>
</div>
</template>
<script>
... ... @@ -29,12 +32,19 @@
FETCH_CHANNEL_REQUEST,
} from 'store/channel/types';
import {mapState} from 'vuex';
import components from 'components/resources';
import {
ResourceCategory,
ResourceFocusImage,
ResourceSingleImage,
ResourceProductList
} from 'components/resources';
import {SearchSlider} from 'components/search';
export default {
name: 'ChannelHome',
data() {
return {
searchSlider: false,
title: {
men: '男士',
women: '女士'
... ... @@ -82,6 +92,11 @@
}]
}
},
methods: {
searchSliderSwitch() {
this.searchSlider = !this.searchSlider;
}
},
computed: {
...mapState(['channel']),
gender() {
... ... @@ -95,7 +110,13 @@
const gender = /\/channel\/men/.test(to.path) ? 'men' : 'women';
return store.dispatch(FETCH_CHANNEL_REQUEST, gender);
},
components: {...components}
components: {
ResourceCategory,
ResourceFocusImage,
ResourceSingleImage,
ResourceProductList,
SearchSlider
}
};
</script>
... ...
... ... @@ -98,7 +98,7 @@ export default {
commit(FETCH_CHANNEL_REQUEST, gender);
try {
const result = await this.$api.get('/resource/get', {
const result = await this.$api.get('/api/resource/get', {
content_code: gender === 'men' ? CHANNEL_MAN_CONTENT_CODE : CHANNEL_WOMEN_CONTENT_CODE
});
... ... @@ -117,7 +117,7 @@ export default {
commit(FETCH_ABOUT_REQUEST, gender);
try {
const result = await this.$api.get('/resource/get', {
const result = await this.$api.get('/api/resource/get', {
content_code: ABOUT_CONTENT_CODE
});
... ...