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

<template>
    <div>
      <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 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="`您以证书编号：${certNumber}为关键字查询验证证书结果如下：`"
        :visible.sync="dialogVisible"
        width="fit-content"
        :before-close="handleClose"
        class="dialog-box"
      >
        <!-- <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;">
              <img :src="data.headurl" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;" />
            </div>
            <div class="foot-p 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> -->
        <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="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 {
      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:{
        certId: "11111111",
        certName: "222",
        certType: 0,
        courseHours: "222",
        courseName: "222",
        createBy: null,
        createTime: null,
        id: 3,
        issueDate: "2022-11-29",
        level: "22",
        picture: "/profile/2022/222_A00.jpg",
        remark: null,
        trainPeriod: "222",
        uesrName: null,
        updateBy: null,
        updateDate: "2022-12-13T15:29:56.000+08:00",
        updateTime: null,
        url: "/profile/upload/2022/12/13/pro1_page-0001_20221213151348A006.jpg",
        userEmail:"222222",
        userId: "2222",
        userPhone: "222"
      },
      imgUrl:'',
      errorDialog:false,
      word:''
    };
  },
  methods:{
    getCode() {
      getCodeImg().then(res => {
        // console.log(res)
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.uuid = res.uuid;
        }
      });
    },
    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;
        }
        const form = {
          userName: this.userName,
          certNumber: this.certNumber,
          certType:0
        }
        const codeForm = {
          code: this.code,
          uuid: this.uuid
        }
        try{
          let codeRes = await checkCode(codeForm)
          // console.log(codeRes)
          if(codeRes.code===200){
            try{
              getACert(form).then(res=>{
                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){
                  this.iconShow = false
                }
              },10000)
            }catch(error){
              this.iconShow = false
              this.getCode()
            }
          }
        }catch(err){
          this.iconShow = false
          this.getCode()
        }
    },
    isBlock(str){
      if(str===""){
        return true
      }else {
        return false
      }
    },
    handleClose(){
      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()
  }
};
</script>

<style lang="scss" scoped>

</style>