index.vue
3.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<template>
<div class="dialogSty">
<!-- <el-dropdown-item @click.native="onClick" size="mini" plain>{{row.wqpxxfqptm || '-'}}</el-dropdown-item>-->
<!-- <el-link type="primary" @click.native="onClick">{{row.wqpxxfqptm || '-'}}</el-link>-->
<el-dialog title='气瓶二维码' :visible.sync='ewmVisible' width='346px' center style="z-index: 9999;">
<template slot="title">
<div class="titleSty">员工二维码</div>
<div class="titleSty" style="margin-top: 10px;">员工姓名: {{dialogForm.name}}</div>
</template>
<div style="text-align: center;">
<!-- <vue-qr-->
<!-- :text="qrcodeText"-->
<!-- ref="eipqrcode"-->
<!-- :correctLevel="3"-->
<!-- :size="250"-->
<!-- :margin="10"-->
<!-- colorDark=”#000″-->
<!-- colorLight=”white”-->
<!-- backgroundColor=”white”-->
<!-- backgroundDimming=”white”-->
<!-- :logoSrc="require('@/assets/qpxx/qpxx-01.png')"-->
<!-- :logoScale=".2"-->
<!-- :logoMargin="5"-->
<!-- logoBackgroundColor=”white”-->
<!-- ></vue-qr>-->
<canvas ref='eipqrcode' class='qr-canvas'></canvas>
</div>
<div style='text-align: center; color: #5875EB;cursor: pointer;' @click="downloadPersonQr">下载二维码</div>
<div class="left-circle"></div>
<div class="right-circle"></div>
</el-dialog>
</div>
</template>
<script>
import QRCode from 'qrcode'
import VueQr from 'vue-qr'
export default {
components: { VueQr },
props: {
// row: { type: Object },
// column: { type: Object },
// index: { type: String },
// desc: { type: String }
},
data: () => ({
ewmVisible: false,
qrcodeText: "测试二维码" ,//二维码内容（扫码识别后需要访问的网址）
dialogForm:{
name:''
}
}),
methods: {
show(type,row){
console.log('row',row);
this.ewmVisible = true;
this.dialogForm.name =type=='yhgl'?row.fXm:row.wygxxfxm;
let qrcode = type=='yhgl'?row.fEwm:row.wygxxfewm;
setTimeout(() => {
QRCode.toCanvas(this.$refs.eipqrcode, qrcode)
}, 200);
},
downloadPersonQr(){
let base64Img = this.$refs.eipqrcode.toDataURL('image/jpg');
//创建下载标签，然后设置链接和图片名称
let a = document.createElement('a')
a.href = base64Img
a.download = '二维码'+Date.now()
a.click()
//销毁元素
a.remove();
},
}
}
</script>
<style scoped lang='scss'>
.dialogSty{
position:relative;
::v-deep.el-dialog{
border-radius: 20px!important;
}
::v-deep.el-dialog__header{
padding-top: 40px;
}
::v-deep .el-dialog__body{
border-top: 1px dashed #dcdfe6;
}
.qr-canvas{
width: 160px !important;
height: 160px !important;
}
.left-circle{
position: absolute;
top: 99px;
left: 0px;
width: 8px;
height: 16px;
border: 1px solid #7d7b7bdb;
background-color: #7d7b7bdb;
/* border-radius的顺序是 左上 右上 右下 左下 */
/* 半圆朝左，右边上下角是圆的，左边上下角的宽度设置为0 */
/* div盒子宽度为高度的一半 */
/* 右上和右下的宽度与高度取50或者100都没问题 */
border-radius: 0 100px 100px 0;
}
.right-circle{
position: absolute;
top: 99px;
right: 0px;
width: 8px;
height: 16px;
border: 1px solid #7d7b7bdb;
background-color: #7d7b7bdb;
/* border-radius的顺序是 左上 右上 右下 左下 */
/* 半圆朝左，右边上下角是圆的，左边上下角的宽度设置为0 */
/* div盒子宽度为高度的一半 */
/* 右上和右下的宽度与高度取50或者100都没问题 */
border-radius: 100px 0 0 100px ;
}
}
.titleSty{
font-family: '苹方 中等', '苹方', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #2B3950;
}
</style>