Merge remote-tracking branch 'refs/remotes/origin/hotfix/detail-imageview-close' into develop

@@ -128,6 +128,26 @@ export default {
   .cube-popup-mask {
     opacity: 1 !important;
   }
+
+  /* 关闭按钮 */
+  .cube-image-preview-header {
+    .image-preview-custom-close {
+      position: absolute;
+      display: block;
+      right: 10px;
+      top: 10px;
+      width: 60px;
+      height: 24px;
+      color: white;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+      border: 1px solid #fff;
+      box-sizing: border-box;
+      border-radius: 10px;
+      z-index: 99;
+    }
+  }
 }
 
 </style>

@@ -36,7 +36,9 @@ export default {
     return {
       imgs: [],
       initialIndex: 0,
-      articleTotal: 0
+      articleTotal: 0,
+      imagePreview: null,
+      isShowPreview: false,
     };
   },
   computed: {
@@ -53,15 +55,38 @@ export default {
     showAricleImages(e) { // 点击推荐小图展示文章内大图
       this.initialIndex = parseInt(e.currentTarget.dataset.index, 10) || 0;
 
-      this.$createImagePreview({
+      this.imagePreview = this.$createImagePreview({
         imgs: this.imgs,
         initialIndex: this.initialIndex,
         loop: false,
         speed: 500,
         onChange: (i) => {
           this.initialIndex = i;
+        },
+        onHide: () => {
+          console.log('hide');
         }
-      }).show();
+      }, (h) => {
+        return h('a', {
+          class: {
+            'image-preview-custom-close': true
+          },
+          slot: 'header',
+          on: {
+            click: () => {
+              if (this.imagePreview) {
+                this.imagePreview.hide();
+                this.imagePreview = null;
+                this.isShowPreview = false;
+              }
+
+            }
+          }
+        }, '关 闭',);
+      });
+
+      this.imagePreview.show();
+      this.isShowPreview = true;
 
       // yas
       /**
@@ -86,6 +111,13 @@ export default {
         }
       });
     },
+    closeImagePreview() {
+      if (this.imagePreview && this.isShowPreview) {
+        this.imagePreview.hide();
+        this.imagePreview = null;
+        this.isShowPreview = false;
+      }
+    }
   }
 };
 </script>

@@ -73,8 +73,8 @@
         </a>
 
         <!-- <img class="ref-img" v-lazy="prdDetailImage"/> -->
-
-        <GrassArtilces :productId="productId" :listdata="articleData"></GrassArtilces>
+        <!--推荐搭配9宫格图片-->
+        <GrassArtilces ref="grassArticles" :productId="productId" :listdata="articleData"></GrassArtilces>
 
         <!--尺码图片-->
         <size-image :brand-id="brandId" :product-id="productId"></size-image>
@@ -391,6 +391,12 @@ export default {
       return next(false);
     }
 
+    if (this.$refs.grassArticles.isShowPreview) {
+
+      this.$refs.grassArticles.closeImagePreview();
+      return next(false);
+    }
+
     next();
   },
   beforeRouteLeave(to, from, next) {
@@ -398,6 +404,12 @@ export default {
       return next(false);
     }
 
+    if (this.$refs.grassArticles.isShowPreview) {
+
+      this.$refs.grassArticles.closeImagePreview();
+      return next(false);
+    }
+
     next();
   },
   methods: {