三个查询页面：修改提示

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

@@ -38,45 +38,49 @@
             </div>
         </div>
       </div>
-      <!-- <div style="position:fixed;top:-900px;left:-500px">
-        <div id="pdfDomm" ref="posterWrap" >
-        <div class="proBox" >
-          <img class="proBox-img" :src="data.url" >
-          <div class="con" >
-            <span class="con-name heiti">{{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>
-          </div>
-        </div>
-        <el-button type="primary" @click="getPdf('#pdfDomm')" ref="download">下载</el-button>
-      </div> -->
-      
-      <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+')'}" -->
+      <div style="position:fixed;top:-1200px;left:-1800px">
+        <div id="pdfDomm" ref="posterWrap">
+          <!-- <div class="proBox" >
             <img class="proBox-img" :src="data.url" >
             <div class="con" >
               <span class="con-name heiti">{{data.name}}</span>
               <span>{{data.certContent}}</span>
             </div>
-            <span class="foot-term">{{data.validTerm}}</span>
+            <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>
-          </div>
+          </div> -->
         </div>
+      </div>
+      
+      <el-dialog
+        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+        :visible.sync="dialogVisible"
+        width="fit-content"
+        :before-close="handleClose"
+        class="dialog-box"
+      >
+        <p >经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
+        <img :src="imgUrl" width="750px" height="525px" ref="certimg"/>
+        <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;">提示：伪造证书系违法行为，请勿尝试。</p>
         <span slot="footer" class="dialog-footer">
           <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
+          <el-button type="primary" @click="downloadImg">下载</el-button>
+          <!-- getPdf('#pdfDom') -->
+        </span>
+      </el-dialog>
+      <el-dialog
+        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+        :visible.sync="errorDialog"
+        width="50%"
+        class="errordialog-box"
+        :before-close="handleErrorClose"
+        >
+        <!-- :before-close="handleClose" -->
+        <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
+        <p>如有疑问，请通知持证人与我会联系。</p>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="handleErrorClose" style="width:100px">确 定</el-button>
         </span>
       </el-dialog>
     </div>
@@ -84,7 +88,8 @@
 
 <script>
 import { getCodeImg,checkCode} from "@/api/login";
-import { getCert } from "@/api/system/contract";
+import { getCert } from "@/api/system/contract"
+import html2Canvas from 'html2canvas'
 export default {
   data() {
     return {
@@ -121,7 +126,10 @@ export default {
         updateDate: null,
         updateTime: null,
         validTerm: "22222222"
-      }
+      },
+      imgUrl:'',
+      errorDialog:false,
+      word:''
     };
   },
   methods:{
@@ -166,12 +174,25 @@ export default {
           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
+                if(res.data){
+                  this.iconShow = false
+                  this.data = res.data
+                  let img = this.realUrl(this.data.url)
+                  this.htmlTitle = this.data.name
+                  this.data.url = img
+                  // 创建html代码
+                  this.makeHtml()
+                  this.$nextTick(()=>{
+                    // 将html代码=>canvas=>img
+                    this.toImg()
+                    this.dialogVisible = true
+                    // 然后删除掉用完的html代码
+                    let e = document.getElementById('pdfDomm')
+                    e.innerHTML = ""
+                  })
+                }else{
+                  this.errorDialog = true
+                }
               })
               setTimeout(()=>{
                 if(this.iconShow){
@@ -196,23 +217,82 @@ export default {
       }
     },
     handleClose(){
-      // console.log("beforeClose")
+      this.iconShow = false
       this.getCode()
       this.dialogVisible = false
     },
+    handleErrorClose(){
+      this.iconShow = false
+      this.getCode()
+      this.errorDialog = false
+    },
     realUrl(val){
       return process.env.VUE_APP_BASE_API + val
+    },
+    toImg(){
+      // 将html代码=>canvas=>img
+      var htmlID = document.getElementById('pdfDomm')
+      const that = this
+      html2Canvas(htmlID, {
+        allowTaint: true,
+        // 下面两个用来提高清晰度
+        // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
+        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
+        scale:4, //按比例增加分辨率
+        useCORS: true // 【重要】开启跨域配置
+      }).then(function (canvas) {
+        var pageData = canvas.toDataURL('image/png', 1.0);
+        that.imgUrl = pageData
+      })
+    },
+    downloadImg(){
+      const el = document.createElement("a");
+      // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
+      el.href = this.$refs.certimg.src;
+      el.download = this.htmlTitle;
+      // 创建一个点击事件并对 a 标签进行触发
+      const event = new MouseEvent("click");
+      el.dispatchEvent(event)
+    },
+    makeHtml(){
+      // js写html代码
+      let e = document.getElementById('pdfDomm')
+      this.word =  `<div class="proBox" >
+        <img class="proBox-img" src="${window.location.origin}${this.data.url}" >
+        <div class="con" >
+          <span class="con-name heiti">${this.data.name}</span>
+          <span>${this.data.certContent}</span>
+        </div>
+        <span class="foot-term" >${this.data.validTerm}</span>
+        <span class="foot-cert">${this.data.certId}</span>
+        <span class="foot-date">${this.data.issueDate}</span>
+      </div>`
+      e.innerHTML = this.word
     }
   },
   mounted(){
     this.getCode()
-  },
-  destroyed(){
-    // removeToken()
   }
 };
 </script>
 
 <style lang="scss" scoped>
-
+.dialog-box{
+  p{
+    width: 725px;
+    margin: auto;
+    text-align: left;
+    color: black;
+    font-size: 18px;
+    text-indent: 2em;
+  }
+}
+.errordialog-box{
+  p{
+    text-align: left;
+    color: black;
+    font-size: 18px;
+    text-indent: 2em;
+  }
+}
 </style>

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

@@ -38,13 +38,36 @@
           </div>
         </div>
       </div>
+      <div style="position:fixed;top:-1200px;left:-1800px">
+        <div id="pdfDomm" ref="posterWrap">
+          <div class="proBox" >
+            <img class="proBox-img z01" :src="data.backurl" />
+            <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 133px;left: 182px;">
+              <img id="pdfhead" :src="data.headurl" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;" />
+            </div>
+            <div class="foot-pp z10">
+              <p class="foot-p-name " >{{data.uesrName}}</p>
+              <p class="foot-p-ID ">{{data.userId}}</p>
+              <p class="foot-p-cert ">{{data.certId}}</p>
+              <p class="foot-p-date ">{{data.issueDate}}</p>
+            </div>
+            <div class="content z10" style="position: absolute;left: 450px;width: 230px;top: 85px;font-size: 19px;line-height: 30px;text-indent: 2em;">
+              <p style="margin:0">
+                持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">{{data.certName}}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 20px;">{{data.courseHours}}</span>学时。
+              </p>
+              <p style="margin:0">考核合格，准予结业，特发此证。</p>
+            </div>
+          </div>
+        </div>
+      </div>
       <el-dialog
-        title="证书预览和下载"
+      :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
         :visible.sync="dialogVisible"
         width="fit-content"
         :before-close="handleClose"
+        class="dialog-box"
       >
-        <div id="pdfDom" ref="posterWrap">
+        <!-- <div id="pdfDom" ref="posterWrap">
           <div class="proBox" >
             <img class="proBox-img z01" :src="data.backurl" />
             <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 133px;left: 182px;">
@@ -63,19 +86,37 @@
               <p style="margin:0">考核合格，准予结业，特发此证。</p>
             </div>
           </div>
-        </div>
+        </div> -->
+        <p >经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
+        <img :src="imgUrl" width="750px" height="525px" ref="certimg"/>
+        <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;">提示：伪造证书系违法行为，请勿尝试。</p>
         <span slot="footer" class="dialog-footer">
           <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
+          <el-button type="primary" @click="downloadImg">下载</el-button>
+          <!-- getPdf('#pdfDom') -->
+        </span>
+      </el-dialog>
+      <el-dialog
+        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+        :visible.sync="errorDialog"
+        width="50%"
+        class="errordialog-box"
+        :before-close="handleErrorClose"
+        >
+        <!-- :before-close="handleClose" -->
+        <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
+        <p>如有疑问，请通知持证人与我会联系。</p>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="handleErrorClose" style="width:100px">确 定</el-button>
         </span>
       </el-dialog>
     </div>
-
 </template>
 
 <script>
-import { getCodeImg,checkCode} from "@/api/login";
-import { getACert } from "@/api/system/grad";
+import { getCodeImg,checkCode} from "@/api/login"
+import { getACert } from "@/api/system/grad"
+import html2Canvas from 'html2canvas'
 export default {
   data() {
     return {
@@ -115,7 +156,10 @@ export default {
         userEmail:"222222",
         userId: "2222",
         userPhone: "222"
-      }
+      },
+      imgUrl:'',
+      errorDialog:false,
+      word:''
     };
   },
   methods:{
@@ -129,15 +173,6 @@ export default {
         }
       });
     },
