标签：vue false live 二维码 qr type response size
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。