详情页增加推荐，以及尺码图片

+<template>
+  <div class="articles-wrapper" v-if="articleList">
+    <div class="articles-container">
+      <p class="title">推荐搭配({{articleTotal}})</p>
+      <ul>
+        <li v-for="item in articleList" @click="showAricleImages" :data-id="item.articleId" :data-index="item.imageindex">
+          <img v-lazy="item.coverImage">
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import {createNamespacedHelpers} from 'vuex';
+
+const {mapActions} = createNamespacedHelpers('product');
+
+export default {
+  name: 'grassArtilces',
+  props: {
+    listdata: {
+      type: Object,
+      default: {}
+    },
+    productId: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      imgs: [],
+      initialIndex: 0,
+      articleTotal: 0
+    };
+  },
+  computed: {
+    articleList() { // 获取到listdata之后处理数据
+      if (this.listdata && this.listdata.list) {
+        this.imgs = this.listdata.imageList || [];
+        this.articleTotal = this.listdata.list.length || 0;
+      }
+      return this.listdata.list;
+    }
+  },
+  activated() {
+
+  },
+  methods: {
+    ...mapActions(['fetchGrassArticleImages']),
+    showAricleImages(e) { // 点击推荐小图展示文章内大图
+      this.initialIndex = parseInt(e.currentTarget.dataset.index, 10) || 0;
+
+      this.$createImagePreview({
+        imgs: this.imgs,
+        initialIndex: this.initialIndex,
+        loop: false,
+        speed: 500,
+        onChange: (i) => {
+          this.initialIndex = i;
+        }
+      }).show();
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .articles-wrapper {
+    position: relative;
+    width: 100%;
+    margin: 30px 0;
+
+    .articles-container {
+      position: relative;
+      padding: 0 40px;
+      overflow: hidden;
+
+      .title {
+        font-size: 32px;
+        line-height: 44px;
+        font-weight: 600;
+      }
+
+      ul {
+        position: relative;
+        width: 100%;
+        margin: 20px auto;
+        list-style: none;
+        padding: 0;
+        overflow: hidden;
+
+        li {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          float: left;
+          width: 222px;
+          height: 222px;
+          margin: 0 0 2px 0;
+          box-sizing: border-box;
+          border-radius: 8px;
+          overflow: hidden;
+
+          img {
+            height: 100%;
+            float: left;
+            margin: 0 auto;
+          }
+        }
+
+        li:nth-child(3n + 2) {
+          margin: 0 2px;
+        }
+      }
+    }
+  }
+
+</style>

+<template>
+  <!--尺码图片展示-->
+  <div v-if="sizeImage" class="size-img-container" :data-bid="brandId" :data-pid="productId">
+    <img v-lazy="sizeImage">
+  </div>
+</template>
+
+<script>
+import {createNamespacedHelpers} from 'vuex';
+
+const {mapActions} = createNamespacedHelpers('product');
+
+export default {
+  name: 'sizeImage',
+  props: {
+    brandId: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    productId: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    }
+  },
+  data() {
+    return {
+      sizeImage: ''
+    };
+  },
+  activated() {
+    this.getProductSizeImage({brand_id: this.brandId, product_id: this.productId}).then(result => {
+      if (result.code === 200 && result.data) {
+        let url = result.data.split('?')[0];
+
+        this.sizeImage = url + '?imageView2/2/w/750/q/60';
+      }
+    });
+  },
+  methods: {
+    ...mapActions(['getProductSizeImage'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .size-img-container {
+    position: relative;
+    display: flex;
+    width: 750px;
+    align-items: center;
+    padding: 0 40px;
+    margin: 30px auto;
+
+    img {
+      width: 100%;
+    }
+  }
+</style>

@@ -7,7 +7,6 @@ export default {
     ...mapState(['products', 'fav', 'topLists']),
     productDetail() {
       this.ensureProduct({ productId: this.productId });
-
       return this.products[this.productId];
     },
     imageList() {

@@ -73,6 +73,11 @@
 
         <img class="ref-img" v-lazy="prdDetailImage"/>
 
+        <!--尺码图片-->
+        <size-image :brand-id="brandId" :product-id="productId"></size-image>
+        <!--九宫格社区图-->
+        <GrassArtilces :productId="productId" :listdata="articleData"></GrassArtilces>
+
         <div class="recommend" v-if="recommend"><h2>相关推荐</h2>
           <product-list ref="recommendList" :list="recommend" priceKey="price" :yas-params="recommendYasParams"/>
         </div>
@@ -95,7 +100,7 @@
                        @hide="onSizeSelectSheetHide"
                        @select="onSelectTradeProduct"
                        @add="onRequestSize"/>
-    <detail-useage-tips></detail-useage-tips>
+<!--    <detail-useage-tips></detail-useage-tips>-->
   </div>
 </template>
 
@@ -118,9 +123,11 @@ import TopList from './components/top-list';
 import SquareImg from './components/square-img';
 import stateShortCutsMixins from './mixins';
 import trackingMixins from './tracking-mixins';
-import DetailUseageTips from './components/detail-useage-tips';
+// import DetailUseageTips from './components/detail-useage-tips';
 
 import VideoPlayer from '@/components/video-player';
+import GrassArtilces from './components/grass-artilces';
+import SizeImage from './components/size-image'; //  商品尺码图片
 
 const { mapActions, mapState } = createNamespacedHelpers('product');
 const { mapActions: mapSecondActions } = createNamespacedHelpers('second');
@@ -129,7 +136,9 @@ export default {
   name: 'ProductDetail',
   mixins: [stateShortCutsMixins, trackingMixins],
   components: {
-    DetailUseageTips,
+    SizeImage,
+    GrassArtilces,
+    // DetailUseageTips,
     SizeSelectSheet,
     ActivityListSheet,
     SizeRequestSheet,
@@ -180,6 +189,7 @@ export default {
         POS_ID: 2,
       },
       recommendYasIndex: 0, // 推荐商品爆光顺序
+      articleData: {}, // 9宫格推荐文章
     };
   },
   computed: {
@@ -237,6 +247,11 @@ export default {
       }
 
       return Math.min(...price);
+    },
+    brandId() {
+      let brandId = this.productDetail.brandId || 0;
+
+      return brandId;
     }
   },
   mounted() {
@@ -311,6 +326,15 @@ export default {
       });
     }
 
+    // 获取社区内容9宫格图片
+    this.fecthGrassAricles({
+      productSkn: this.productId
+    }).then(result => {
+      if (result && result.code === 200 && result.data && result.data.list && result.data.list.length > 2) {
+        this.articleData = result.data;
+      }
+    });
+
     // yas
     /**
      * 商品详情页打开时
@@ -379,7 +403,7 @@ export default {
   },
   methods: {
     ...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'setupInitialProductInfo',
-      'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
+      'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize', 'fecthGrassAricles']),
     ...mapSecondActions(['fetchStorageCount']),
     historyBackGuard() {
       for (let key of Object.keys(this.actionSheetCloseMap)) {

@@ -141,4 +141,87 @@ export default {
   async payment(context, { skup }) {
     return this.$api.post('/api/ufo/product/order/payment', { skup, api_version: 1 });
   },
+
+  // 获取详情页展示的社区内容
+  async fecthGrassAricles({state, commit}, {productSkn}) {
+    let articleResult = await this.$api.get('/api/grass/product/article', {
+      productSkn,
+      productType: 2,
+      fromXianYu: 'Y'
+    });
+
+    if (articleResult && articleResult.data && articleResult.data.list && articleResult.data.list.length > 0) {
+      let articles = articleResult.data.list || [];
+
+      let articleIds = [];
+      let newArticleList = [];
+      let newImages = [];
+
+      // 找出所有ariticleId
+      articles.forEach(item => {
+        articleIds.push(item.articleId);
+        newArticleList.push(item);
+      });
+
+      // 传入articleId获取所有需要展示的图片列表
+      let imagesResult = await this.$api.get(
+        '/api/grass/product/articleImages',
+        {
+          articleIds: articleIds.join(',')
+        });
+
+      // 处理数据，把对应数据整合到articles
+      if (imagesResult && imagesResult.data && imagesResult.data.imageMap) {
+        let imageData = imagesResult.data.imageMap;
+        let imageIndex = 0;
+
+        // 处理每篇文章下面的图片
+        newArticleList.forEach(articleItem => {
+          articleItem.imageindex = imageIndex;
+
+          if (imageData[articleItem.articleId]) {// 如果找到对应id的图片列表
+            imageIndex += imageData[articleItem.articleId].length;
+
+            let imageList = [];
+
+            imageData[articleItem.articleId].forEach(listItem => {
+              listItem.contentData = listItem.contentData.replace(/{mode}/, 2).replace(/{width}/, 750).replace(/\/h\/{height}/, '/q/60');
+              imageList.push(listItem);
+              newImages.push(listItem.contentData);
+            });
+            articleItem.coverImage = articleItem.coverImage.replace(/{mode}/, 2).replace(/{width}/, 200).replace(/{height}/, 200)
+
+            articleItem.imageList = imageList;
+          } else { // 没找到对应id的图片列表则把自己的图插入
+            let imageList = [
+              {
+                articleId: articleItem.articleId,
+                contentData: articleItem.coverImage.replace(/{mode}/, 2).replace(/{width}/, 750).replace(/\/h\/{height}/, '/q/60')
+              }
+            ];
+
+            articleItem.imageList = imageList;
+            articleItem.coverImage = articleItem.coverImage.replace(/{mode}/, 2).replace(/{width}/, 200).replace(/{height}/, 200);
+            imageIndex += 1;
+            newImages = newImages.push(imageList.contentData);
+          }
+        });
+
+        articleResult.data.imageList = newImages;
+      }
+    }
+
+    // console.log('articleFinalResult=', articleResult);
+
+    return articleResult;
+  },
+
+  async getProductSizeImage({state}, {product_id, brand_id}) {
+    let result = await this.$api.get('/api/ufo/product/sizeImage', {
+      product_id,
+      brand_id
+    });
+
+    return result;
+  }
 };

@@ -43,7 +43,7 @@ export function defaultProduct() {
     resource: null,
     activity: [],
     recommend: [],
-    top3: [],
+    top3: []
   };
 }
 
@@ -67,7 +67,7 @@ export function defaultState() {
      * storageId: 库存id
      * size: 尺寸信息
      */
-    selectedProductInfo: defaultSelectedSize(),
+    selectedProductInfo: defaultSelectedSize()
   };
 }
 

@@ -134,4 +134,37 @@ module.exports = {
       product_id: {type: Number}, // 商品id
     },
   },
+
+  // 商品详情页展示的社区图片内容
+  '/api/grass/product/article': {
+    ufo: false,
+    auth: false,
+    api: 'app.grass.simpleProductArticle',
+    params: {
+      productSkn: {type: Number},
+      productType: {type: Number},// 1.有货商品 2.ufo商品
+      fromXianYu: {type: String}
+    }
+  },
+
+  // 通过articleId获取文章下拥有的图片列表(articleId多个用逗号隔开)
+  '/api/grass/product/articleImages': {
+    ufo: false,
+    auth: false,
+    api: 'app.grass.productArticleListOnlyImage',
+    params: {
+      articleIds: {type: String}
+    }
+  },
+
+  // 获取详情页的尺码图片
+  '/api/ufo/product/sizeImage': {
+    ufo: true,
+    auth: false,
+    api: 'ufo.product.sizeImage',
+    params: {
+      product_id: {type: Number},
+      brand_id: {type: Number}
+    }
+  }
 };