From a6a90dc1e2d13ecc41276c79ce1f19ce7ad845e5 Mon Sep 17 00:00:00 2001
From: wanglei <wl2666675>
Date: Wed, 9 Oct 2024 10:30:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dangan-ui/src/views/dangan/catalog/index.vue | 42 ++++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/dangan-ui/src/views/dangan/catalog/index.vue b/dangan-ui/src/views/dangan/catalog/index.vue
index 7a6826e..2536edc 100644
--- a/dangan-ui/src/views/dangan/catalog/index.vue
+++ b/dangan-ui/src/views/dangan/catalog/index.vue
@@ -223,14 +223,29 @@
       <div style="text-align: right; padding-right: 20px; font-size: 18px">共计： {{ lssc.total }}</div>
       <div>
         <el-image
-          v-for="item in lssc.list"
+          v-for="(item,index) in lssc.list"
           style="width: 100px; height: 100px;margin: 10px"
-          :src="item.picUrl"
-          :preview-src-list="lssc.previewList">
+          :src="item.picUrl" @click="onTu(index)">
         </el-image>
       </div>
     </el-dialog>
 
+    <el-dialog title="图片预览" :visible.sync="dtyl.open" fullscreen append-to-body>
+      <div style="text-align: right; padding-right: 50px; font-size: 18px">{{ (dtyl.index + 1) + '/' + lssc.list.length }}</div>
+      <div>
+        <el-carousel ref="carousel" indicator-position="none" arrow="always" :autoplay="false" :loop="false" height="85vh" :initial-index="dtyl.index" @change="carouselChange">
+          <el-carousel-item v-for="item in lssc.list" :key="item.id">
+            <el-image
+              style="height: 85vh;margin: 0 auto"
+              :src="item.picUrl"
+              :preview-src-list="[item.picUrl]"
+            >
+            </el-image>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -307,6 +322,11 @@ export default {
         list: [],
         previewList: [],
         total: 0
+      },
+      // 图片预览
+      dtyl:{
+        open: false,
+        index: 0
       }
     };
   },
@@ -533,6 +553,17 @@ export default {
         })
       });
     },
+    // 点击档案图片
+    onTu(index){
+      this.dtyl.open = true;
+      console.log('onTu',index);
+      this.dtyl.index = index
+      this.$refs.carousel.setActiveItem(this.dtyl.index);
+    },
+    carouselChange(i){
+      console.log('carouselChange',i);
+      this.dtyl.index = i
+    }
   }
 };
 </script>
@@ -579,4 +610,9 @@ export default {
       border-radius:10px
     }
   }
+
+
+  .el-carousel__item{
+    text-align: center;
+  }
 </style>