-    // handleSearch(){
-    //     const form = {
-    //         userName: this.userName,
-    //         certNumber: this.certNumber,
-    //         code: this.code,
-    //         uuid: this.uuid
-    //     }
-    //     console.log(form)
-    // }
     async handleSearch(){
        this.iconShow = true
         if( this.isBlock(this.userName)){
@@ -158,6 +193,7 @@ export default {
         const form = {
           userName: this.userName,
           certNumber: this.certNumber,
+          certType:0
         }
         const codeForm = {
           code: this.code,
@@ -165,19 +201,33 @@ export default {
         }
         try{
           let codeRes = await checkCode(codeForm)
-          console.log(codeRes)
+          // console.log(codeRes)
           if(codeRes.code===200){
             try{
               getACert(form).then(res=>{
-                this.iconShow = false
-                this.data = res.data
-                console.log(this.data)
-                let backimg = this.realUrl(this.data.url)
-                let headimg = this.realUrl(this.data.picture)
-                this.htmlTitle = this.data.uesrName
-                this.data.backurl = backimg
-                this.data.headurl = headimg
-                this.dialogVisible = true
+                if(res.data){
+                  this.iconShow = false
+                  this.data = res.data
+                  // console.log(this.data)
+                  let backimg = this.realUrl(this.data.url)
+                  let headimg = this.realUrl(this.data.picture)
+                  this.htmlTitle = this.data.uesrName
+                  this.data.backurl = backimg
+                  this.data.headurl = headimg
+                  // 创建html代码
+                  // this.makeHtml()
+                  this.$nextTick(()=>{
+                    // 将html代码=>canvas=>img
+                    this.toImg()
+                    this.dialogVisible = true
+                    // 然后删除掉用完的html代码
+                    let e = document.getElementById('pdfDomm')
+
+                    e.innerHTML = ""
+                  })
+                }else{
+                  this.errorDialog = true
+                }
               })
               setTimeout(()=>{
                 if(this.iconShow){
@@ -202,14 +252,66 @@ export default {
       }
     },
     handleClose(){
-      // console.log("beforeClose")
+      this.iconShow = false
       this.getCode()
       this.dialogVisible = false
     },
+    handleErrorClose(){
+      this.iconShow = false
+      this.getCode()
+      this.errorDialog = false
+    },
     realUrl(val){
       return process.env.VUE_APP_BASE_API + val
+    },
+    toImg(){
+      // 将html代码=>canvas=>img
+      var htmlID = document.getElementById('pdfDomm')
+      const that = this
+      html2Canvas(htmlID, {
+        allowTaint: true,
+        // 下面两个用来提高清晰度
+        // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
+        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
+        scale:4, //按比例增加分辨率
+        useCORS: true // 【重要】开启跨域配置
+      }).then(function (canvas) {
+        var pageData = canvas.toDataURL('image/png', 1.0);
+        that.imgUrl = pageData
+      })
+    },
+    downloadImg(){
+      const el = document.createElement("a");
+      // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
+      el.href = this.$refs.certimg.src;
+      el.download = this.htmlTitle;
+      // 创建一个点击事件并对 a 标签进行触发
+      const event = new MouseEvent("click");
+      el.dispatchEvent(event)
+    },
+    makeHtml(){
+      // js写html代码
+      let e = document.getElementById('pdfDomm')
+      this.word = `<div class="proBox" >
+            <img class="proBox-img z01" src="${window.location.origin}${this.data.backurl}" />
+            <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 133px;left: 182px;">
+              <img src="${window.location.origin}${this.data.headurl}" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;" />
+            </div>
+            <div class="foot-pp z10">
+              <p class="foot-p-name ">${this.data.uesrName}</p>
+              <p class="foot-p-ID ">${this.data.userId}</p>
+              <p class="foot-p-cert ">${this.data.certId}</p>
+              <p class="foot-p-date ">${this.data.issueDate}</p>
+            </div>
+            <div class="content z10" style="position: absolute;left: 450px;width: 230px;top: 85px;font-size: 19px;line-height: 30px;text-indent: 2em;">
+              <p style="margin:0">
+                持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">${this.data.certName}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 20px;">${this.data.courseHours}</span>学时。
+              </p>
+              <p style="margin:0">考核合格，准予结业，特发此证。</p>
+            </div>
+          </div>`
+      e.innerHTML = this.word
     }
-
   },
   mounted(){
     this.getCode()
@@ -218,14 +320,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.foot-p{
-  position: absolute;
-  top: 270px;
-  left: 160px;
-  text-align: center;
-  line-height: 42px;
-  p{
-    margin: 0;
-  }
-}
+
 </style>

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

@@ -38,13 +38,18 @@
           </div>
       </div>
     </div>
+    <div style="position:fixed;top:-1200px;left:-1800px">
+        <div id="pdfDomm" ref="posterWrap">
+        </div>
+      </div>
     <el-dialog
-        title="证书预览和下载"
+        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+        :before-close="handleClose"
         :visible.sync="dialogVisible"
         width="fit-content"
-        :before-close="handleClose"
+        class="dialog-box"
       >
-        <div id="pdfDom" ref="posterWrap">
+        <!-- <div id="pdfDom" ref="posterWrap">
           <div class="proBox" >
             <img class="proBox-img" :src="data.backurl" >
             <div class="con train-con" >
@@ -56,18 +61,37 @@
             <span class="foot-cert train-foot-cert">{{data.certId}}</span>
             <span class="foot-date train-foot-date">{{data.issueDate}}</span>
           </div>
-        </div>
+        </div> -->
+        <p >经证书系统验证查询，证书信息正确，该证书预览如下，如需下载使用，请点击“下载”按钮。</p>
+        <img :src="imgUrl" width="750px" height="525px" ref="certimg"/>
+        <p style="font-weight:bold;color: red;font-size: 20px;text-indent: 0;">提示：伪造证书系违法行为，请勿尝试。</p>
         <span slot="footer" class="dialog-footer">
           <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
+          <el-button type="primary" @click="downloadImg">下载</el-button>
+          <!-- getPdf('#pdfDom') -->
         </span>
     </el-dialog>
+    <el-dialog
+        :title="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
+        :visible.sync="errorDialog"
+        width="50%"
+        class="errordialog-box"
+        :before-close="handleErrorClose"
+        >
+        <!-- :before-close="handleClose" -->
+        <p>未能查询到该证书，原因可能是证书编号或姓名（单位名称）输入错误， 也可能该证书为伪造证书。请重新输入准确的 证书编号 与 姓名（单位名称）信息后，再查询。谢谢您的关注。</p>
+        <p>如有疑问，请通知持证人与我会联系。</p>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="handleErrorClose" style="width:100px">确 定</el-button>
+        </span>
+      </el-dialog>
   </div>
 </template>
 
 <script>
 import { getCodeImg,checkCode} from "@/api/login";
 import { getACert } from "@/api/system/grad";
+import html2Canvas from 'html2canvas'
 export default {
   data() {
     return {
@@ -107,7 +131,10 @@ export default {
         userEmail:"222222",
         userId: "2222",
         userPhone: "222"
-      }
+      },
+      imgUrl:'',
+      errorDialog:false,
+      word:''
     };
   },
   methods:{
@@ -121,15 +148,6 @@ export default {
         }
       });
     },
-    // handleSearch(){
-    //     const form = {
-    //         userName: this.userName,
-    //         certNumber: this.certNumber,
-    //         code: this.code,
-    //         uuid: this.uuid
-    //     }
-    //     console.log(form)
-    // }
     async handleSearch(){
        this.iconShow = true
         if( this.isBlock(this.userName)){
@@ -150,6 +168,7 @@ export default {
         const form = {
           userName: this.userName,
           certNumber: this.certNumber,
+          certType:1
         }
         const codeForm = {
           code: this.code,
@@ -157,18 +176,31 @@ export default {
         }
         try{
           let codeRes = await checkCode(codeForm)
-          console.log(codeRes)
+          // console.log(codeRes)
           if(codeRes.code===200){
             try{
               getACert(form).then(res=>{
-                this.iconShow = false
-                this.data = res.data
-                console.log(this.data)
-                let backimg = this.realUrl(this.data.url)
-                this.htmlTitle = this.data.uesrName
-                this.data.backurl = backimg
-                // this.data.headurl = headimg
-                this.dialogVisible = true
+                if(res.data){
+                  this.iconShow = false
+                  this.data = res.data
+                  // console.log(this.data)
+                  let backimg = this.realUrl(this.data.url)
+                  this.htmlTitle = this.data.uesrName
+                  this.data.backurl = backimg
+                  // 创建html代码
+                  this.makeHtml()
+                  this.$nextTick(()=>{
+                    // 将html代码=>canvas=>img
+                    this.toImg()
+                    this.dialogVisible = true
+                    // 然后删除掉用完的html代码
+                    let e = document.getElementById('pdfDomm')
+                    e.innerHTML = ""
+                  })
+                }else{
+                  this.errorDialog = true
+                }
+                
               })
               setTimeout(()=>{
                 if(this.iconShow){
@@ -193,12 +225,58 @@ export default {
       }
     },
     handleClose(){
-      // console.log("beforeClose")
+      this.iconShow = false
       this.getCode()
       this.dialogVisible = false
     },
+    handleErrorClose(){
+      this.iconShow = false
+      this.getCode()
+      this.errorDialog = false
+    },
     realUrl(val){
       return process.env.VUE_APP_BASE_API + val
+    },
+    toImg(){
+      // 将html代码=>canvas=>img
+      var htmlID = document.getElementById('pdfDomm')
+      const that = this
+      html2Canvas(htmlID, {
+        allowTaint: true,
+        // 下面两个用来提高清晰度
+        // dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
+        dpi: 300, //将分辨率提高到特定的DPI 提高四倍
+        scale:4, //按比例增加分辨率
+        useCORS: true // 【重要】开启跨域配置
+      }).then(function (canvas) {
+        var pageData = canvas.toDataURL('image/png', 1.0);
+        that.imgUrl = pageData
+      })
+    },
+    downloadImg(){
+      const el = document.createElement("a");
+      // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
+      el.href = this.$refs.certimg.src;
+      el.download = this.htmlTitle;
+      // 创建一个点击事件并对 a 标签进行触发
+      const event = new MouseEvent("click");
+      el.dispatchEvent(event)
+    },
+    makeHtml(){
+      // js写html代码
+      let e = document.getElementById('pdfDomm')
+      this.word = `<div class="proBox" >
+          <img class="proBox-img" src="${window.location.origin}${this.data.backurl}" >
+          <div class="con train-con" >
+            <p>
+              <span class="con-name heiti">${this.data.uesrName}</span>于<span class="train-span heiti">${this.data.trainPeriod}</span>
+              参加了<span class="train-span heiti">${this.data.certName}</span>学习，已修完教学计划规定的全部课程，计<span class="train-span heiti">${this.data.courseHours}</span>学时，经考核成绩合格，准予结业。
+            </p>
+          </div>
+          <span class="foot-cert train-foot-cert">${this.data.certId}</span>
+          <span class="foot-date train-foot-date">${this.data.issueDate}</span>
+      </div>`
+      e.innerHTML = this.word
     }
 
   },