vue-qr 生成二维码
作者：互联网
1 <template>
2 <div class="app-container"
3 element-loading-spinner="el-icon-loading">
4
5 <el-form :inline="true">
6 <el-row>
7 <el-col :span="22">
8 <el-form-item label="选择直播">
9 <el-select v-model="live_id" @change="LiveSelect($event)" filterable placeholder="请选择">
10 <el-option
11 v-for="item in live_list"
12 :key="item.id"
13 :label="item.title"
14 :value="item.id"
15 />
16 </el-select>
17 </el-form-item>
18 </el-col>
19 </el-row>
20
21 <el-row>
22 <el-col :span="6" v-show="live_on_line_type">
23 <el-button size="small" type="primary" @click="OnLineCreate">生成线上二维码</el-button>
24 </el-col>
25
26 <el-col :span="6" v-show="live_off_line_type">
27 <el-button size="small" type="primary" @click="OffLineCreate">生成线下二维码</el-button>
28 </el-col>
29 </el-row>
30
31 <el-divider />
32
33 <el-row v-show="false">
34 <el-col :span="20" :offset="1">
35 <el-input v-model="url" :disabled="true" style="text-align:center" />
36 </el-col>
37 <el-col :span="14" :offset="5">
38 <div style="text-align:center;">
39 <vue-qr ref="Qrcode" :text="url" :size="DownQrCodeSize" />
40 </div>
41 </el-col>
42 </el-row>
43 </el-form>
44
45
46 <el-table
47 v-loading="loading"
48 border
49 :data="QrCodeSizeList"
50 highlight-current-row
51 style="width: 100%"
52 v-show="qrDownTable"
53 >
54 <el-table-column prop="size" label="大小" align="left" />
55 <el-table-column prop="" label="操作" width="250px" align="center">
56 <template slot-scope="{row}">
57 <el-row>
58 <el-col :span="8" />
59 <el-col :span="24">
60 <el-button type="primary" size="mini" @click="DownloadQRCode(row.size)">下载二维码</el-button>
61 </el-col>
62 </el-row>
63 </template>
64 </el-table-column>
65 </el-table>
66
67
68 </div>
69 </template>
70
71 <script>
72 import * as liveApi from '@/api/live/live'
73 import VueQr from 'vue-qr'
74
75 const QrCodeSizeList = [{"size": "8cm"}, {"size": "12cm"}, {"size": "25cm"}, {"size": "30cm"}, {"size": "50cm"}]
76
77 const SetQrCodeSize = { "8cm": 94, "12cm": 142, "25cm": 295, "30cm": 354, "50cm": 591 }
78
79 export default {
80
81 name: 'LiveQRCode',
82
83 components: { VueQr },
84
85 data() {
86 return {
87 query: {
88 },
89 live_id: '',
90 loading: false,
91 live_on_line_type: false,
92 live_off_line_type: false,
93 live_list: [],
94 url: '',
95 QrCodeSizeList: QrCodeSizeList,
96 qrDownTable: false,
97 QrCodeType: '', // 1 线上 2 线下
98 DownQrCodeSize: 142
99 }
100 },
101 created() {
102
103 },
104
105 mounted() {
106
107 this.LiveList()
108
109 },
110
111 methods: {
112
113 DownloadQRCode(size){
114
115 // 获取url 设置二维码大小
116 if(!this.live_id || !this.QrCodeType){
117
118 this.$notify({
119
120 title: '异常',
121
122 message: '直播信息或直播类型有误',
123
124 type: 'error'
125
126 })
127
128 return false
129
130 }
131
132 this.DownQrCodeSize = SetQrCodeSize[size]
133
134 liveApi.createQRCode(this.live_id, this.QrCodeType).then(response => {
135
136 if(!response.data) {
137
138 this.$notify({
139
140 title: '异常',
141
142 message: '二维码配置错误',
143
144 type: 'error'
145
146 })
147
148 } else {
149
150 this.url = response.data
151
152 let that = this
153
154 setTimeout(function(){
155
156 const iconUrl = that.$refs.Qrcode.$el.src
157
158 let a = document.createElement("a")
159
160 let event = new MouseEvent("click")
161
162 a.download = "二维码"
163
164 a.href = iconUrl
165
166 a.dispatchEvent(event)
167
168 }, 2000)
169 }
170
171 this.loading = false
172
173 }).catch(() => {})
174
175
176
177
178 },
179
180 OnLineCreate(){
181
182 this.$notify({
183
184 title: '成功',
185
186 message: '线上二维码生成成功',
187
188 type: 'success'
189
190 })
191
192 this.QrCodeType = 1
193
194 this.qrDownTable = true
195
196 },
197
198 OffLineCreate(){
199
200 this.$notify({
201
202 title: '成功',
203
204 message: '线下二维码生成成功',
205
206 type: 'success'
207
208 })
209
210 this.QrCodeType = 2
211
212 this.qrDownTable = true
213
214 },
215
216 LiveList(){
217 this.loading = true
218
219 liveApi.LiveList().then(response => {
220
221 this.live_list = response.data
222
223 this.loading = false
224
225 }).catch(() => {})
226
227 },
228
229 LiveSelect(id){
230
231 this.loading = true
232
233 liveApi.LiveSelect(id).then(response => {
234
235 if(response.data.is_online == 1) {
236
237 this.live_on_line_type = true
238
239 this.live_off_line_type = false
240
241 } else if(response.data.is_online == 2) {
242
243 this.live_off_line_type = true
244
245 this.live_on_line_type = false
246
247 } else if(response.data.is_online == 3) {
248
249 this.live_on_line_type = true
250
251 this.live_off_line_type = true
252
253 }
254
255 this.loading = false
256 }).catch(() => {})
257 }
258
259 }
260 }
261 </script>
262
263
264 <style scoped>
265 .tips {
266 text-align: left;
267 vertical-align: middle;
268 font-size: 14px;
269 color: #606266;
270 padding-top: 10px;
271 }
272 .el-upload__tip {
273 margin-left: 0!important;
274 }
275 .alertText {
276 margin-top: 15px;
277 }
278 .loadingIcon{
279 margin-top: 15px;
280 }
281 .inline-input{
282 width: 300px;
283 }
284 .switch {
285 vertical-align: middle;
286 font-size: 14px;
287 color: #606266;
288 padding: 0 12px 0 0;
289 font-weight: 700;
290 }
291 </style>
效果图：
二维码：
标签：vue,false,live,二维码,qr,type,response,size 来源： https://www.cnblogs.com/G921123/p/16547316.html