style:证书证明预览

@@ -165,7 +165,7 @@
     padding: 20px;
     width: 100%;
     min-height: 30%;
-    max-height: 90vh;
+    max-height: 92vh;
     // overflow-y: scroll;
     box-sizing: border-box;
   }

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-11-15 15:34:21
+ * @LastEditTime: 2023-12-19 08:54:37
 -->
 <template>
-  <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
+  <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="text-align: center;">
     <!-- 表单部分 -->
     <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1" style="margin-top:-23px">
       <el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz"
         v-for="(item, index) in headTabBdcqz" :key="index">
       </el-tab-pane>
     </el-tabs>
+    <el-tabs v-model="activeTitle" style="margin-top:-20px">
+      <el-tab-pane label="第一页" name="title1"></el-tab-pane>
+      <el-tab-pane label="第二页" name="title2"></el-tab-pane>
+    </el-tabs>
     <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
-    <div :style="{'width':'1180px','height': `calc(100% - ${hdiffHeight}px)`,'overflow-y': 'auto'}">
-      <canvas ref="zs" width="1000" v-show="this.bdcqz.bdcqzlx==1" height="700"></canvas>
+    <div :style="{'width':'1180px','overflow-y': 'auto'}">
+      <canvas ref="zs1" width="1000" v-show="this.bdcqz.bdcqzlx==1 && activeTitle=='title1'" height="700"></canvas>
+      <canvas ref="zs" width="1000" v-show="this.bdcqz.bdcqzlx==1 && activeTitle=='title2'" height="700"></canvas>
       <canvas ref="zm" width="1180" v-show="this.bdcqz.bdcqzlx==2" height="780"></canvas>
     </div>
   </div>
 </template>
 
 <script>
+  import QRCode from 'qrcode'
   import { datas } from "../../javascript/zsyl.js";
   import { getSlsqBdcqzList } from "@/api/bdcqz.js"
   export default {
@@ -32,8 +38,10 @@
     },
     data () {
       return {
+        activeTitle: 'title1',
         key: 0,
         noData: false,
+        imgSrc1: require('@/image/bdcqz/bdcqzs1.jpg'),
         imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
         bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
         loading: false,
@@ -124,7 +132,42 @@
        * @description: 不动产证书
        * @author: renchao
        */
+      drawTextOnImage1 () {
+        const canvas = this.$refs.zs1;
+        const context = canvas.getContext('2d');
+        const image = new Image();
+        image.onload = () => {
+          context.drawImage(image, 0, 0);
+          context.font = '18px 楷体';
+          context.fillStyle = '#000000';
+          let date = this.bdcqz.djsj.split(' ')[0].split('/');
+          let nian = date[0]
+          let yue = date[1]
+          let ri = date[2]
+          this.bdcqz.nian = nian
+          this.bdcqz.yue = yue
+          this.bdcqz.ri = ri
+          context.fillText(nian ? nian : '', 780, 499);
+          context.fillText(yue ? yue : '', 840, 499);
+          context.fillText(ri ? ri : '', 885, 499);
+          QRCode.toDataURL(this.bdcqz.bdcqzh, { margin: 0 })
+            .then(url => {
+              const qrImage = new Image();
+              this.bdcqz.qrImage = url; // 将二维码图片的 URL 存储到 bdcqz 对象的 qrImage 属性中
+              qrImage.onload = () => {
+                context.drawImage(qrImage, 670, 400, 100, 100);
+              };
+              qrImage.src = url;
+            })
+            .catch(error => {
+              console.error(error);
+            });
+          context.fillText(this.bdcqz.bdcqzbm ? this.bdcqz.bdcqzbm : '', 745, 633);
+        };
+        image.src = this.imgSrc1;
+      },
       drawTextOnImage () {
+        this.drawTextOnImage1()
         function getByteLen (val) {
           var len = 0;
           if (!val) return len;
@@ -516,17 +559,20 @@
 
         image.src = this.bdczmSrc;
       }
-    },
-    computed: {
-      hdiffHeight () {
-        return this.headTabBdcqz.length > 1 ? 54 : 0
-      }
     }
   }
 </script>
 <style scoped lang="scss">
   @import "~@/styles/mixin.scss";
-
+  /deep/.el-tabs__nav-wrap::after {
+    display: none;
+  }
+  /deep/.el-tabs__header {
+    margin: 0;
+  }
+  /deep/.el-form-item--small.el-form-item {
+    margin-bottom: 0;
+  }
   .imgClass {
     display: inline-block;
     height: auto;