|
@@ -22,7 +22,7 @@
|
|
|
.content-box {
|
|
|
border-radius: 5px;
|
|
|
width: 260px;
|
|
|
- height: 300px;
|
|
|
+ height: 330px;
|
|
|
background-color: #FFF;
|
|
|
border: 1px solid #ebebeb;
|
|
|
position: absolute;
|
|
@@ -38,7 +38,7 @@
|
|
|
|
|
|
.qrcodeBox {
|
|
|
width: 220px;
|
|
|
- height: 220px;
|
|
|
+ height: 260px;
|
|
|
}
|
|
|
|
|
|
.qrcodeBox-colse {
|
|
@@ -146,7 +146,7 @@
|
|
|
<td>
|
|
|
<a href="${ctx}/zplm/cmBrandAuthProduct/form?id=${product.id}&authId=${cmBrandAuthProduct.authId}">编辑</a>
|
|
|
<a href="${ctx}/zplm/cmBrandAuthProduct/delete?id=${product.id}&authId=${cmBrandAuthProduct.authId}" onclick="return confirmx('确认要删除该品牌授权商品吗?', this.href)">删除</a>
|
|
|
- <a href="javascript:;" onclick="show('${product.id}','${fns:getConfig('wwwServer')}')">二维码</a>
|
|
|
+ <a href="javascript:;" onclick="show('${product.id}','${fns:getConfig('wwwServer')}','${cmBrandAuth.agentFlag eq 1?cmBrandAuth.agentName:cmBrandAuth.brandName}','${product.displaySnCode}')">二维码</a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
@@ -161,14 +161,15 @@
|
|
|
<div class="close-btn">关闭</div>
|
|
|
</div>
|
|
|
<div class="qrcodeBox-download">
|
|
|
- <div class="download-btn" onclick="downloadClick()">下载二维码</div>
|
|
|
+ <div class="download-btn" onclick="downQRCode()">下载二维码</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a id="downloadLink"></a>
|
|
|
|
|
|
<div class="pagination">${page}</div>
|
|
|
- <script type="text/javascript" src="${ctxStatic}/QRCode/qrcode.js"></script>
|
|
|
+<%-- <script type="text/javascript" src="${ctxStatic}/QRCode/qrcode.js"></script>--%>
|
|
|
+ <script type="text/javascript" src="${ctxStatic}/QRCode/jquery.qrcode.min.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
$(document).ready(function () {
|
|
|
//弹出框去滚动条
|
|
@@ -179,17 +180,50 @@
|
|
|
})
|
|
|
});
|
|
|
|
|
|
- function show(id, wwwServer) {
|
|
|
- $('.qrcodeBox-content').show(100);
|
|
|
- new QRCode(document.getElementById("qrcode"), {
|
|
|
- width: 220, //生成的二维码的宽度
|
|
|
- height: 220, //生成的二维码的高度
|
|
|
- text: wwwServer + "product/auth/product-" + id + ".html", //任意内容
|
|
|
- colorDark : "#000000", // 生成的二维码的深色部分
|
|
|
- colorLight : "#ffffff", //生成二维码的浅色部分
|
|
|
- correctLevel : QRCode.CorrectLevel.H
|
|
|
- });
|
|
|
- }
|
|
|
+ var qrCodeSize = [200, 500, 1000],//二维码尺寸
|
|
|
+ picWidth = [20, 34, 66],//图片额外宽
|
|
|
+ picHeight = [60, 100, 200],//图片额外高
|
|
|
+ fontSize = [14, 24, 46];//描述文字大小
|
|
|
+
|
|
|
+ function show(id, wwwServer, agentName, snCode) {
|
|
|
+ var qrText = wwwServer + "product/auth/product-" + id + ".html",//要生成二维码的信息,文本或URL
|
|
|
+ strHeader = agentName+'品牌授权',//顶部文字描述
|
|
|
+ strFooter = '仪器SN码:'+snCode;//底部文字描述
|
|
|
+ var i = 0;
|
|
|
+ $('.qrcodeBox-content').show(100);
|
|
|
+ var qrcode = $('#qrcode').qrcode({
|
|
|
+ render: 'canvas',
|
|
|
+ text: qrText,
|
|
|
+ width: qrCodeSize[i],
|
|
|
+ height: qrCodeSize[i],
|
|
|
+ background: '#ffffff',
|
|
|
+ foreground: '#000000',
|
|
|
+ }).show();
|
|
|
+ var canvas = qrcode.find('canvas').get(0);
|
|
|
+ //设置二维码
|
|
|
+ var img = new Image();
|
|
|
+ img.src = canvas.toDataURL('image/png');
|
|
|
+ img.onload = function () {
|
|
|
+ //重新绘制画布
|
|
|
+ var w = img.width + picWidth[i], h = img.height + picHeight[i];
|
|
|
+ canvas.width = w;
|
|
|
+ canvas.height = h;
|
|
|
+ var ctx = canvas.getContext('2d');
|
|
|
+ //设置画布背景
|
|
|
+ ctx.fillStyle = '#ffffff';
|
|
|
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
+ //设置文字样式
|
|
|
+ ctx.fillStyle = '#000000';
|
|
|
+ ctx.font = 'bold ' + fontSize[i] + 'px Arial';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ //绘制顶部文字描述
|
|
|
+ ctx.fillText(strHeader, w / 2, picHeight[i] / 3);
|
|
|
+ //绘制二维码
|
|
|
+ ctx.drawImage(img, picWidth[i] / 2, picHeight[i] / 2);
|
|
|
+ //绘制底部文字
|
|
|
+ ctx.fillText(strFooter, w / 2, h - picHeight[i] / 5);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
function closeAlert() {
|
|
|
$('.qrcodeBox-content').hide(100);
|
|
@@ -197,17 +231,16 @@
|
|
|
}
|
|
|
|
|
|
//jquery
|
|
|
- function downloadClick () {
|
|
|
+ function downQRCode() {
|
|
|
// 获取base64的图片节点
|
|
|
- debugger
|
|
|
- var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
|
|
|
+ var img = document.getElementById('qrcode').getElementsByTagName('canvas')[0];
|
|
|
// 构建画布
|
|
|
var canvas = document.createElement('canvas');
|
|
|
canvas.width = img.width;
|
|
|
canvas.height = img.height;
|
|
|
canvas.getContext('2d').drawImage(img, 0, 0);
|
|
|
// 构造url
|
|
|
- url = canvas.toDataURL('image/png');
|
|
|
+ var url = canvas.toDataURL('image/png');
|
|
|
// 构造a标签并模拟点击
|
|
|
var downloadLink = document.getElementById('downloadLink');
|
|
|
downloadLink.setAttribute('href', url);
|