|
@@ -1,12 +1,17 @@
|
|
|
<%@ page contentType="text/html;charset=UTF-8" %>
|
|
|
-<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
|
|
|
+<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
|
|
|
<html>
|
|
|
<head>
|
|
|
- <title>品牌授权商品管理</title>
|
|
|
- <meta name="decorator" content="default"/>
|
|
|
- <style type="text/css">
|
|
|
- .table th{text-align: center;}
|
|
|
- .table td{text-align: center;}
|
|
|
+ <title>品牌授权商品管理</title>
|
|
|
+ <meta name="decorator" content="default"/>
|
|
|
+ <style type="text/css">
|
|
|
+ .table th {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table td {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
.qrcodeBox-content {
|
|
|
width: 100%;
|
|
@@ -21,8 +26,8 @@
|
|
|
|
|
|
.content-box {
|
|
|
border-radius: 5px;
|
|
|
- width: 260px;
|
|
|
- height: 300px;
|
|
|
+ width: 300px;
|
|
|
+ height: 400px;
|
|
|
background-color: #FFF;
|
|
|
border: 1px solid #ebebeb;
|
|
|
position: absolute;
|
|
@@ -33,12 +38,11 @@
|
|
|
margin: auto;
|
|
|
z-index: 999;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 20px;
|
|
|
}
|
|
|
|
|
|
.qrcodeBox {
|
|
|
- width: 220px;
|
|
|
- height: 220px;
|
|
|
+ width: 300px;
|
|
|
+ height: 400px;
|
|
|
}
|
|
|
|
|
|
.qrcodeBox-colse {
|
|
@@ -47,6 +51,7 @@
|
|
|
display: inline;
|
|
|
float: right;
|
|
|
}
|
|
|
+
|
|
|
.qrcodeBox-download {
|
|
|
width: 50%;
|
|
|
height: 50px;
|
|
@@ -81,139 +86,260 @@
|
|
|
margin-top: 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- </style>
|
|
|
- <script type="text/javascript">
|
|
|
- $(document).ready(function() {
|
|
|
-
|
|
|
- });
|
|
|
- function page(n,s){
|
|
|
- $("#pageNo").val(n);
|
|
|
- $("#pageSize").val(s);
|
|
|
- $("#searchForm").submit();
|
|
|
- return false;
|
|
|
+ </style>
|
|
|
+ <script type="text/javascript">
|
|
|
+ $(document).ready(function () {
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ function page(n, s) {
|
|
|
+ $("#pageNo").val(n);
|
|
|
+ $("#pageSize").val(s);
|
|
|
+ $("#searchForm").submit();
|
|
|
+ return false;
|
|
|
}
|
|
|
- </script>
|
|
|
+ </script>
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
- <ul class="nav nav-tabs">
|
|
|
- <li><a href="${ctx}/zplm/cmBrandAuth/">品牌授权列表</a></li>
|
|
|
- <li class="active"><a href="${ctx}/zplm/cmBrandAuthProduct/?authId=${cmBrandAuthProduct.authId}">商品列表</a></li>
|
|
|
- </ul>
|
|
|
- <form:form id="searchForm" modelAttribute="cmBrandAuthProduct" action="${ctx}/zplm/cmBrandAuthProduct/?authId=${cmBrandAuthProduct.authId}" method="post" class="breadcrumb form-search">
|
|
|
- <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
|
|
|
- <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
|
|
|
- <div class="ul-form">
|
|
|
- <label>商品名称:</label>
|
|
|
- <form:input path="name" htmlEscape="false" maxlength="50" class="input-medium"/>
|
|
|
- <label>商品sn码:</label>
|
|
|
- <form:input path="snCode" htmlEscape="false" maxlength="255" class="input-medium"/>
|
|
|
- <input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>
|
|
|
- <a class="btn btn-primary" href="${ctx}/zplm/cmBrandAuthProduct/form?authId=${cmBrandAuthProduct.authId}">新增</a>
|
|
|
- <div class="clearfix"></div>
|
|
|
- </div>
|
|
|
- </form:form>
|
|
|
- <sys:message content="${message}"/>
|
|
|
- <table id="contentTable" class="table table-striped table-bordered table-condensed">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>序号</th>
|
|
|
- <th>商品名称</th>
|
|
|
- <th>商品SN码</th>
|
|
|
- <th>创建时间</th>
|
|
|
- <th>创建人</th>
|
|
|
- <th>操作</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <c:forEach items="${page.list}" var="product" varStatus="index">
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- ${index.index+1}
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- ${product.name}
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- ${product.snCode}
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <fmt:formatDate value="${product.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- ${product.createUserName}
|
|
|
- </td>
|
|
|
- <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>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </c:forEach>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <div class="qrcodeBox-content">
|
|
|
- <div class="content-box">
|
|
|
- <div class="qrcodeBox" id="qrcode">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="qrcodeBox-colse">
|
|
|
- <div class="close-btn">关闭</div>
|
|
|
- </div>
|
|
|
- <div class="qrcodeBox-download">
|
|
|
- <div class="download-btn" onclick="downloadClick()">下载二维码</div>
|
|
|
- </div>
|
|
|
+<ul class="nav nav-tabs">
|
|
|
+ <li><a href="${ctx}/zplm/cmBrandAuth/">品牌授权列表</a></li>
|
|
|
+ <li class="active"><a href="${ctx}/zplm/cmBrandAuthProduct/?authId=${cmBrandAuthProduct.authId}">商品列表</a></li>
|
|
|
+</ul>
|
|
|
+<form:form id="searchForm" modelAttribute="cmBrandAuthProduct"
|
|
|
+ action="${ctx}/zplm/cmBrandAuthProduct/?authId=${cmBrandAuthProduct.authId}" method="post"
|
|
|
+ class="breadcrumb form-search">
|
|
|
+ <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
|
|
|
+ <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
|
|
|
+ <div class="ul-form">
|
|
|
+ <label>商品名称:</label>
|
|
|
+ <form:input path="name" htmlEscape="false" maxlength="50" class="input-medium"/>
|
|
|
+ <label>商品sn码:</label>
|
|
|
+ <form:input path="snCode" htmlEscape="false" maxlength="255" class="input-medium"/>
|
|
|
+ <input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>
|
|
|
+ <a class="btn btn-primary" href="${ctx}/zplm/cmBrandAuthProduct/form?authId=${cmBrandAuthProduct.authId}">新增</a>
|
|
|
+ <div class="clearfix"></div>
|
|
|
+ </div>
|
|
|
+</form:form>
|
|
|
+<sys:message content="${message}"/>
|
|
|
+<table id="contentTable" class="table table-striped table-bordered table-condensed">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>序号</th>
|
|
|
+ <th>商品名称</th>
|
|
|
+ <th>商品SN码</th>
|
|
|
+ <th>创建时间</th>
|
|
|
+ <th>创建人</th>
|
|
|
+ <th>操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <c:forEach items="${page.list}" var="product" varStatus="index">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ ${index.index+1}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ ${product.name}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ ${product.snCode}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <fmt:formatDate value="${product.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ ${product.createUserName}
|
|
|
+ </td>
|
|
|
+ <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')}','${cmBrandAuth.agentFlag eq 1?cmBrandAuth.agentName:cmBrandAuth.brandName}','${product.displaySnCode}')">二维码</a>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </c:forEach>
|
|
|
+ </tbody>
|
|
|
+</table>
|
|
|
+<div class="qrcodeBox-content">
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="qrcodeBox" id="qrcode">
|
|
|
+
|
|
|
</div>
|
|
|
+ <div class="qrcodeBox-colse">
|
|
|
+ <div class="close-btn">关闭</div>
|
|
|
+ </div>
|
|
|
+ <div class="qrcodeBox-download">
|
|
|
+ <div class="download-btn" onclick="downQRCode()">下载二维码</div>
|
|
|
+ </div>
|
|
|
+ <div id="downQrCode"></div>
|
|
|
</div>
|
|
|
- <a id="downloadLink"></a>
|
|
|
+</div>
|
|
|
+<a id="downloadLink"></a>
|
|
|
|
|
|
- <div class="pagination">${page}</div>
|
|
|
- <script type="text/javascript" src="${ctxStatic}/QRCode/qrcode.js"></script>
|
|
|
- <script type="text/javascript">
|
|
|
- $(document).ready(function () {
|
|
|
- //弹出框去滚动条
|
|
|
- top.$('#jbox-content').css("overflow-y", "hidden");
|
|
|
- show_title(30);
|
|
|
- $('.close-btn').click(function () {
|
|
|
- closeAlert();
|
|
|
- })
|
|
|
- });
|
|
|
+<div class="pagination">${page}</div>
|
|
|
+<%-- <script type="text/javascript" src="${ctxStatic}/QRCode/qrcode.js"></script>--%>
|
|
|
+<script type="text/javascript">
|
|
|
+ $(document).ready(function () {
|
|
|
+ //弹出框去滚动条
|
|
|
+ top.$('#jbox-content').css("overflow-y", "hidden");
|
|
|
+ show_title(30);
|
|
|
+ $('.close-btn').click(function () {
|
|
|
+ closeAlert();
|
|
|
+ })
|
|
|
+ });
|
|
|
|
|
|
- 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
|
|
|
- });
|
|
|
+ function show(id, wwwServer, agentName, snCode) {
|
|
|
+ var qrText = wwwServer + "product/auth/product-" + id + ".html",//要生成二维码的信息,文本或URL
|
|
|
+ strHeader = agentName + '品牌授权',//顶部文字描述
|
|
|
+ strFooter1 = "仪器SN码:";//底部文字描述
|
|
|
+ strFooter2 = snCode;//底部文字描述
|
|
|
+ $('.qrcodeBox-content').show(100);
|
|
|
+ //生成展示二维码
|
|
|
+ var qrcode = $('#qrcode').qrcode({
|
|
|
+ render: 'canvas',
|
|
|
+ text: qrText,
|
|
|
+ width: 182,
|
|
|
+ height: 182,
|
|
|
+ background: '#ffffff',
|
|
|
+ foreground: '#000000',
|
|
|
+ }).show();
|
|
|
+ var canvas = qrcode.find('canvas').get(0);
|
|
|
+ //设置展示二维码
|
|
|
+ var img = new Image();
|
|
|
+ var bgImg = new Image();
|
|
|
+ img.src = canvas.toDataURL('image/png');
|
|
|
+ bgImg.src = "/static/images/qrCodeBackground.png";
|
|
|
+ bgImg.onload = function () {
|
|
|
+ //重新绘制画布
|
|
|
+ var w = bgImg.width, h = bgImg.height;
|
|
|
+ canvas.width = w;
|
|
|
+ canvas.height = h;
|
|
|
+ var ctx = canvas.getContext('2d');
|
|
|
+ //设置画布背景
|
|
|
+ ctx.fillStyle = '#fffefe';
|
|
|
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
+ //设置文字样式
|
|
|
+ ctx.fillStyle = 'white';
|
|
|
+ ctx.font = 'bold 18px MicrosoftYaHei';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ // ctx.fillText(strHeader, w / 2, picHeight[i] / 3);
|
|
|
+ ctx.drawImage(bgImg, 0, 0);
|
|
|
+ //绘制二维码
|
|
|
+ ctx.drawImage(img, 60, 167);
|
|
|
+ //绘制顶部文字描述
|
|
|
+ var chr = strHeader.split("");
|
|
|
+ var temp = "";
|
|
|
+ var row = [];
|
|
|
+ for (var a = 0; a < chr.length; a++) {
|
|
|
+ if (ctx.measureText(temp).width < (w - 50)) {
|
|
|
+ } else {
|
|
|
+ row.push(temp);
|
|
|
+ temp = "";
|
|
|
+ }
|
|
|
+ temp += chr[a];
|
|
|
+ }
|
|
|
+ row.push(temp);
|
|
|
+ if (row.length == 1) {
|
|
|
+ ctx.fillText(row[0], w / 2, 48);
|
|
|
+ } else {
|
|
|
+ for (var b = 0; b < row.length; b++) {
|
|
|
+ ctx.fillText(row[b], w / 2, 58 - (row.length - b - 1) * 25);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //绘制底部文字
|
|
|
+ ctx.fillStyle = '#0e9ef0';
|
|
|
+ ctx.font = 'bold 14px MicrosoftYaHei';
|
|
|
+ ctx.textAlign = 'left';
|
|
|
+ ctx.fillText(strFooter1, 68, 91);
|
|
|
+ ctx.font = '14px MicrosoftYaHei';
|
|
|
+ ctx.fillText(strFooter2, w / 2 - 5, 91);
|
|
|
}
|
|
|
|
|
|
- function closeAlert() {
|
|
|
- $('.qrcodeBox-content').hide(100);
|
|
|
- $('#qrcode').empty();
|
|
|
+ //生成下载二维码
|
|
|
+ var downQrCode = $('#downQrCode').qrcode({
|
|
|
+ render: 'canvas',
|
|
|
+ text: qrText,
|
|
|
+ width: 660,
|
|
|
+ height: 660,
|
|
|
+ background: '#ffffff',
|
|
|
+ foreground: '#000000',
|
|
|
+ }).hide();
|
|
|
+ //设置下载二维码
|
|
|
+ var downCanvas = downQrCode.find('canvas').get(0);
|
|
|
+ var downImg = new Image();
|
|
|
+ var downBgImg = new Image();
|
|
|
+ downImg.src = downCanvas.toDataURL('image/png');
|
|
|
+ downBgImg.src = "/static/images/downQrCodeBackground.png";
|
|
|
+ downBgImg.onload = function () {
|
|
|
+ //重新绘制画布
|
|
|
+ var w = downBgImg.width, h = downBgImg.height;
|
|
|
+ downCanvas.width = w;
|
|
|
+ downCanvas.height = h;
|
|
|
+ var ctx = downCanvas.getContext('2d');
|
|
|
+ //设置画布背景
|
|
|
+ ctx.fillStyle = '#ffffff';
|
|
|
+ ctx.fillRect(0, 0, downCanvas.width, downCanvas.height);
|
|
|
+ //设置文字样式
|
|
|
+ ctx.fillStyle = '#ffffff';
|
|
|
+ ctx.font = 'bold 52px MicrosoftYaHei';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.drawImage(downBgImg, 0, 0);
|
|
|
+ //绘制二维码
|
|
|
+ ctx.drawImage(downImg, 215, 402);
|
|
|
+ //绘制顶部文字描述
|
|
|
+ var chr = strHeader.split("");
|
|
|
+ var temp = "";
|
|
|
+ var row = [];
|
|
|
+ for (var a = 0; a < chr.length; a++) {
|
|
|
+ if (ctx.measureText(temp).width < (w - 290)) {
|
|
|
+ } else {
|
|
|
+ row.push(temp);
|
|
|
+ temp = "";
|
|
|
+ }
|
|
|
+ temp += chr[a];
|
|
|
+ }
|
|
|
+ row.push(temp);
|
|
|
+ if (row.length == 1) {
|
|
|
+ ctx.fillText(row[0], w / 2, 122);
|
|
|
+ } else {
|
|
|
+ for (var b = 0; b < row.length; b++) {
|
|
|
+ ctx.fillText(row[b], w / 2, 160 - (row.length - b - 1) * 65);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //绘制底部文字
|
|
|
+ ctx.fillStyle = '#42aaff';
|
|
|
+ ctx.font = 'bold 33px MicrosoftYaHei';
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.fillText(strFooter1 + strFooter2, w / 2, 238);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- //jquery
|
|
|
- function downloadClick () {
|
|
|
- // 获取base64的图片节点
|
|
|
- debugger
|
|
|
- var img = document.getElementById('qrcode').getElementsByTagName('img')[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');
|
|
|
- // 构造a标签并模拟点击
|
|
|
- var downloadLink = document.getElementById('downloadLink');
|
|
|
- downloadLink.setAttribute('href', url);
|
|
|
- downloadLink.setAttribute('download', '二维码.png');
|
|
|
- downloadLink.click();
|
|
|
- }
|
|
|
- </script>
|
|
|
+ function closeAlert() {
|
|
|
+ $('.qrcodeBox-content').hide(100);
|
|
|
+ $('#qrcode').empty();
|
|
|
+ $('#downQrCode').empty();
|
|
|
+ }
|
|
|
+
|
|
|
+ //jquery
|
|
|
+ function downQRCode() {
|
|
|
+ // 获取base64的图片节点
|
|
|
+ var img = document.getElementById('downQrCode').getElementsByTagName('canvas')[0];
|
|
|
+ // 构建画布
|
|
|
+ var canvas = document.createElement('canvas');
|
|
|
+ canvas.width = img.width;
|
|
|
+ canvas.height = img.height;
|
|
|
+ canvas.getContext('2d').drawImage(img, 0, 0);
|
|
|
+ // 构造url
|
|
|
+ var url = canvas.toDataURL('image/png');
|
|
|
+ // 构造a标签并模拟点击
|
|
|
+ var downloadLink = document.getElementById('downloadLink');
|
|
|
+ downloadLink.setAttribute('href', url);
|
|
|
+ downloadLink.setAttribute('download', '二维码.png');
|
|
|
+ downloadLink.click();
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<script type="text/javascript" src="${ctxStatic}/QRCode/jquery.qrcode.min.js"></script>
|
|
|
</body>
|
|
|
</html>
|