76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
<template>
|
||
|
||
<div>
|
||
|
||
<el-dialog
|
||
:title="title"
|
||
:visible.sync="codeDialogVisible"
|
||
:close-on-click-modal="false"
|
||
width="40%">
|
||
<span></span>
|
||
<div style="width: 100%;">
|
||
<div id="qrcode" style="width: 70%;left: 0;right: 0;margin: auto"></div>
|
||
</div>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="codeDialogVisible = false" type="primary">关 闭</el-button>
|
||
<!-- <el-button type="primary" @click="dwn('活动二维码')">下 载</el-button>-->
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
module.exports = {
|
||
props: {},
|
||
data() {
|
||
return {
|
||
codeDialogVisible: false,
|
||
title: "活动二维码",
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
saveFile(data, filename) {
|
||
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
|
||
save_link.href = data;
|
||
save_link.download = filename;
|
||
|
||
var event = document.createEvent('MouseEvents');
|
||
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||
save_link.dispatchEvent(event);
|
||
},
|
||
/*下载二维码*/
|
||
dwn(name) {
|
||
var type = 'png';
|
||
var dataurl = $("canvas").get(0).toDataURL('image/png').replace("image/png", "image/octet-stream");
|
||
var filename = name + '_' + (new Date()).getTime() + '.' + type;
|
||
this.saveFile(dataurl, filename);
|
||
},
|
||
openCode(url,title) {
|
||
if (title){
|
||
this.title=this.title+"（"+title+"）"
|
||
}
|
||
this.codeDialogVisible = true
|
||
this.$nextTick(() => {
|
||
$("#qrcode").html("")
|
||
$("#qrcode").qrcode({ //设置css
|
||
render: "canvas", //二维码的生成方式
|
||
width: $("#qrcode").width(), //生成二维码的宽度
|
||
height: $("#qrcode").width(), //生成二维码的高度
|
||
text: APP_DOMAIN + url,
|
||
correctLevel: 3 //容错级别，默认为2，最高为3，为了让用户扫码最快，容错级别应当设为最低
|
||
});
|
||
})
|
||
console.log(APP_DOMAIN + url)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|