coys

src/components/imgCom/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
     <van-image :width="width" :height="height" :src="src" @click="onClickShow" />
-    <van-overlay :show="show" @click="onClickHide">
+    <van-image-preview v-model="show" :images="listImg" @change="onChange">
+      <template v-slot:index>第{{ index }}页</template>
+    </van-image-preview>
+    <!-- <van-overlay :show="show" @click="onClickHide">
       <div class="imgsty">
-
-          <van-image    :src="src" />
-        </div>
-      
-    </van-overlay>
+        
+        <van-image :src="src" />
+      </div>
+    </van-overlay> -->
   </div>
   <!-- <van-overlay :show="false">
     <view class="wrapper">
@@ -29,16 +31,34 @@ export default {
     src: {
       type: String,
       default: 'https://img.yzcdn.cn/vant/cat.jpeg'
+    },
+    imgList: {
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
   name: 'SocAppIndex',
 
   data() {
     return {
-      show: false
+      this_:this,
+      show: false,
+      this_window:window,
+      index:'',
+      
+    }
+  },
+  computed:{
+    listImg(){
+      this.imgList.filter(item=>{
+        if(item.url&&item.type==0){
+          return item.url
+        }
+      })
     }
   },
-
   mounted() {},
 
   methods: {
@@ -47,13 +67,16 @@ export default {
     },
     onClickHide() {
       this.show = false
+    },
+    onChange(index) {
+      this.index = index;
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.imgsty{
-    position:absolute;
-    top: 28%;
+.imgsty {
+  position: absolute;
+  top: 28%;
 }
 </style>

src/views/menu/training/components/personnelSignature.vue

@@ -36,7 +36,7 @@
       <template v-for="item in studyList">
         <div :key="item.url" class="imglIST" style="{width:'100px',height: '100px';}">
 
-          <imgCom :width="'100'" v-if="this_window.origin+item.url&&item.type==0"  :height="'100'" :src="this_window.origin+item.url"></imgCom>
+          <imgCom :width="'100'" :imgList="studyList" v-if="this_window.origin+item.url&&item.type==0"  :height="'100'" :src="this_window.origin+item.url"></imgCom>
           <!-- <VuePdf v-else :src="this_window.origin+item.url"></VuePdf> -->
           <VuePdf v-else  :src="this_window.origin+'/statics/2023/09/14/20230914210939A064.pdf'"></VuePdf>
         </div>