证书B部分的查询证书

ruoyi-ui/src/utils/htmlToPdf.js

@@ -0,0 +1,70 @@
+// 导出页面为PDF格式
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+export default {
+  install(Vue, options) {
+    Vue.prototype.getPdf = function () {
+      var title = this.htmlTitle // 导出名称
+      // var type = this.downType // 导出类型 true ->图片 false-> pdf
+      var htmlID = document.getElementById('pdfDom')
+      // window.pageYoffset = 0; // 如果有滚动条影响，会导致导出的内容不全，可以直接设置导出前置顶
+      // document.documentElement.scrollTop = 0;
+      // document.body.scrollTop = 0;
+      html2Canvas(htmlID, {
+        allowTaint: true,
+        // scrollY: 50, // 偏移量吧，如果有滚动条影响，但是不想设置滚动条置顶， 可以设置这个，但是要计算滚动了多少
+        // scrollX:0,
+        // x:0, // 距离左边距离
+        // y:10,
+        // width: 1000,
+        // height: 800
+        // 下面两个用来提高清晰度
+        // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
+        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
+        scale:4, //按比例增加分辨率
+        useCORS: true // 【重要】开启跨域配置
+      }).then(function (canvas) {
+        var contentWidth = canvas.width*2;
+        var contentHeight = canvas.height*2;
+        //一页pdf显示html页面生成的canvas高度;
+        var pageHeight = contentWidth / 592.28 * 841.89;
+        //未生成pdf的html页面高度
+        var leftHeight = contentHeight;
+        //页面偏移
+        var position = 0;
+        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+        var imgHeight = 590.28;
+        var imgWidth = 841.89 ;
+        // var imgHeight = 592.28/contentWidth * contentHeight;
+        var pageData = canvas.toDataURL('image/png', 1.0);
+        // console.log(pageData,1111)
+        // this.imgUrl = pageData
+        const el = document.createElement("a");
+        // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
+        el.href = pageData;
+        el.download = title;
+        // 创建一个点击事件并对 a 标签进行触发
+        const event = new MouseEvent("click");
+        el.dispatchEvent(event)
+        // var pdf = new JsPDF('landscape', 'pt', 'a4');
+        // //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+        // //当内容未超过pdf一页显示的范围，无需分页
+        // if (leftHeight < pageHeight) {
+        //     console.log(imgWidth, imgHeight,222)
+        //     pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+        // } else {    // 分页
+        //     while(leftHeight > 0) {
+        //         pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+        //         leftHeight -= pageHeight;
+        //         position -= 841.89;
+        //         //避免添加空白页
+        //         if(leftHeight > 0) {
+        //             pdf.addPage();
+        //         }
+        //     }
+        // }
+        //     pdf.save(title+'.pdf');
+        })
+    }
+  }
+}

ruoyi-ui/src/views/certInquire/member/index.vue

@@ -1,51 +1,130 @@
 <template>
     <div>
-      <div style="text-align: center;line-height: 50px;">
-          <span class="main-title" style="margin: 0 10px;font-weight: bold;" >会员、理事证书、聘书查询</span>
+      <div class="main-content">
+        <div class="img-box">
+            <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
+        </div>
+        <div style="text-align: center;line-height: 50px;">
+            <span class="main-title" style="margin: 0 10px;font-weight: bold;" >会员、理事证书、聘书查询</span>
+        </div>
+        <div>
+            <div class="label-box">
+                <div class="label-title">
+                    <p>持证人姓名</p>
+                    <p>（或持证单位全称）</p>
+                </div>
+                <input type="text" v-model="userName" class="label-input" />
+            </div>
+            <div class="label-box">
+                <div class="label-title">
+                    <p>证书编码</p>
+                </div>
+                <input type="text" v-model="certNumber" class="label-input" />
+            </div>
+            <div class="label-box">
+                <div class="label-title">
+                    <p>验证码<span class="label-must">*</span></p>
+                </div>
+                <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
+                <div class="captcha-img">
+                    <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+                </div>
+            </div>
+            <div class="btn-box">
+                <button class="btn-reset">重置</button>
+                <button class="btn-search" @click="handleSearch" v-bind:disabled="iconShow">
+                  查询<i class="el-icon-loading" v-show="iconShow"></i>
+                </button>
+            </div>
+        </div>
       </div>
