sr 4 سال پیش
والد
کامیت
35f3ac1fb8
3فایلهای تغییر یافته به همراه72 افزوده شده و 2 حذف شده
  1. 60 0
      ruoyi-ui/src/components/BigPicture/index.vue
  2. 8 2
      ruoyi-ui/src/components/ProjectDec/SignContract.vue
  3. 4 0
      ruoyi-ui/src/main.js

+ 60 - 0
ruoyi-ui/src/components/BigPicture/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div :class="{'hidden': !hidden.status}" @click="hidden.status=false" class="heibox">
+    <div class="imgs" @click.stop="">
+      <img :src="urls" alt="" class="img">
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    scrollTo
+  } from '@/utils/scroll-to'
+
+  export default {
+    name: 'BigPicture',
+    props: {
+      urls: {
+        default: '',
+        type: String
+      },
+      hidden: {
+        type: Object,
+        default: () => {
+          return {
+            status: ''
+          }
+        }
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .heibox {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.8);
+    position: fixed;
+    z-index: 99999;
+    top: 0;
+    left: 0;
+    .imgs{
+      width: 80%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      .img{
+        width: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+  .hidden {
+    display: none;
+  }
+</style>

+ 8 - 2
ruoyi-ui/src/components/ProjectDec/SignContract.vue

@@ -333,12 +333,12 @@
           <el-table-column label="身份证号码" align="center" prop="idcard" :show-overflow-tooltip="true" />
           <el-table-column label="身份证(正面)" align="center" prop="idcardFront">
             <template slot-scope="scope">
-              <img :src="scope.row.idcardFront" alt="" class="imgs" />
+              <img @click="imgBtn(scope.row.idcardFront)" :src="scope.row.idcardFront" alt="" class="imgs" />
             </template>
           </el-table-column>
           <el-table-column label="身份证(反面)" align="center" prop="idcardBack">
             <template slot-scope="scope">
-              <img :src="scope.row.idcardBack" alt="" class="imgs" />
+              <img @click="imgBtn(scope.row.idcardBack)" :src="scope.row.idcardBack" alt="" class="imgs" />
             </template>
           </el-table-column>
           <!-- <el-table-column label="操作" align="center" prop="remark" :show-overflow-tooltip="true" /> -->
@@ -456,6 +456,7 @@
         <el-button @click="open = false">取 消</el-button>
       </div>
     </el-dialog>
+    <BigPicture ref="BigPicture" :urls="pir_imgs"></BigPicture>
   </div>
 </template>
 
@@ -751,6 +752,7 @@
         idcardFrontFlie: [],
         idcardBackFlie: [],
         fileList: [],
+        pir_imgs: '',
       };
     },
     mounted() {
@@ -760,6 +762,10 @@
       this.getShareholderList();
     },
     methods: {
+      imgBtn(url) {
+        this.pir_imgs = url
+        this.$refs.BigPicture.hidden.status = true
+      },
       //审核
       applyBtn() {
         var that = this

+ 4 - 0
ruoyi-ui/src/main.js

@@ -25,7 +25,10 @@ import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
 
+import BigPicture from "@/components/BigPicture";
+
 // 全局方法挂载
+
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime
@@ -49,6 +52,7 @@ Vue.prototype.msgInfo = function (msg) {
 }
 
 // 全局组件挂载
+Vue.component('BigPicture', BigPicture)
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)