certificate-admin/ruoyi-ui/src/views/certInquire/member/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:-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+')'}" -->
            <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-cert">{{data.certId}}</span>
            <span class="foot-date">{{data.issueDate}}</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
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"
      }
    };
  },
  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;
        }
        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;
        }
        const form = {
          userName: this.userName,
          certNumber: this.certNumber,
        }
        const codeForm = {
          code: this.code,
          uuid: this.uuid
        }
        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
              })
              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(){
      // 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 lang="scss" scoped>

</style>