艾喜车修改

src/views/ebiz/product-store/StoreDetail.vue

@@ -50,9 +50,16 @@
       <template v-if="redirectUrl">
         <iframe v-show="thirdUrlReady" style="width: 100vw; min-height: 100vh;" :src="redirectUrl" frameborder="0"></iframe>
       </template>
-      <template v-else>
+      <template v-if="detailImg">
         <img id="detailImg" v-if="detailImg" :src="$assetsUrl + detailImg" />
       </template>
+      <template v-if="imgList">
+        <van-grid :column-num="3">
+          <van-grid-item v-for="(img, i) in imgList" :key="i" @click="prevImg(i)">
+            <van-image fit="cover" :src="$assetsUrl + img" />
+          </van-grid-item>
+        </van-grid>
+      </template>
     </div>
     <van-button class="bottom-btn" :disabled="!isCanCheck1 || !isCanCheck2" v-if="isWeixin && bottomBtnShow" type="danger" @click="check" v-no-more-click="1000"
       >查看</van-button
@@ -67,7 +74,7 @@
 </template>
 
 <script>
-import { NoticeBar, Field, Radio, Popup, RadioGroup, Toast } from 'vant'
+import { NoticeBar, Field, Radio, Popup, RadioGroup, Toast, Grid, GridItem, Image as VanImage, ImagePreview } from 'vant'
 import icon from '@/assets/images/jilu@3x.png'
 import { getShopList, saveShareTrack } from '@/api/ebiz/product-store/product-store'
 
@@ -78,7 +85,11 @@ export default {
     [Radio.name]: Radio,
     [RadioGroup.name]: RadioGroup,
     [Popup.name]: Popup,
-    [Field.name]: Field
+    [Field.name]: Field,
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem,
+    [VanImage.name]: VanImage,
+    [ImagePreview.name]: ImagePreview
   },
   props: {
     mallId: {
@@ -122,6 +133,7 @@ export default {
       },
       loaded: false,
       detailImg: '',
+      imgList: [],
       bottomBtnShow: false,
       redirectUrl: '',
       thirdUrlReady: false
@@ -149,6 +161,12 @@ export default {
     this.getShopList({ id: this.mallId })
   },
   methods: {
+    prevImg(i) {
+      let imgs = this.imgList.map(img => {
+        return this.$assetsUrl + img
+      })
+      ImagePreview(imgs, i)
+    },
     //获取商城详情
     enterProtocol() {
       this.$jump({
@@ -203,7 +221,12 @@ export default {
               })
               window['appCallBack'] = this.appCallBack
             }
-            this.detailImg = res.content.detailImgUrl
+            let imgs = res.content.detailImgUrl.split(',')
+            if (imgs.length > 1) {
+              this.imgList = res.content.detailImgUrl.split(',')
+            } else {
+              this.detailImg = res.content.detailImgUrl
+            }
             this.bottomBtnShow = res.content.bottomBtnShow
             this.detail = res.content
             this.pdfUrl = this.$assetsUrl + res.content.pdfUrl
@@ -309,5 +332,11 @@ export default {
     width: 100%;
     z-index: 1;
   }
+  /deep/ .van-grid-item {
+    height: 200px;
+  }
+  /deep/ .van-image {
+    height: 100%;
+  }
 }
 </style>