[update] 缴费凭证、注册

src/views/MessagePage/PaymentVoucher.vue

@@ -409,7 +409,9 @@ export default {
   }
 
   &-img {
-    width: calc(100% - 6rem);
+    max-width: calc(100% - 6rem);
+    max-height: 150px;
+    cursor: pointer;
   }
 }
 

src/views/MessagePage/modules/ProofInfoModal.vue

@@ -40,7 +40,7 @@
         <div class="info-item">
           <label>付款凭证：</label>
           <div class="proof-img">
-            <img :src="proofSrc(proofInfo.proof)">
+            <img :src="proofSrc(proofInfo.proof)" @click="previewProofImg(proofInfo.proof)">
           </div>
         </div>
       </div>
@@ -49,12 +49,18 @@
     <template slot="footer">
       <a-button @click="handleCancel">关闭</a-button>
     </template>
+
+    <!--    预览缴费凭证-->
+    <preview-img-modal ref="previewImg"></preview-img-modal>
   </j-modal>
 </template>
 
 <script>
+import PreviewImgModal from '@views/MessagePage/modules/PreviewImgModal'
+
 export default {
   name: 'ProofInfoModal',
+  components: { PreviewImgModal },
   props: {
     // 项目名称
     projectName: {
@@ -93,6 +99,16 @@ export default {
     proofSrc(imgId) {
       return `${ window._CONFIG['domianURL'] }/sys/common/download/${ imgId }`
     },
+    /**
+     * 预览缴费凭证
+     * @param imgId
+     */
+    previewProofImg(imgId) {
+      this.$refs.previewImg.title = '缴费凭证图片'
+      this.$refs.previewImg.imgId = imgId
+      this.$refs.previewImg.visible = true
+      console.log()
+    }
   }
 }
 </script>
@@ -136,6 +152,8 @@ h3.title::before {
 
     img {
       max-width: 100%;
+      max-height: 200px;
+      cursor: pointer;
     }
   }
 }