|
|
@@ -2,7 +2,7 @@
|
|
|
|
|
|
1.引入方式
|
|
|
|
|
|
- <qr-code-dialog v-if="qrCodeDialogType" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>
|
|
|
+ <qr-code-dialog ref="qrCodeDialog" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>
|
|
|
|
|
|
import qrCodeDialog from "@/components/qrCodeDialog/index.vue"
|
|
|
|
|
|
@@ -12,25 +12,21 @@
|
|
|
|
|
|
2.必要参数
|
|
|
|
|
|
- qrCodeDialogType:false,
|
|
|
qrCodeDialogData:{},
|
|
|
|
|
|
3.必要方法
|
|
|
|
|
|
//二维码组件开关
|
|
|
- qrCodeDialogButton(type,id,name){
|
|
|
- if(type == 1){
|
|
|
+ open(type,id,name){
|
|
|
this.$set(this,'qrCodeDialogData',{
|
|
|
- title:'化学品名称', //标题名称(非必填)
|
|
|
- download:true, //下载按钮(非必填)
|
|
|
- type:'chemicalsCabinet', //二维码类型 用于区分二维码功能类型
|
|
|
- parameter:id, //二维码参数
|
|
|
- name:name, //二维码名称用于下载时命名
|
|
|
+ title:row.name, //弹窗名称(非必传)
|
|
|
+ download:true, //二维码下载按钮(非必传)
|
|
|
+ type:'1', //二维码类型 用于区分二维码功能类型
|
|
|
+ parameter:row.id, //二维码参数
|
|
|
+ name:row.name, //二维码名称用于下载时命名(非必传)
|
|
|
+ codeName:row.name, //二维码图片下名称展示(非必传)
|
|
|
});
|
|
|
- this.$set(this,'qrCodeDialogType',true);
|
|
|
- }else{
|
|
|
- this.$set(this,'qrCodeDialogType',false);
|
|
|
- }
|
|
|
+ this.$refs['qrCodeDialog'].initialize();
|
|
|
},
|
|
|
|
|
|
-->
|
|
|
@@ -42,11 +38,12 @@
|
|
|
:modal-append-to-body="false"
|
|
|
:show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
:visible.sync="dialogType" v-if="dialogType" width="394px">
|
|
|
- <p class="title-p">{{qrCodeDialogData.title?qrCodeDialogData.title:''}}</p>
|
|
|
- <vue-qr v-if="vueQrImgType" ref="vueQr" class="trainingCourseAddDialog-vue-qr" :text="vueQrCodeData" :size="200"></vue-qr>
|
|
|
+ <p class="title-p">{{qrCodeDialogData.title?qrCodeDialogData.title:'二维码'}}</p>
|
|
|
+ <vue-qr v-if="dialogType" ref="vueQr" class="trainingCourseAddDialog-vue-qr" :text="vueQrCodeData" :size="200"></vue-qr>
|
|
|
+ <canvas class="trainingCourseAddDialog-vue-qr-canvas" id="myCanvas" ref="myCanvas" width="200" :height="qrCodeDialogData.codeName?240:200"></canvas>
|
|
|
<div class="button-bottom-box">
|
|
|
<p class="null-p"></p>
|
|
|
- <p class="out-p" @click="buttonClick">取消</p>
|
|
|
+ <p class="out-p" @click="buttonClick(2)">取消</p>
|
|
|
<p v-if="qrCodeDialogData.download" class="trainingCourseAddDialog-button-p" @click="buttonClick(1)">下载</p>
|
|
|
<p class="null-p"></p>
|
|
|
</div>
|
|
|
@@ -66,7 +63,7 @@
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
- dialogType:true,
|
|
|
+ dialogType:false,
|
|
|
vueQrCodeData:null,
|
|
|
vueQrImgType:false,
|
|
|
identification: localStorage.getItem('codeOnlineAdd'), //二维码规则 服务器域名,需与微信后台开发配置内一致.
|
|
|
@@ -76,26 +73,50 @@
|
|
|
|
|
|
},
|
|
|
mounted(){
|
|
|
- this.initialize();
|
|
|
+
|
|
|
},
|
|
|
methods:{
|
|
|
//初始化
|
|
|
initialize(){
|
|
|
+ let self = this;
|
|
|
this.$set(this,'vueQrCodeData', this.identification+'?code='+this.qrCodeDialogData.parameter+'&type='+this.qrCodeDialogData.type);
|
|
|
- this.$set(this,'vueQrImgType',true);
|
|
|
+ this.$set(this,'dialogType',true);
|
|
|
+ this.$nextTick(function () {
|
|
|
+ // DOM 更新了
|
|
|
+ setTimeout(function(){
|
|
|
+ //获取二维码数据
|
|
|
+ let imgbase64 = self.$refs.vueQr.imgUrl;
|
|
|
+ let img = new Image();
|
|
|
+ img.src = imgbase64;
|
|
|
+ //获取canvas容器
|
|
|
+ let myCanvas = document.getElementById( "myCanvas" ).getContext( '2d' );
|
|
|
+ //清空画布-设置背景白色
|
|
|
+ myCanvas.fillStyle = "#FFFFFF";
|
|
|
+ myCanvas.clearRect(0, 0, 200, 240);
|
|
|
+ myCanvas.fillRect(0, 0, 200, 240);
|
|
|
+ //绘制二维码
|
|
|
+ myCanvas.drawImage( img, 0, 0 );
|
|
|
+ if(self.qrCodeDialogData.codeName){
|
|
|
+ //设置水印
|
|
|
+ myCanvas.font = "bold 14px 'Fira Sans'";
|
|
|
+ myCanvas.fillStyle = 'rgba(0,0,0,1)'; //水印颜色
|
|
|
+ //绘制水印
|
|
|
+ myCanvas.fillText(self.qrCodeDialogData.codeName, (200-(self.qrCodeDialogData.codeName.length*14))/2, 215); //左下
|
|
|
+ }
|
|
|
+ },50);
|
|
|
+ })
|
|
|
},
|
|
|
buttonClick(type){
|
|
|
if(type == 1){
|
|
|
- let base64Str = this.$refs.vueQr.imgUrl;
|
|
|
- let aLink = document.createElement("a");
|
|
|
- aLink.style.display = "none";
|
|
|
- aLink.href = base64Str;
|
|
|
- aLink.download = this.qrCodeDialogData.name+"-二维码.png";
|
|
|
- document.body.appendChild(aLink);
|
|
|
- aLink.click();
|
|
|
- document.body.removeChild(aLink);
|
|
|
+ let canvas = this.$refs.myCanvas
|
|
|
+ const base64Img = canvas.toDataURL('image/png')
|
|
|
+ var a = document.createElement('a') // 生成一个a元素
|
|
|
+ var event = new MouseEvent('click') // 创建一个单击事件
|
|
|
+ a.download = this.qrCodeDialogData.codeName // 设置图片名称
|
|
|
+ a.href = base64Img // 将生成的URL设置为a.href属性
|
|
|
+ a.dispatchEvent(event)
|
|
|
}else{
|
|
|
- this.$parent.qrCodeDialogButton();
|
|
|
+ this.$set(this,'dialogType',false);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -125,13 +146,21 @@
|
|
|
text-align: center;
|
|
|
margin-top:40px;
|
|
|
font-size:16px;
|
|
|
+ font-weight:700;
|
|
|
}
|
|
|
.trainingCourseAddDialog-vue-qr{
|
|
|
+ position: absolute;
|
|
|
+ z-index:-10;
|
|
|
+ opacity: 0;
|
|
|
display: block!important;
|
|
|
height:200px;
|
|
|
width:200px;
|
|
|
margin:20px auto 27px;
|
|
|
}
|
|
|
+ .trainingCourseAddDialog-vue-qr-canvas{
|
|
|
+ display: block!important;
|
|
|
+ margin:20px auto 27px;
|
|
|
+ }
|
|
|
.button-bottom-box{
|
|
|
display: flex;
|
|
|
margin:0 auto 30px;
|
dedsudiyu