-      <div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>持证人姓名</p>
-                  <p>（或持证单位全称）</p>
-              </div>
-              <input type="text" v-model="userName" class="label-input" />
+      <el-dialog
+        title="证书预览和下载"
+        :visible.sync="dialogVisible"
+        width="fit-content"
+        :before-close="handleClose"
+      >
+      <!-- :before-close="handleClose" -->
+        <div id="pdfDom" ref="posterWrap">
+          <div class="proBox" >
+            <!-- :style="{backgroundImage:'url('+data.imgurl+')'}" -->
+            <img class="proBox-img" :src="data.url" >
+            <!-- < <p class="tit">{{data.title}}</p> 
+            <p class="proid"><span>编号：</span> <span>xxjj2021412</span></p> -->
+            <div class="con" >
+              <span class="con-name">{{data.name}}</span>
+              <span>{{data.certContent}}</span>
+            </div>
+            <span class="foot-term" :style="{bottom:'+data.top+'+'px'}">{{data.validTerm}}</span>
+            <span class="foot-cert">{{data.certId}}</span>
+            <span class="foot-date">{{data.issueDate}}</span>
+            <!-- <p class="con">特发此证。</p>
+            <div class="con-unit">
+              <p>广东省教师继续教育学会</p>
+            </div>  -->
+            <!-- <div class="con-footer">
+              <p>广东省教师继续教育学会证书查询:</p>
+              <p>请关注学会微信公众号“粤师继教”(gqisjxjyxh)查询</p>
+            </div> -->
+            <!-- <div class="cert-msg">
+              <p>证书编号：{{data.d_code}}</p>
+              <p>发证时间：{{data.issue_date}}</p>
+            </div> -->
           </div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>证书编码</p>
-              </div>
-              <input type="text" v-model="certNumber" class="label-input" />
-          </div>
-          <div class="label-box">
-              <div class="label-title">
-                  <p>验证码<span class="label-must">*</span></p>
-              </div>
-              <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
-              <div class="captcha-img">
-                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-              </div>
-          </div>
-          <div class="btn-box">
-              <button class="btn-reset">重置</button>
-              <button class="btn-search" @click="handleSearch">查询</button>
-          </div>
-      </div>
+          <!-- <img :src="imgUrl" > -->
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <!-- <el-checkbox v-model="isShow" style="margin-right: 20px;">添加盖章</el-checkbox> -->
+          <el-button @click="handleClose">取 消</el-button>
+          <!-- <el-button type="primary" @click="makePoster">下载</el-button>   bnm,.//.,mnbvcx
+           -->
+          <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
+        </span>
+      </el-dialog>
     </div>
 </template>
-  
+
 <script>
-import { getCodeImg,checkCode } from "@/api/login";
+import { getCodeImg,checkCode} from "@/api/login";
 import { getCert } from "@/api/system/contract";
 export default {
   data() {
     return {
+      pic:require('@/assets/certback/appiontment_page-0001.jpg'),
       userName: "",
       certNumber: "",
       code: "",
       codeUrl:"",
       captchaEnabled:true,
       uuid:"",
+      dialogVisible: false,
+      iconShow:false,
+      dist:"cert_b_type",
+      pageData: null, //接收html格式代码
+      htmlTitle: "结业证书",
+      isShow: true,
+      isCanvas: false,
+      downType: false, // false为 pdf , true为图片
+      data:{
+        certContent: null,
+        certId: "221231hhh13",
+        certMajor: 1,
+        certType: 1,
+        code: "666666666666666",
+        createBy: null,
+        createTime: null,
+        email: "littlegreen55@163.com",
+        id: 4,
+        issueDate: "2022-11-28",
+        name: "张晓翠",
+        phone: "16329009990",
+        remark: null,
+        updateBy: null,
+        updateDate: null,
+        updateTime: null,
+        validTerm: "22222222"
+      },
+      majorData:[],
     };
   },
   methods:{
@@ -57,18 +136,23 @@ export default {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.uuid = res.uuid;
         }
+        this.iconShow = false
       });
     },
     async handleSearch(){
+       this.iconShow = true
         if( this.isBlock(this.userName)){
+          this.iconShow = false
           this.$message.error("请输入持证人姓名或单位名称！")
           return;
         }
         if( this.isBlock(this.certNumber)){
+          this.iconShow = false
           this.$message.error("请输入证书编码！")
           return;
         }
         if( this.isBlock(this.code)){
+          this.iconShow = false
           this.$message.error("请输入验证码！")
           return;
         }
@@ -80,13 +164,28 @@ export default {
           code: this.code,
           uuid: this.uuid
         }
-        let codeRes = await checkCode(codeForm)
-        if(codeRes.code===200 && codeRes.msg==="success"){
-          getCert(form).then(res=>{
-            console.log(res)
-          })
+        try{
+          let codeRes = await checkCode(codeForm)
+          if(codeRes.code===200){
+            try{
+              getCert(form).then(res=>{
+                this.iconShow = false
+                this.data = res.data
+                let img = this.realUrl(this.data.url)
+                this.htmlTitle = this.data.name
+                this.data.url = img
+                this.dialogVisible = true
+                // console.log(host)
+              })
+            }catch(error){
+              this.iconShow = false
+              this.getCode()
+            }
+          }
+        }catch(err){
+          this.iconShow = false
+          this.getCode()
         }
-        // console.log(codeRes)
     },
     isBlock(str){
       if(str===""){
@@ -94,15 +193,25 @@ export default {
       }else {
         return false
       }
+    },
+    handleClose(){
+      // console.log("beforeClose")
+      this.getCode()
+      this.dialogVisible = false
+    },
+    realUrl(val){
+      return process.env.VUE_APP_BASE_API + val
     }
   },
   mounted(){
     this.getCode()
-
+  },
+  destroyed(){
+    // removeToken()
   }
 };
 </script>
-  
-<style>
 
-</style>
+<style lang="scss" scoped>
+
+</style>