Merge branch 'master' of git.yoho.cn:fe/yoho-community-web

@@ -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>
-  <button class="btn-follow hover-opacity" :class="followClass" @click="onFollow">{{followText}}</button>
+  <div class="btn-follow hover-opacity" :class="followClass" @click="onFollow">{{followText}}</div>
 </template>
 
 <script>

 <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,

 <template>
   <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>
+      <SlideItem :style="slideItemStyle" v-for="(item, inx) in data.blockList" :key="inx">
+        <ImageFormat :mode="1" :lazy="lazy" :style="getImageStyle(item)" class="image-slide-item" :src="item.contentData" :width="item.width" :height="item.height"></ImageFormat>
       </SlideItem>
       <template slot="dots" slot-scope="props">
         <span class="slide-dot"
@@ -19,7 +19,9 @@
 </template>
 
 <script>
+import {first} from 'lodash';
 import {Slide} from 'cube-ui';
+import {mapState} from 'vuex';
 
 export default {
   name: 'ArticleItemSlide',
@@ -43,7 +45,52 @@ export default {
       currentIndex: 1,
     };
   },
+  computed: {
+    ...mapState(['yoho']),
+    slideItemStyle() {
+      const {width, height} = this.firstBlockSize;
+
+      if (width && height) {
+        return {
+          width: `${width}px`,
+          height: `${height}px`,
+          display: 'flex',
+          'justify-content': 'center',
+          'align-items': 'center'
+        };
+      }
+    },
+    firstBlockSize() {
+      const {width, height} = first(this.data.blockList) || {};
+
+      if (width && height) {
+        const scale = width / height;
+
+        return {
+          width: this.yoho.window.clientWidth,
+          height: this.yoho.window.clientWidth / scale,
+        };
+      }
+      return {};
+    }
+  },
   methods: {
+    getImageStyle({width, height}) {
+      const {height: fHeight} = this.firstBlockSize;
+      const scale = width / height;
+
+      if (scale > 1) {
+        return {
+          width: `${this.yoho.window.clientWidth}px`,
+          height: `${this.yoho.window.clientWidth / scale}px`
+        };
+      } else if (scale < 1) {
+        return {
+          width: `${fHeight * scale}px`,
+          height: `${fHeight}px`
+        };
+      }
+    },
     onChange(inx) {
       this.currentIndex = inx + 1;
     },
@@ -88,7 +135,6 @@ export default {
 .article-item-slide {
   position: relative;
   width: 750px;
-  height: 750px;
   overflow: hidden;
 
   & /deep/ .cube-slide-dots {
@@ -120,8 +166,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,15 @@ export default {
     state.articleList = state.articleList.concat(data);
 
     state.articleList.forEach((item, index) => {
+      const imageBlocks = get(item, 'blockList', []).filter(block => block.templateKey === 'image');
+      const firstImage = first(imageBlocks);
+
+      if (firstImage) {
+        let {width, height} = getArticleImageSize(firstImage);
+
+        firstImage.width = width;
+        firstImage.height = height;
+      }
       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'