版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82777834
前言 |
内容 |
一、JSP页面
1.添加一个按钮 <shiro:hasPermission name="memshop:csold:recomd">
{{if ifShelves==1}}
<input type="button" class="gray_btn fl twocodebtn" cardcode="{{:cardCode}}" cinemacode="{{:cinemaCode}}" companycode="{{:companyCode}}" cinemaShortName="{{:cinemaShortName}}" cardName="{{:cardName}}" value="购卡二维码">
{{/if}}
</shiro:hasPermission>
2.添加div、img标签接收二维码
<div id="qrcodeDiv"></div>
<img id='qrcodeimg' style='border:1px;'/>
二、js代码
1.引用两个js插件(在jsp页面引用)//生成二维码
<script src="${ctx}/js/lib/jquery.qrcode.min.js"></script>
//弹出层
<script src="${ctx}/js/lib/layer/layer.js"></script>
2.代码实现
// 购卡二维码
$("#pricetabl").on("click", ".twocodebtn", function () {
//传递必要参数(本功能需要)
var cinemaCode = $(this).attr("cinemacode");
var cardCode = $(this).attr("cardcode");
var companyCode=$(this).attr("companycode");
var cinemaShortName=$(this).attr("cinemaShortName");
var cardName=$(this).attr("cardName");
//二维码指向的地址
var url="https://newh5.ingcore.com/app/card/cardDetail?companyCode="+companyCode+"&cinemaCode="+cinemaCode+"&cardCode="+cardCode;
qrcode(url,cinemaShortName,cardName);
});
//生成二维码的方法
function qrcode(url,cinemaShortName,cardName){
var qrcode= $('#qrcodeDiv').qrcode(url).hide();
var canvas=qrcode.find('canvas').get(0);
$('#qrcodeimg').attr('src',canvas.toDataURL('image/jpg')).hide();
//layer的模板方法
layer.open({
type: 1,
skin: 'layui-layer-molv', //样式类名
title: ['购卡二维码('+cinemaShortName+"-"+cardName+")", 'font-size: 10px; '],
offset: 'auto',
area:'auto' , //宽高
resize:true,
closeBtn: 1, //显示关闭按钮
shade: 0,
anim: 0,
shadeClose: true, //开启遮罩关闭
content: $("#qrcodeimg")
,btn: ['下载二维码']
,yes: function(index, layero){
var url = canvas.toDataURL('image/jpg');
var a = document.createElement('a');
var event = new MouseEvent('click');
a.download = '购卡二维码('+cinemaShortName+"-"+cardName+")"
a.href = url;
a.dispatchEvent(event);
}
,btnAlign: 'r'
});
$(".layui-layer-content").css('margin','18px 18px');
}
小结 |