|
|
@@ -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>
|
