<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<style>
|
.fo {
|
width: 100%;
|
height: 800px;
|
position: absolute;
|
/* display: flex; */
|
align-items: center;
|
justify-content: center;
|
}
|
|
.print {
|
position: relative;
|
left: 45%;
|
margin-top: 30px;
|
width: 7%;
|
height: 36px;
|
border-radius: 9px;
|
background-color: #409EFF;
|
border: 0px;
|
color: #fff;
|
letter-spacing: 4px;
|
}
|
|
#table {
|
margin-left: 26%;
|
color: #000;
|
position: fixed;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
width: 750px;
|
height: 550px;
|
border-radius: 7px;
|
margin-top: -550px;
|
background: url(./img/bazbj.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
|
#table1 {
|
margin-left: 26%;
|
color: #000;
|
width: 750px;
|
height: 550px;
|
background-color: #fff;
|
border-radius: 7px;
|
margin-top: 100px;
|
}
|
|
.user-info-table {
|
margin-top: 30px;
|
width: 90%;
|
height: 90%;
|
border: 1px solid #000;
|
background-color: #fff;
|
}
|
|
.table-top {
|
width: 100%;
|
height: 16%;
|
margin-top: 30px;
|
text-align: center;
|
font-size: 4rem;
|
letter-spacing: 15px;
|
}
|
|
.table-center {
|
font-size: 2rem;
|
width: 100%;
|
height: 60%;
|
font-weight: 200;
|
}
|
|
.img-title {
|
width: 100%;
|
font-size: 14px;
|
}
|
|
.table-center-right {
|
width: 152px;
|
height: 205px;
|
line-height: 205px;
|
margin-left: 510px;
|
margin-top: -350px;
|
border-radius: 10px;
|
/* border: 1px solid; */
|
text-align: center;
|
}
|
|
.table-center-right img {
|
width: 100%;
|
height: 100%;
|
display: inline-block;
|
vertical-align: middle;
|
border-radius: 10px;
|
}
|
|
.security-info {
|
margin-left: 5rem;
|
margin-top: 1.8rem;
|
}
|
|
.table-down {
|
font-size: 14px;
|
width: 100%;
|
margin-top: -40px;
|
}
|
|
.paper-unit {
|
margin-left: 20px;
|
float: left;
|
}
|
|
.paper-date {
|
margin-left: 215px;
|
}
|
|
.user-info-tr {
|
height: 50px;
|
font-size: 14px;
|
}
|
|
.avatar {
|
width: 140px;
|
height: 190px;
|
}
|
|
.title {
|
margin-top: 20px;
|
font-size: 28px;
|
font-weight: 500;
|
}
|
|
.avatar {
|
width: 140px;
|
height: 190px;
|
}
|
|
.my-picture {
|
width: 150px;
|
/* height: 200px; */
|
}
|
|
.avatar {
|
width: 100%;
|
}
|
|
.qrCode {
|
margin-top: 0px;
|
margin-left: 25px;
|
}
|
</style>
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
</head>
|
|
|
<body>
|
<div class="fo">
|
|
|
<!--startprint-->
|
<div id="print">
|
<!-- <div id="table1"></div>
|
<div id="table">
|
<div class="table-top">
|
<span>保安员证</span>
|
</div>
|
<div class="table-center">
|
<div class="table-center-left">
|
<div class="security-info">
|
<span>姓名:</span>
|
<span>张易得</span>
|
</div>
|
<div class="security-info">
|
<span>性别:</span>
|
<span>男</span>
|
</div>
|
<div class="security-info">
|
<span>编号:</span>
|
<span>赣洪202100001</span>
|
</div>
|
</div>
|
<div class="table-center-right">
|
<img src="./img/security.png">
|
</div>
|
</div>
|
<div class="table-down">
|
<div class="paper-unit">
|
<span>发证机关:</span>
|
<span>南昌市公安局</span>
|
</div>
|
<div class="paper-date">
|
<span>发证日期:</span>
|
<span>2021年8月1日</span>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
<!--endprint-->
|
|
</div>
|
<div>
|
<button onclick="preview(1)" class="print">打印</button>
|
</div>
|
</div>
|
<script>
|
var getData = function (name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return unescape(r[2]);
|
return null;
|
};
|
var id = JSON.parse(getData("data")).userId;
|
var name = JSON.parse(getData("data")).name;
|
console.log(getData("data"), 123);
|
var securityName = JSON.parse(getData("data")).securityName;
|
// console.log(JSON.parse(getData("data")), 111);
|
|
axios.get('http://61.131.136.25:2080/api/apply/userDetail?id=' + id).then(function (res) {
|
|
var data = res.data.data;
|
var img = data.avatar ? `<div class="avatar"><img src="${data.avatar}"></div>` : `<div class="img-title">暂无照片</div>`
|
axios.get('http://61.131.136.25:2080/api/qrCode/getQrCodeBase64?securityNumber=' + data.securitynumber).then(function (res1) {
|
console.log(res1.data, 333);
|
var qrCode = res1.data ? `<div class="qrCode"><img src="${res1.data}"></div>` : `<div"></div>`
|
var str = `<div id="table1"></div>
|
<div id="table">
|
<div class="table-top">
|
<span>保安员证</span>
|
</div>
|
<div class="table-center">
|
<div class="table-center-left">
|
<div class="security-info">
|
<span>姓名:</span>
|
<span> ${data.realName}</span>
|
</div>
|
<div class="security-info">
|
<span>性别:</span>
|
<span> ${data.sex == 1 ? "男" : (data.sex == 2 ? "女" : "")}</span>
|
</div>
|
<div class="security-info">
|
<span>编号:</span>
|
<span> ${data.securitynumber}</span>
|
</div>
|
<div class="security-info">
|
<span>发证机关:</span>
|
<span> 南昌市公安局</span>
|
</div>
|
<div class="security-info">
|
<span>发证日期:</span>
|
<span> ${data.paperTime}</span>
|
</div>
|
</div>
|
<div class="table-center-right">
|
${img}
|
${qrCode}
|
</div>
|
</div>
|
</div>
|
</div>`
|
// <img src="${data.avatar}">
|
var dom = $('#print');
|
dom.empty();
|
dom.append(str);
|
})
|
|
})
|
|
function preview(oper) {
|
if (oper < 10) {
|
bdhtml = window.document.body.innerHTML;
|
// 打印开始的标志
|
sprnstr = "<!--startprint-->";
|
// 打印结束的标志
|
eprnstr = "<!--endprint-->";
|
// 从打印开始的位置截取到末尾
|
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr));
|
// 从开始截取到打印结束的位置
|
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
|
// 替换html
|
window.document.body.innerHTML = prnhtml;
|
// 打印
|
window.print();
|
window.document.body.innerHTML = bdhtml;
|
} else {
|
window.print();
|
}
|
}
|
</script>
|
</body>
|
|
</html>
|
|
</html>
|
