update

src/components/FreeTravel/FreeDetail.vue

 <template>
   <div v-loading="detailLoading" class="commonF FreeDetail" v-if="loading">
       <div class="w1200">
-          <div @click="BigImgShow" class="bannerImg" :style="{background:'url(' + ActiveSrc + ') no-repeat center left/100% auto'}">
+          <div @click.stop.prevent="BigImgShow(1)" class="bannerImg" :style="{background:'url(' + ActiveSrc + ') no-repeat center left/100% auto'}">
               <!-- <img style="width:100%;" :src="ActiveSrc" :onerror="defaultImg" alt=""> -->
               <ul  v-if="dataDetail.img_list" class="banImgList basefix">
-                  <li  @mouseover="LiHover(item,index)" :class="LiactiveIndex==index?'Liactive':''" v-if="index<6" v-for="(item,index) in dataDetail.img_list" :key="index">
+                  <li @click.stop.prevent="BigImgShow(2)"  @mouseover="LiHover(item,index)" :class="LiactiveIndex==index?'Liactive':''" v-if="index<6" v-for="(item,index) in dataDetail.img_list" :key="index">
                       <img :src="item.img_url" alt="">
                   </li>
               </ul>
@@ -210,19 +210,22 @@
           </div>
       </div>
       <!-- 放大 -->
-      <div @click="BigShow=false" class="BigImg" v-show="BigShow">
+      <!-- <div @click="BigShow=false" class="BigImg" v-show="BigShow">
           <div @click="BigShow=false" v-if="dataDetail.img_list" style="width:950px;position:relative">
               <span class="iconfont icon-close_icon" style="position:absolute;right:-50px;top:-50px;font-size:50px;color:#fff;z-index:20000"></span>
-              <!-- <img @click.stop.prevent="CloseImg(1)"  src="../../assets/img/free/cha.png" alt=""> -->
-              <el-carousel height="600px">
+              
+              <el-carousel height="500px">
                 <el-carousel-item v-for="(item,index) in dataDetail.img_list" :key="index">
                     <div style="width:100%;height:100%" :style="{background:'url(' + item.img_url + ') no-repeat center left/100% auto'}"></div>
-                    <!-- <img :src="item.img_url" alt=""> -->
+                  
                 </el-carousel-item>
             </el-carousel>
           </div>
             
-      </div>
+      </div> -->
+      <viewer style="display:none" :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
+            <img v-for="(item,index) in images" :src="item.img_url" :key="index+5000">
+        </viewer>
   </div>
 </template>
 <script>
@@ -234,6 +237,11 @@ export default {
     },
     data () {
         return {
+            images:[],
+            imageOptions:{
+                navbar:false,
+                title:false
+            },
             BigShow:false,
             detailLoading:true,
             rightNav:false,
@@ -293,9 +301,14 @@ export default {
         
     },
     methods: {
+        inited (viewer){
+            this.$viewer = viewer
+        },
+        BigImgShow(num){
+            if(num==1){
+                this.$viewer.show()
 
-        BigImgShow(){
-            this.BigShow=true;
+            }
         },
         handleScroll(){
             // console.log("this.scrollobj",this.scrollobj.scrollTop)
@@ -493,6 +506,7 @@ export default {
                         this.dataDetail.prod_comment_info.avg_scores=Number(this.dataDetail.prod_comment_info.avg_scores);
                     }
                     if(this.dataDetail.img_list.length>0){
+                        this.images=this.dataDetail.img_list;
                         this.ActiveSrc=this.dataDetail.img_list[0].img_url;
 
                     }

src/main.js

@@ -17,6 +17,9 @@ import moment from 'moment'
 import co from 'co'
 import MsgBus from './plugins/event-bus'
 import { location } from "./assets/utils/getLocation"
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+Vue.use(Viewer)
 // 使用Vue.use()方法就会调用工具方法中的install方法
 Vue.use(htmlToPdf)
 Vue.use(VueLazyload)