Authored by 陈峰

comit

... ... @@ -71,6 +71,7 @@ export default {
list: [],
heights: 0,
startIndex: 0,
currentIndex: 0,
loadings: [],
startOffset: 0,
noMore: false
... ... @@ -228,13 +229,20 @@ export default {
updateIndex() {
// update visible items start index
let top = this.$el.scrollTop;
let hasTopItem = false;
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].top > top) {
this.startIndex = Math.max(0, i - 1);
hasTopItem = true;
break;
}
}
if (hasTopItem) {
this.currentIndex = this.startIndex;
} else {
this.currentIndex = this.items.length - 1;
}
},
getStartItemOffset() {
if (this.items[this.startIndex]) {
... ... @@ -254,7 +262,7 @@ export default {
}
this.updateIndex();
this.$emit('scroll', {scrollTop: this.$el.scrollTop, startIndex: this.startIndex, item: this.items[this.startIndex]});
this.$emit('scroll', {scrollTop: this.$el.scrollTop, startIndex: this.currentIndex, item: this.items[this.currentIndex]});
},
_onResize() {
this.getStartItemOffset();
... ...
<template>
<Article ref="article" :on-fetch="onFetch" @on-follow="onFollow">
<template v-slot:thumb>
<ArticleItem v-for="data in currentList" :key="data.articleId" :data="data"></ArticleItem>
</template>
</Article>
<Article ref="article" :on-fetch="onFetch" @on-follow="onFollow"></Article>
</template>
<script>
... ... @@ -24,9 +20,6 @@ export default {
created() {
this.id = this.$route.params.id;
},
serverPrefetch() {
return this.onFetch();
},
beforeRouteUpdate(to, from, next) {
if (this.$route.params.id !== to.params.id) {
this.id = to.params.id;
... ... @@ -51,13 +44,6 @@ export default {
this.$refs.article.init();
},
async onFetch() {
if (this.page === 1 && this.articleList.length) {
this.page++;
this.fetchArticleProductFavs({
articles: this.articleList
});
return this.articleList;
}
const articleId = parseInt(this.id, 10);
if (!articleId) {
... ...
... ... @@ -96,7 +96,6 @@ export default {
});
},
onShare() {
console.log(this.data.imageUrl)
this.$yoho.share({
title: '逛资讯',
imgUrl: this.data.imageUrl,
... ...
... ... @@ -2,7 +2,7 @@
<div class="article-item-slide">
<Slide :data="data.blockList" :threshold="0.2" :auto-play="false" :loop="false" :options="scrollOption" @change="onChange">
<SlideItem v-for="(item, inx) in data.blockList" :key="inx">
<ImageFormat :lazy="lazy" class="image-slide-item" :src="item.contentData" :width="item.width" :height="item.height"></ImageFormat>
<ImageFormat :lazy="lazy" class="image-slide-item" :style="getStyle(item)" :src="item.contentData" :width="item.width" :height="item.height"></ImageFormat>
</SlideItem>
<template slot="dots" slot-scope="props">
<span class="slide-dot"
... ... @@ -20,6 +20,7 @@
<script>
import {Slide} from 'cube-ui';
import {mapState} from 'vuex';
export default {
name: 'ArticleItemSlide',
... ... @@ -43,7 +44,19 @@ export default {
currentIndex: 1,
};
},
computed: {
...mapState(['yoho'])
},
methods: {
getStyle(block) {
const rate = +block.width / +block.height;
const height = this.yoho.window.clientWidth / rate;
return {
width: `${this.yoho.window.clientWidth}px`,
height: `${height}px`
};
},
onChange(inx) {
this.currentIndex = inx + 1;
},
... ... @@ -88,7 +101,6 @@ export default {
.article-item-slide {
position: relative;
width: 750px;
height: 750px;
overflow: hidden;
& /deep/ .cube-slide-dots {
... ... @@ -121,7 +133,6 @@ export default {
.image-slide-item {
width: 750px;
height: 750px;
overflow: hidden;
}
... ...
import * as Types from './types';
import { get } from 'lodash';
import {getArticleImageSize} from 'utils/image-handler';
import { get, first } from 'lodash';
export default {
[Types.FETCH_ARTICLE_DETAIL_REQUEST](state) {
... ... @@ -13,6 +14,30 @@ export default {
state.articleList = state.articleList.concat(data);
state.articleList.forEach((item, index) => {
const imageBlocks = get(item, 'blockList', []).filter(block => block.templateKey === 'image');
let {width, height} = getArticleImageSize(first(imageBlocks) || {});
if (width && height) {
const scale = width / height;
imageBlocks.forEach(block => {
let mogr2 = '?imageMogr2/thumbnail/';
if (block.width / block.height > scale) {
mogr2 += `x${height}`;
} else {
mogr2 += `${width}x`;
}
mogr2 += `/gravity/Center/crop/${width}x${height}`;
block.width = width;
block.height = height;
const image = (block.contentData || '').split('?')[0];
if (image) {
block.contentData = `${image}${mogr2}`;
}
});
}
item.index = index;
});
data.forEach(item => {
... ...
const MIN_SCALE = 3 / 4;
export function getArticleImageSize({width, height}) {
if (width / height < MIN_SCALE) {
return {
width,
height: width / MIN_SCALE
};
}
return {width, height};
}
... ...
... ... @@ -58,7 +58,7 @@ module.exports = {
activity: '//activity.yohobuy.com',
index: '//m.yohobuy.com'
},
useCache: false,
useCache: true,
loggers: {
infoFile: {
close: true,
... ...
module.exports = [
{
route: /mapp\/order\/ufo\/\d+\.html/,
},
{
route: /mapp\/coupon\/ufo/,
},
{
route: /mapp\/coupon\/yoho/,
},
{
route: /mapp\/license\/form.html/,
route: /article\/\d+/,
// cacheKey: '$url$params',
// cache: true
}
];
... ...
... ... @@ -62,10 +62,10 @@ const handlerError = (err = {}, req, res, next) => {
return next(err);
};
const getCacheKey = (urlPath, cackeKey = '') => {
const getCacheKey = (urlPath, cacheKey = '') => {
const urlObj = url.parse(urlPath);
return md5(cackeKey
return md5(cacheKey
.replace('$url', urlObj.pathname)
.replace('$params', urlObj.query));
};
... ... @@ -84,7 +84,7 @@ const render = (route) => {
if (isDegrade) {
return res.send(degradeHtml);
}
const ck = route.cackeKey ? getCacheKey(req.url, route.cackeKey) : void 0;
const ck = route.cacheKey ? getCacheKey(req.url, route.cacheKey) : void 0;
if (config.useCache && route.cache && ck) {
const html = await redis.getAsync(ck);
... ... @@ -116,7 +116,7 @@ const devRender = (route) => {
return async(req, res, next) => {
try {
res.setHeader('X-YOHO-Version', pkg.version);
const ck = route.cackeKey ? getCacheKey(req.url, route.cackeKey) : void 0;
const ck = route.cacheKey ? getCacheKey(req.url, route.cacheKey) : void 0;
// return require('request-promise')({
// url: 'http://m.yohobuy.com:6005/degrade.html'
... ...