|
|
@@ -33,6 +33,11 @@
|
|
33
|
33
|
}}
|
|
34
|
34
|
</template>
|
|
35
|
35
|
</el-table-column>
|
|
|
36
|
+ <el-table-column prop="qcode" label="二维码">
|
|
|
37
|
+ <template slot-scope="scope">
|
|
|
38
|
+ <el-image :src="scope.row.qcode" style="width: 100px; height: 100px" />
|
|
|
39
|
+ </template>
|
|
|
40
|
+ </el-table-column>
|
|
36
|
41
|
<el-table-column fixed="right" label="操作">
|
|
37
|
42
|
<template slot-scope="scope">
|
|
38
|
43
|
<el-link :underline="false" style="margin-right:1em" type="primary">
|
|
|
@@ -40,6 +45,7 @@
|
|
40
|
45
|
:to="{name: 'gameEdit', query: { id: scope.row.gameId }}"
|
|
41
|
46
|
>编辑</router-link>
|
|
42
|
47
|
</el-link>
|
|
|
48
|
+ <el-button type="text" style="margin-right:1em" @click="downloadQrcode(scope.row)">下载二维码</el-button>
|
|
43
|
49
|
<el-popconfirm
|
|
44
|
50
|
icon="el-icon-info"
|
|
45
|
51
|
icon-color="red"
|
|
|
@@ -51,6 +57,7 @@
|
|
51
|
57
|
</template>
|
|
52
|
58
|
</el-table-column>
|
|
53
|
59
|
</el-table>
|
|
|
60
|
+ <div v-show="false" id="qrcode" ref="qrcode" />
|
|
54
|
61
|
<el-pagination
|
|
55
|
62
|
v-show="gameTotal!==0"
|
|
56
|
63
|
style="float:right; margin:20px 0"
|
|
|
@@ -66,7 +73,7 @@
|
|
66
|
73
|
</template>
|
|
67
|
74
|
<script>
|
|
68
|
75
|
import { getGameList, deleteGame } from '@/api/game'
|
|
69
|
|
-
|
|
|
76
|
+import QRCode from 'qrcodejs2'
|
|
70
|
77
|
export default {
|
|
71
|
78
|
data() {
|
|
72
|
79
|
return {
|
|
|
@@ -81,6 +88,23 @@ export default {
|
|
81
|
88
|
gameTotal: 0 // 条目总数
|
|
82
|
89
|
}
|
|
83
|
90
|
},
|
|
|
91
|
+ watch: {
|
|
|
92
|
+ tableData: {
|
|
|
93
|
+ handler(val) {
|
|
|
94
|
+ if (val.length > 0 && !val[0].qcode) {
|
|
|
95
|
+ var newData = []
|
|
|
96
|
+ val.map(item => {
|
|
|
97
|
+ newData.push(item)
|
|
|
98
|
+ })
|
|
|
99
|
+ newData.map(item => {
|
|
|
100
|
+ item.qcode = this.setCodeImg(item)
|
|
|
101
|
+ })
|
|
|
102
|
+ this.tableData = newData
|
|
|
103
|
+ }
|
|
|
104
|
+ },
|
|
|
105
|
+ immediate: true // 页面加载时就启动
|
|
|
106
|
+ }
|
|
|
107
|
+ },
|
|
84
|
108
|
mounted() {
|
|
85
|
109
|
this.onSearch()
|
|
86
|
110
|
},
|
|
|
@@ -139,6 +163,74 @@ export default {
|
|
139
|
163
|
dateChange(val) {
|
|
140
|
164
|
this.startDate = this.daterange[0]
|
|
141
|
165
|
this.endDate = this.daterange[1]
|
|
|
166
|
+ },
|
|
|
167
|
+
|
|
|
168
|
+ // 生成二维码
|
|
|
169
|
+ qrcode(val) {
|
|
|
170
|
+ const qrcode = new QRCode('qrcode', {
|
|
|
171
|
+ width: 200,
|
|
|
172
|
+ height: 200, // 高度
|
|
|
173
|
+ text: 'http://192.168.89.76:8080/?gameId=' + val.gameId
|
|
|
174
|
+ })
|
|
|
175
|
+ },
|
|
|
176
|
+ // 下载二维码
|
|
|
177
|
+ downloadQrcode(val) {
|
|
|
178
|
+ document.getElementById('qrcode').innerHTML = ''
|
|
|
179
|
+ this.qrcode(val) // 下载之前首先要有二维码
|
|
|
180
|
+ // 先找到canvas节点下的二维码图片
|
|
|
181
|
+ const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
|
|
|
182
|
+ const img = document.getElementById('qrcode').getElementsByTagName('img')
|
|
|
183
|
+ // 创建一个a节点
|
|
|
184
|
+ const a = document.createElement('a')
|
|
|
185
|
+ // 设置a的href属性将canvas变成png格式
|
|
|
186
|
+ const imgURL = myCanvas[0].toDataURL('image/jpg')
|
|
|
187
|
+ const ua = navigator.userAgent
|
|
|
188
|
+ if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且 windows系统 情况下 才执行;
|
|
|
189
|
+ var bstr = atob(imgURL.split(',')[1])
|
|
|
190
|
+ var n = bstr.length
|
|
|
191
|
+ var u8arr = new Uint8Array(n)
|
|
|
192
|
+ while (n--) {
|
|
|
193
|
+ u8arr[n] = bstr.charCodeAt(n)
|
|
|
194
|
+ }
|
|
|
195
|
+ var blob = new Blob([u8arr])
|
|
|
196
|
+ window.navigator.msSaveOrOpenBlob(blob, val.title + '.png')
|
|
|
197
|
+ } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
|
|
|
198
|
+ const blob = this.base64ToBlob(imgURL) // new Blob([content]);
|
|
|
199
|
+ const evt = document.createEvent('HTMLEvents')
|
|
|
200
|
+ evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
|
|
|
201
|
+ a.download = val.title + '.png'// 下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
|
|
|
202
|
+ a.href = URL.createObjectURL(blob)
|
|
|
203
|
+ a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))// 兼容火狐
|
|
|
204
|
+ } else { // 谷歌兼容下载
|
|
|
205
|
+ img.src = imgURL
|
|
|
206
|
+ a.href = img.src
|
|
|
207
|
+ // 设置下载文件的名字
|
|
|
208
|
+ a.download = val.title + '.png'
|
|
|
209
|
+ // 点击
|
|
|
210
|
+ a.click()
|
|
|
211
|
+ }
|
|
|
212
|
+ },
|
|
|
213
|
+ // 返回对应二维码图片给表格
|
|
|
214
|
+ setCodeImg(val) {
|
|
|
215
|
+ document.getElementById('qrcode').innerHTML = ''
|
|
|
216
|
+ this.qrcode(val) // 下载之前首先要有二维码
|
|
|
217
|
+ // 先找到canvas节点下的二维码图片
|
|
|
218
|
+ const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
|
|
|
219
|
+ // 设置a的href属性将canvas变成png格式
|
|
|
220
|
+ const imgURL = myCanvas[myCanvas.length - 1].toDataURL('image/jpg')
|
|
|
221
|
+ return imgURL
|
|
|
222
|
+ },
|
|
|
223
|
+ // base64转blob
|
|
|
224
|
+ base64ToBlob(code) {
|
|
|
225
|
+ const parts = code.split(';base64,')
|
|
|
226
|
+ const contentType = parts[0].split(':')[1]
|
|
|
227
|
+ const raw = window.atob(parts[1])
|
|
|
228
|
+ const rawLength = raw.length
|
|
|
229
|
+ const uInt8Array = new Uint8Array(rawLength)
|
|
|
230
|
+ for (let i = 0; i < rawLength; ++i) {
|
|
|
231
|
+ uInt8Array[i] = raw.charCodeAt(i)
|
|
|
232
|
+ }
|
|
|
233
|
+ return new Blob([uInt8Array], { type: contentType })
|
|
142
|
234
|
}
|
|
143
|
235
|
}
|
|
144
|
236
|
}
|
