apply-clients 3.3.110-33 → 3.3.110-41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/dev-server.js +2 -2
- package/index.html +33 -34
- package/package.json +2 -1
- package/src/App.vue +1 -1
- package/src/applyAndroid.js +0 -1
- package/src/components/android/AreaSelect/AppQrcodeReader.vue +20 -15
- package/src/components/android/AreaSelect/AppQrcodeReader_1.vue +199 -0
- package/src/main.js +8 -8
- package/src/components/android/AreaSelect/AppQrcodeReader_2.vue +0 -104
- package/src/components/android/AreaSelect/AppQrcodeReader_3.vue +0 -62
- package/src/components/android/AreaSelect/AppQrcodeReader_4.vue +0 -282
- package/src/components/android/AreaSelect/QrcodeReader.vue +0 -74
package/build/dev-server.js
CHANGED
|
@@ -10,8 +10,8 @@ var compiler = webpack(config)
|
|
|
10
10
|
// var applyinstall = 'http://121.36.79.201:8400'
|
|
11
11
|
// var ldap = 'http://192.168.20.27:8555'
|
|
12
12
|
// var applyinstall = 'http://192.168.20.27:8555'
|
|
13
|
-
|
|
14
|
-
var ldap = 'http://192.168.20.28:8556'
|
|
13
|
+
var ldap = 'http://192.168.20.28:8400'
|
|
14
|
+
// var ldap = 'http://192.168.20.28:8556'
|
|
15
15
|
var applyinstall = 'http://127.0.0.1:8080'
|
|
16
16
|
// var applyinstall = 'http://192.168.20.28:8400'
|
|
17
17
|
var proxyTable = {
|
package/index.html
CHANGED
|
@@ -1,34 +1,33 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="zh-CN">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
|
|
7
|
-
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
|
|
8
|
-
<META HTTP-EQUIV="expires" CONTENT="0">
|
|
9
|
-
<title>周口燃气</title>
|
|
10
|
-
<script src="https://webapi.amap.com/maps?v=1.4.2&key=4889f1e58df01cb40415536c8907bf64"></script>
|
|
11
|
-
<!--引入UI组件库（1.1版本） -->
|
|
12
|
-
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
background:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
</
|
|
34
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
+
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
|
|
7
|
+
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
|
|
8
|
+
<META HTTP-EQUIV="expires" CONTENT="0">
|
|
9
|
+
<title>周口燃气</title>
|
|
10
|
+
<script src="https://webapi.amap.com/maps?v=1.4.2&key=4889f1e58df01cb40415536c8907bf64"></script>
|
|
11
|
+
<!--引入UI组件库（1.1版本） -->
|
|
12
|
+
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
|
|
13
|
+
<style media="screen">
|
|
14
|
+
/*url(./static/newmainbg.jpg)*/
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
font-size:16px !important;
|
|
18
|
+
width: 100%;
|
|
19
|
+
background: #7f8eaf no-repeat center bottom;
|
|
20
|
+
background-size: cover;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
body .loginbg {
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
background: url(./static/loginbg.jpg) no-repeat center top;
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
</head>
|
|
30
|
+
<body id="bodymain" class="themeOne">
|
|
31
|
+
<app></app>
|
|
32
|
+
</body>
|
|
33
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "apply-clients",
|
|
3
|
-
"version": "3.3.110-
|
|
3
|
+
"version": "3.3.110-41",
|
|
4
4
|
"description": "报建前端模块",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"directories": {
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"license": "ISC",
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@logicflow/core": "^0.4.3",
|
|
31
|
+
"@zxing/library": "^0.19.1",
|
|
31
32
|
"co": "4.6.0",
|
|
32
33
|
"jsencrypt": "^3.0.0-rc.1",
|
|
33
34
|
"less": "^2.7.1",
|
package/src/App.vue
CHANGED
package/src/applyAndroid.js
CHANGED
|
@@ -41,5 +41,4 @@ export default function () {
|
|
|
41
41
|
Vue.component('app-res-area-map-group', (resolve) => { require(['./components/android/AreaSelect/AppResAreaMapGroup'], resolve) })
|
|
42
42
|
// 扫描二维码
|
|
43
43
|
Vue.component('app-qrcode-reader', (resolve) => { require(['./components/android/AreaSelect/AppQrcodeReader'], resolve) })
|
|
44
|
-
Vue.component('qrcode', (resolve) => { require(['./components/android/AreaSelect/QrcodeReader'], resolve) })
|
|
45
44
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<button type="button" name="button" class="btn btn-primary" @click="scan" >开始扫码</button>
|
|
4
|
+
<div>这是扫码结果：{{ results }}</div>
|
|
5
|
+
<div>这是错误信息：{{ errors }}</div>
|
|
5
6
|
</div>
|
|
6
7
|
</template>
|
|
7
8
|
|
|
@@ -9,23 +10,27 @@
|
|
|
9
10
|
export default {
|
|
10
11
|
data() {
|
|
11
12
|
return {
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
results: "",
|
|
14
|
+
errors: ""
|
|
14
15
|
}
|
|
15
16
|
},
|
|
16
|
-
|
|
17
17
|
methods: {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
async downScan() {
|
|
19
|
+
|
|
20
|
+
},
|
|
21
|
+
scan() {
|
|
22
|
+
HostApp.__this__ = this
|
|
23
|
+
HostApp.scanCode({callback: "javascript:HostApp.__this__.scanCallback();"})
|
|
22
24
|
},
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
scanCallback() {
|
|
26
|
+
let response = HostApp.getCode()
|
|
27
|
+
this.results = response.data
|
|
28
|
+
console.log(`扫码返回值:${response}`)
|
|
29
|
+
if (response.code == 200) {
|
|
30
|
+
this.results = response.data
|
|
31
|
+
} else {
|
|
32
|
+
this.$showMessage('无法识别该条形码/二维码，请调整手机聚焦重试。')
|
|
33
|
+
}
|
|
29
34
|
}
|
|
30
35
|
}
|
|
31
36
|
}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div className="page-scan">
|
|
4
|
+
<div>这是 @zxing/library 组件实现的扫码</div>
|
|
5
|
+
<!-- <p>https://blog.csdn.net/m0_52789121/article/details/123080735?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_antiscanv2</p>-->
|
|
6
|
+
<!-- <button type="button" @click="openScan()">开始扫码</button>-->
|
|
7
|
+
<button type="button" id="startButton">开始扫码</button>
|
|
8
|
+
<!-- <button type="button" @click="openScanTwo()"></button>-->
|
|
9
|
+
<button type="button" id="resetButton">关闭扫码</button>
|
|
10
|
+
<!-- <button type="button" @click="downScan()">关闭扫码</button>-->
|
|
11
|
+
<div id="sourceSelectPanel" style="display:none">
|
|
12
|
+
<label htmlFor="sourceSelect">选择设备:</label>
|
|
13
|
+
<select id="sourceSelect" style="max-width:400px">
|
|
14
|
+
</select>
|
|
15
|
+
</div>
|
|
16
|
+
<div>这是扫码结果：{{ results }}</div>
|
|
17
|
+
<div>这是错误信息：{{ errors }}</div>
|
|
18
|
+
<!-- 扫码区域 -->
|
|
19
|
+
<video ref="video" id="video" style="width: 100%;height: auto;" autoPlay></video>
|
|
20
|
+
<!-- 提示语 -->
|
|
21
|
+
<div v-show="tipShow" className="scan-tip"> {{ tip Msg }}</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script>
|
|
27
|
+
import {BrowserMultiFormatReader} from '@zxing/library';
|
|
28
|
+
import * as ZXing from "@zxing/library";
|
|
29
|
+
|
|
30
|
+
export default {
|
|
31
|
+
name: 'ocrscan',
|
|
32
|
+
data() {
|
|
33
|
+
return {
|
|
34
|
+
loadingShow: false,
|
|
35
|
+
codeReader: null,
|
|
36
|
+
scanText: '',
|
|
37
|
+
vin: null,
|
|
38
|
+
tipMsg: '正在尝试识别....',
|
|
39
|
+
tipShow: false,
|
|
40
|
+
results: "",
|
|
41
|
+
errors: ""
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
created() {
|
|
45
|
+
let selectedDeviceId;
|
|
46
|
+
this.codeReader = new ZXing.BrowserMultiFormatReader()
|
|
47
|
+
console.log('ZXing code reader initialized')
|
|
48
|
+
this.codeReader.listVideoInputDevices()
|
|
49
|
+
.then((videoInputDevices) => {
|
|
50
|
+
const sourceSelect = document.getElementById('sourceSelect')
|
|
51
|
+
selectedDeviceId = videoInputDevices[0].deviceId
|
|
52
|
+
if (videoInputDevices.length >= 1) {
|
|
53
|
+
videoInputDevices.forEach((element) => {
|
|
54
|
+
const sourceOption = document.createElement('option')
|
|
55
|
+
sourceOption.text = element.label
|
|
56
|
+
sourceOption.value = element.deviceId
|
|
57
|
+
sourceSelect.appendChild(sourceOption)
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
sourceSelect.onchange = () => {
|
|
61
|
+
selectedDeviceId = sourceSelect.value;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const sourceSelectPanel = document.getElementById('sourceSelectPanel')
|
|
65
|
+
sourceSelectPanel.style.display = 'block'
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
document.getElementById('startButton').addEventListener('click', () => {
|
|
69
|
+
this.codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
|
|
70
|
+
if (result) {
|
|
71
|
+
console.log(result)
|
|
72
|
+
// document.getElementById('result').textContent = result.text
|
|
73
|
+
this.results = result.text
|
|
74
|
+
if (this.codeReader) {
|
|
75
|
+
this.codeReader.reset()
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
if (err && !(err instanceof ZXing.NotFoundException)) {
|
|
79
|
+
console.error(err)
|
|
80
|
+
// document.getElementById('result').textContent = err
|
|
81
|
+
this.errors = err
|
|
82
|
+
}
|
|
83
|
+
})
|
|
84
|
+
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
document.getElementById('resetButton').addEventListener('click', () => {
|
|
88
|
+
if (this.codeReader) {
|
|
89
|
+
this.codeReader.reset()
|
|
90
|
+
}
|
|
91
|
+
// document.getElementById('result').textContent = '';
|
|
92
|
+
this.results = ''
|
|
93
|
+
})
|
|
94
|
+
|
|
95
|
+
})
|
|
96
|
+
.catch((err) => {
|
|
97
|
+
this.errors = err
|
|
98
|
+
// console.error(err)
|
|
99
|
+
})
|
|
100
|
+
},
|
|
101
|
+
destroyed() {
|
|
102
|
+
if (this.codeReader) {
|
|
103
|
+
this.codeReader.reset()
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
methods: {
|
|
107
|
+
async downScan() {
|
|
108
|
+
// if (this.codeReader) {
|
|
109
|
+
// this.codeReader.reset();
|
|
110
|
+
// this.tipMsg = '摄像头已经关闭！！！！！';
|
|
111
|
+
// }
|
|
112
|
+
},
|
|
113
|
+
// async openScan() {
|
|
114
|
+
// this.codeReader = new BrowserMultiFormatReader();
|
|
115
|
+
// this.codeReader.getVideoInputDevices().then((videoInputDevices) => {
|
|
116
|
+
// this.tipShow = true;
|
|
117
|
+
// this.tipMsg = '正在调用摄像头...';
|
|
118
|
+
// console.log('videoInputDevices设备数量：', videoInputDevices);
|
|
119
|
+
// // 默认获取第一个摄像头设备id
|
|
120
|
+
// let firstDeviceId = videoInputDevices[0].deviceId;
|
|
121
|
+
// // 获取第一个摄像头设备的名称
|
|
122
|
+
// const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
|
|
123
|
+
// console.log("这是设备名称：", videoInputDeviceslablestr)
|
|
124
|
+
// console.log("这是设备名称11：", videoInputDeviceslablestr.indexOf('back'))
|
|
125
|
+
// if (videoInputDevices.length > 1) {
|
|
126
|
+
// // 判断是否后置摄像头
|
|
127
|
+
// if (videoInputDeviceslablestr.indexOf('back') > -1) {
|
|
128
|
+
// firstDeviceId = videoInputDevices[0].deviceId;
|
|
129
|
+
// } else {
|
|
130
|
+
// firstDeviceId = videoInputDevices[1].deviceId;
|
|
131
|
+
// }
|
|
132
|
+
// }
|
|
133
|
+
// this.decodeFromInputVideoFunc(firstDeviceId);
|
|
134
|
+
// }).catch(err => {
|
|
135
|
+
// this.tipShow = false;
|
|
136
|
+
// console.error(err);
|
|
137
|
+
// });
|
|
138
|
+
// },
|
|
139
|
+
// async openScanTwo() {
|
|
140
|
+
// this.codeReader = await new BrowserMultiFormatReader();
|
|
141
|
+
// this.codeReader.getVideoInputDevices().then((videoInputDevices) => {
|
|
142
|
+
// this.tipShow = true;
|
|
143
|
+
// this.tipMsg = '正在调用摄像头...';
|
|
144
|
+
// console.log('videoInputDevices', videoInputDevices);
|
|
145
|
+
// // 默认获取第一个摄像头设备id
|
|
146
|
+
// let firstDeviceId = videoInputDevices[0].deviceId;
|
|
147
|
+
// // 获取第一个摄像头设备的名称
|
|
148
|
+
// const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
|
|
149
|
+
// if (videoInputDevices.length > 1) {
|
|
150
|
+
// // 判断是否后置摄像头
|
|
151
|
+
// if (videoInputDeviceslablestr.indexOf('back') > -1) {
|
|
152
|
+
// firstDeviceId = videoInputDevices[0].deviceId;
|
|
153
|
+
// } else {
|
|
154
|
+
// firstDeviceId = videoInputDevices[1].deviceId;
|
|
155
|
+
// }
|
|
156
|
+
// }
|
|
157
|
+
// this.decodeFromInputVideoFunc(firstDeviceId);
|
|
158
|
+
// }).catch(err => {
|
|
159
|
+
// this.tipShow = false;
|
|
160
|
+
// console.error(err);
|
|
161
|
+
// });
|
|
162
|
+
// },
|
|
163
|
+
// decodeFromInputVideoFunc(firstDeviceId) {
|
|
164
|
+
// this.codeReader.reset(); // 重置
|
|
165
|
+
// this.scanText = '';
|
|
166
|
+
// this.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {
|
|
167
|
+
// this.tipMsg = '正在尝试识别...';
|
|
168
|
+
// this.scanText = '';
|
|
169
|
+
// if (result) {
|
|
170
|
+
// console.log('扫描结果', result);
|
|
171
|
+
// this.results = result
|
|
172
|
+
// this.scanText = result.text;
|
|
173
|
+
// this.downScan()//关闭摄像头
|
|
174
|
+
// console.log("ssssssss:", this.scanText)
|
|
175
|
+
// if (this.scanText) {
|
|
176
|
+
// this.tipShow = false;
|
|
177
|
+
// // 这部分接下去的代码根据需要，读者自行编写了
|
|
178
|
+
// // this.$store.commit('app/SET_SCANTEXT', result.text);
|
|
179
|
+
// // console.log('已扫描的小票列表', this.$store.getters.scanTextArr);
|
|
180
|
+
// }
|
|
181
|
+
// }
|
|
182
|
+
// if (err && !(err)) {
|
|
183
|
+
// this.tipMsg = '识别失败';
|
|
184
|
+
// setTimeout(() => {
|
|
185
|
+
// this.tipShow = false;
|
|
186
|
+
// }, 2000)
|
|
187
|
+
// console.error(err);
|
|
188
|
+
// this.errors = err
|
|
189
|
+
// }
|
|
190
|
+
// });
|
|
191
|
+
// }
|
|
192
|
+
// clickIndexLeft(){ // 返回上一页
|
|
193
|
+
// this.codeReader = null;
|
|
194
|
+
// this.$destroy()
|
|
195
|
+
// this.$router.back()
|
|
196
|
+
// }
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
</script>
|
package/src/main.js
CHANGED
|
@@ -2,23 +2,23 @@ import Vue from 'vue'
|
|
|
2
2
|
import App from './App'
|
|
3
3
|
import { all } from 'vue-client'
|
|
4
4
|
import {ldap} from 'ldap-clients'
|
|
5
|
-
|
|
6
|
-
import {systemphonegrid} from 'system-phone'
|
|
5
|
+
import {system} from 'system-clients'
|
|
6
|
+
// import {systemphonegrid} from 'system-phone'
|
|
7
7
|
import {sale} from 'sale-client'
|
|
8
8
|
import {material} from 'material-client'
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
import apply from './apply'
|
|
11
11
|
|
|
12
|
-
import applyAndroid from './applyAndroid'
|
|
12
|
+
// import applyAndroid from './applyAndroid'
|
|
13
13
|
|
|
14
14
|
all()
|
|
15
|
-
|
|
16
|
-
applyAndroid()
|
|
15
|
+
apply()
|
|
16
|
+
// applyAndroid()
|
|
17
17
|
ldap()
|
|
18
18
|
sale()
|
|
19
19
|
material()
|
|
20
|
-
|
|
21
|
-
systemphonegrid(false)
|
|
20
|
+
system(false)
|
|
21
|
+
// systemphonegrid(false)
|
|
22
22
|
|
|
23
23
|
require('system-clients/src/styles/less/bootstrap.less')
|
|
24
24
|
require('./expandcss.less')
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="qrcode">
|
|
3
|
-
<button @click="clickCode">扫描报警器二维码</button>
|
|
4
|
-
<qrcode
|
|
5
|
-
:qrcode="qrcode"
|
|
6
|
-
v-show="qrcode"
|
|
7
|
-
:camera="camera"
|
|
8
|
-
:torchActive="torchActive"
|
|
9
|
-
@switchCamera="switchCamera"
|
|
10
|
-
@ClickFlash="ClickFlash"
|
|
11
|
-
@turnCameraOff="turnCameraOff"
|
|
12
|
-
@onDecode="onDecode"
|
|
13
|
-
@onInit="onInit"
|
|
14
|
-
>
|
|
15
|
-
</qrcode>
|
|
16
|
-
</div>
|
|
17
|
-
</template>
|
|
18
|
-
<script>
|
|
19
|
-
export default {
|
|
20
|
-
data() {
|
|
21
|
-
return {
|
|
22
|
-
qrcode: false,
|
|
23
|
-
torchActive: false,
|
|
24
|
-
camera: 'off',
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
mounted() {},
|
|
28
|
-
methods: {
|
|
29
|
-
// 打开相机
|
|
30
|
-
clickCode() {
|
|
31
|
-
// camera:: 'rear'--前摄像头，'front'后摄像头，'off'关闭摄像头，会获取最后一帧显示，'auto'开始获取摄像头
|
|
32
|
-
this.qrcode = true
|
|
33
|
-
this.camera = 'rear'
|
|
34
|
-
},
|
|
35
|
-
// 扫码结果回调
|
|
36
|
-
onDecode(result) {
|
|
37
|
-
// result, 扫描结果
|
|
38
|
-
console.log(result)
|
|
39
|
-
this.$parent.$parent.onetomany.fields.forEach(item => {
|
|
40
|
-
if (item.label === '材料编号') {
|
|
41
|
-
item.value = result
|
|
42
|
-
}
|
|
43
|
-
})
|
|
44
|
-
console.log("这是打印值:", result)
|
|
45
|
-
this.turnCameraOff()
|
|
46
|
-
},
|
|
47
|
-
// 相机反转
|
|
48
|
-
switchCamera() {
|
|
49
|
-
switch (this.camera) {
|
|
50
|
-
case 'front':
|
|
51
|
-
this.camera = 'rear'
|
|
52
|
-
break
|
|
53
|
-
case 'rear':
|
|
54
|
-
this.camera = 'front'
|
|
55
|
-
break
|
|
56
|
-
default:
|
|
57
|
-
this.$toast('错误')
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
// 关闭相机
|
|
61
|
-
turnCameraOff() {
|
|
62
|
-
this.camera = 'off'
|
|
63
|
-
this.qrcode = false
|
|
64
|
-
},
|
|
65
|
-
// 打开手电筒
|
|
66
|
-
ClickFlash() {
|
|
67
|
-
switch (this.torchActive) {
|
|
68
|
-
case true:
|
|
69
|
-
this.torchActive = false
|
|
70
|
-
break
|
|
71
|
-
case false:
|
|
72
|
-
this.torchActive = true
|
|
73
|
-
break
|
|
74
|
-
default:
|
|
75
|
-
this.$toast('错误')
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
|
|
79
|
-
// 检查是否调用摄像头
|
|
80
|
-
async onInit(promise) {
|
|
81
|
-
try {
|
|
82
|
-
await promise
|
|
83
|
-
} catch (error) {
|
|
84
|
-
if (error.name === 'StreamApiNotSupportedError') {
|
|
85
|
-
this.errorMessage = 'ERROR: 此浏览器不支持流API'
|
|
86
|
-
} else if (error.name === 'NotAllowedError') {
|
|
87
|
-
this.errorMessage = 'ERROR: 您需要授予相机访问权限'
|
|
88
|
-
} else if (error.name === 'NotFoundError') {
|
|
89
|
-
this.errorMessage = 'ERROR: 这个设备上没有摄像头'
|
|
90
|
-
} else if (error.name === 'NotSupportedError') {
|
|
91
|
-
this.errorMessage = 'ERROR: 所需的安全上下文(HTTPS、本地主机)'
|
|
92
|
-
} else if (error.name === 'NotReadableError') {
|
|
93
|
-
this.errorMessage = "ERROR: 相机被占用"
|
|
94
|
-
} else if (error.name === 'OverconstrainedError') {
|
|
95
|
-
this.errorMessage = "ERROR: 安装摄像头不合适"
|
|
96
|
-
} else {
|
|
97
|
-
this.errorMessage = 'UNKNOWN ERROR: ' + error.message
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
</script>
|
|
104
|
-
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<p class="error">{{ error }}</p>
|
|
4
|
-
|
|
5
|
-
<p class="decode-result">Last result: <b>{{ result }}</b></p>
|
|
6
|
-
|
|
7
|
-
<qrcode-stream @decode="onDecode" @init="onInit" ></qrcode-stream>
|
|
8
|
-
</div>
|
|
9
|
-
</template>
|
|
10
|
-
|
|
11
|
-
<script>
|
|
12
|
-
import { QrcodeStream } from 'vue-qrcode-reader'
|
|
13
|
-
|
|
14
|
-
export default {
|
|
15
|
-
|
|
16
|
-
components: { QrcodeStream },
|
|
17
|
-
|
|
18
|
-
data () {
|
|
19
|
-
return {
|
|
20
|
-
result: '',
|
|
21
|
-
error: ''
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
methods: {
|
|
26
|
-
onDecode (result) {
|
|
27
|
-
this.result = result
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
async onInit (promise) {
|
|
31
|
-
try {
|
|
32
|
-
await promise
|
|
33
|
-
} catch (error) {
|
|
34
|
-
if (error.name === 'NotAllowedError') {
|
|
35
|
-
this.error = "ERROR: you need to grant camera access permission"
|
|
36
|
-
} else if (error.name === 'NotFoundError') {
|
|
37
|
-
this.error = "ERROR: no camera on this device"
|
|
38
|
-
} else if (error.name === 'NotSupportedError') {
|
|
39
|
-
this.error = "ERROR: secure context required (HTTPS, localhost)"
|
|
40
|
-
} else if (error.name === 'NotReadableError') {
|
|
41
|
-
this.error = "ERROR: is the camera already in use?"
|
|
42
|
-
} else if (error.name === 'OverconstrainedError') {
|
|
43
|
-
this.error = "ERROR: installed cameras are not suitable"
|
|
44
|
-
} else if (error.name === 'StreamApiNotSupportedError') {
|
|
45
|
-
this.error = "ERROR: Stream API is not supported in this browser"
|
|
46
|
-
} else if (error.name === 'InsecureContextError') {
|
|
47
|
-
this.error = 'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.';
|
|
48
|
-
} else {
|
|
49
|
-
this.error = `ERROR: Camera error (${error.name})`;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
</script>
|
|
56
|
-
|
|
57
|
-
<style scoped>
|
|
58
|
-
.error {
|
|
59
|
-
font-weight: bold;
|
|
60
|
-
color: red;
|
|
61
|
-
}
|
|
62
|
-
</style>
|
|
@@ -1,282 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<!-- <p class="error">{{ error }}</p> -->
|
|
4
|
-
<!--错误信息-->
|
|
5
|
-
|
|
6
|
-
<!-- <p class="decode-result">
|
|
7
|
-
扫描结果:
|
|
8
|
-
<b>{{ result }}</b>
|
|
9
|
-
</p> -->
|
|
10
|
-
<!--扫描结果-->
|
|
11
|
-
<button class="btn btn-primary" type="button" @click="openCamera">打开相机</button>
|
|
12
|
-
<button class="btn btn-danger" type="button" @click="closeCamera">关闭相机</button>
|
|
13
|
-
<!--<div v-show="show" class="cameraMessage">-->
|
|
14
|
-
<!-- <p @click="closeCamera">关闭相机</p>-->
|
|
15
|
-
<!-- <p @click="openFlash">打开手电筒</p>-->
|
|
16
|
-
<!-- <p @click="switchCamera">相机反转</p>-->
|
|
17
|
-
<!--</div>-->
|
|
18
|
-
|
|
19
|
-
<qrcode-stream
|
|
20
|
-
v-show="qrcode"
|
|
21
|
-
:camera="camera"
|
|
22
|
-
:torch="torchActive"
|
|
23
|
-
@decode="onDecode"
|
|
24
|
-
@init="onInit"
|
|
25
|
-
>
|
|
26
|
-
<div v-show="qrcode">
|
|
27
|
-
<div class="qr-scanner">
|
|
28
|
-
<div class="box">
|
|
29
|
-
<div class="line"></div>
|
|
30
|
-
<div class="angle"></div>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="txt">
|
|
33
|
-
将二维码/条码放入框内，即自动扫描
|
|
34
|
-
<div class="myQrcode"></div>
|
|
35
|
-
</div>
|
|
36
|
-
</div>
|
|
37
|
-
</div>
|
|
38
|
-
</qrcode-stream>
|
|
39
|
-
</div>
|
|
40
|
-
</template>
|
|
41
|
-
|
|
42
|
-
<script>
|
|
43
|
-
// 下载插件
|
|
44
|
-
// cnpm install --save vue-qrcode-reader
|
|
45
|
-
|
|
46
|
-
// 引入
|
|
47
|
-
import {QrcodeStream} from 'vue-qrcode-reader';
|
|
48
|
-
|
|
49
|
-
export default {
|
|
50
|
-
// 注册
|
|
51
|
-
components: {QrcodeStream},
|
|
52
|
-
|
|
53
|
-
data() {
|
|
54
|
-
return {
|
|
55
|
-
result: '', // 扫码结果信息
|
|
56
|
-
error: '', // 错误信息
|
|
57
|
-
show: false,
|
|
58
|
-
qrcode: false,
|
|
59
|
-
// qrcode: true,
|
|
60
|
-
torchActive: false,
|
|
61
|
-
camera: 'front',// camera:: 'rear'--前摄像头，'front'后摄像头，'off'关闭摄像头，会获取最后一帧显示，'auto'开始获取摄像头
|
|
62
|
-
};
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
methods: {
|
|
66
|
-
onDecode(result) {
|
|
67
|
-
console.log(result);
|
|
68
|
-
this.result = result;
|
|
69
|
-
this.closeCamera();
|
|
70
|
-
},
|
|
71
|
-
async onInit(promise) {
|
|
72
|
-
console.log("这是进来了33333333")
|
|
73
|
-
const {capabilities} = await promise;
|
|
74
|
-
|
|
75
|
-
const TORCH_IS_SUPPORTED = !!capabilities.torch;
|
|
76
|
-
try {
|
|
77
|
-
await promise;
|
|
78
|
-
} catch (error) {
|
|
79
|
-
if (error.name === 'NotAllowedError') {
|
|
80
|
-
this.error = 'ERROR: 您需要授予相机访问权限';
|
|
81
|
-
} else if (error.name === 'NotFoundError') {
|
|
82
|
-
this.error = 'ERROR: 这个设备上没有摄像头';
|
|
83
|
-
} else if (error.name === 'NotSupportedError') {
|
|
84
|
-
this.error = 'ERROR: 所需的安全上下文(HTTPS、本地主机)';
|
|
85
|
-
} else if (error.name === 'NotReadableError') {
|
|
86
|
-
this.error = 'ERROR: 相机被占用';
|
|
87
|
-
} else if (error.name === 'OverconstrainedError') {
|
|
88
|
-
this.error = 'ERROR: 安装摄像头不合适';
|
|
89
|
-
} else if (error.name === 'StreamApiNotSupportedError') {
|
|
90
|
-
this.error = 'ERROR: 此浏览器不支持流API';
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
// // // 打开相机
|
|
95
|
-
openCamera() {
|
|
96
|
-
this.camera = 'front'
|
|
97
|
-
this.qrcode = true
|
|
98
|
-
// this.show = true
|
|
99
|
-
},
|
|
100
|
-
// // 关闭相机
|
|
101
|
-
closeCamera() {
|
|
102
|
-
this.camera = 'off'
|
|
103
|
-
this.qrcode = false
|
|
104
|
-
// this.show = false
|
|
105
|
-
},
|
|
106
|
-
// 打开手电筒
|
|
107
|
-
// openFlash() {
|
|
108
|
-
// switch (this.torchActive) {
|
|
109
|
-
// case true:
|
|
110
|
-
// this.torchActive = false
|
|
111
|
-
// break
|
|
112
|
-
// case false:
|
|
113
|
-
// this.torchActive = true
|
|
114
|
-
// break
|
|
115
|
-
// }
|
|
116
|
-
// },
|
|
117
|
-
// 相机反转
|
|
118
|
-
// switchCamera() {
|
|
119
|
-
// // console.log(this.camera);
|
|
120
|
-
// switch (this.camera) {
|
|
121
|
-
// case 'front':
|
|
122
|
-
// this.camera = 'rear'
|
|
123
|
-
// console.log(this.camera)
|
|
124
|
-
// break
|
|
125
|
-
// case 'rear':
|
|
126
|
-
// this.camera = 'front'
|
|
127
|
-
// console.log(this.camera)
|
|
128
|
-
// break
|
|
129
|
-
// }
|
|
130
|
-
// }
|
|
131
|
-
},
|
|
132
|
-
};
|
|
133
|
-
</script>
|
|
134
|
-
<style scoped>
|
|
135
|
-
.error {
|
|
136
|
-
font-weight: bold;
|
|
137
|
-
color: red;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.cameraMessage {
|
|
141
|
-
width: 100%;
|
|
142
|
-
height: 60px;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.qr-scanner {
|
|
146
|
-
background-image: linear-gradient(
|
|
147
|
-
0deg,
|
|
148
|
-
transparent 24%,
|
|
149
|
-
rgba(32, 255, 77, 0.1) 25%,
|
|
150
|
-
rgba(32, 255, 77, 0.1) 26%,
|
|
151
|
-
transparent 27%,
|
|
152
|
-
transparent 74%,
|
|
153
|
-
rgba(32, 255, 77, 0.1) 75%,
|
|
154
|
-
rgba(32, 255, 77, 0.1) 76%,
|
|
155
|
-
transparent 77%,
|
|
156
|
-
transparent
|
|
157
|
-
),
|
|
158
|
-
linear-gradient(
|
|
159
|
-
90deg,
|
|
160
|
-
transparent 24%,
|
|
161
|
-
rgba(32, 255, 77, 0.1) 25%,
|
|
162
|
-
rgba(32, 255, 77, 0.1) 26%,
|
|
163
|
-
transparent 27%,
|
|
164
|
-
transparent 74%,
|
|
165
|
-
rgba(32, 255, 77, 0.1) 75%,
|
|
166
|
-
rgba(32, 255, 77, 0.1) 76%,
|
|
167
|
-
transparent 77%,
|
|
168
|
-
transparent
|
|
169
|
-
);
|
|
170
|
-
background-size: 3rem 3rem;
|
|
171
|
-
background-position: -1rem -1rem;
|
|
172
|
-
width: 100%;
|
|
173
|
-
/* height: 100%; */
|
|
174
|
-
height: 100vh;
|
|
175
|
-
/* height: 288px; */
|
|
176
|
-
position: relative;
|
|
177
|
-
background-color: #1110;
|
|
178
|
-
|
|
179
|
-
/* background-color: #111; */
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
/* .qrcode-stream-wrapper {
|
|
183
|
-
display: flex;
|
|
184
|
-
justify-content: center;
|
|
185
|
-
align-items: center;
|
|
186
|
-
margin-top: 82px;
|
|
187
|
-
clear: both;
|
|
188
|
-
} */
|
|
189
|
-
/* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
|
|
190
|
-
width: 213px;
|
|
191
|
-
height: 210px;
|
|
192
|
-
clear: both;
|
|
193
|
-
margin-top: 39px;
|
|
194
|
-
} */
|
|
195
|
-
.qr-scanner .box {
|
|
196
|
-
width: 213px;
|
|
197
|
-
height: 213px;
|
|
198
|
-
position: absolute;
|
|
199
|
-
left: 50%;
|
|
200
|
-
top: 50%;
|
|
201
|
-
transform: translate(-50%, -50%);
|
|
202
|
-
overflow: hidden;
|
|
203
|
-
border: 0.1rem solid rgba(0, 255, 51, 0.2);
|
|
204
|
-
/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.qr-scanner .txt {
|
|
208
|
-
width: 100%;
|
|
209
|
-
height: 35px;
|
|
210
|
-
line-height: 35px;
|
|
211
|
-
font-size: 14px;
|
|
212
|
-
text-align: center;
|
|
213
|
-
/* color: #f9f9f9; */
|
|
214
|
-
margin: 0 auto;
|
|
215
|
-
position: absolute;
|
|
216
|
-
top: 70%;
|
|
217
|
-
left: 0;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.qr-scanner .myQrcode {
|
|
221
|
-
text-align: center;
|
|
222
|
-
color: #00ae10;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.qr-scanner .line {
|
|
226
|
-
height: calc(100% - 2px);
|
|
227
|
-
width: 100%;
|
|
228
|
-
background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
|
|
229
|
-
border-bottom: 3px solid #00ff33;
|
|
230
|
-
transform: translateY(-100%);
|
|
231
|
-
animation: radar-beam 2s infinite alternate;
|
|
232
|
-
animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
|
|
233
|
-
animation-delay: 1.4s;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.qr-scanner .box:after,
|
|
237
|
-
.qr-scanner .box:before,
|
|
238
|
-
.qr-scanner .angle:after,
|
|
239
|
-
.qr-scanner .angle:before {
|
|
240
|
-
content: '';
|
|
241
|
-
display: block;
|
|
242
|
-
position: absolute;
|
|
243
|
-
width: 3vw;
|
|
244
|
-
height: 3vw;
|
|
245
|
-
|
|
246
|
-
border: 0.2rem solid transparent;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.qr-scanner .box:after,
|
|
250
|
-
.qr-scanner .box:before {
|
|
251
|
-
top: 0;
|
|
252
|
-
border-top-color: #00ff33;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.qr-scanner .angle:after,
|
|
256
|
-
.qr-scanner .angle:before {
|
|
257
|
-
bottom: 0;
|
|
258
|
-
border-bottom-color: #00ff33;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.qr-scanner .box:before,
|
|
262
|
-
.qr-scanner .angle:before {
|
|
263
|
-
left: 0;
|
|
264
|
-
border-left-color: #00ff33;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
.qr-scanner .box:after,
|
|
268
|
-
.qr-scanner .angle:after {
|
|
269
|
-
right: 0;
|
|
270
|
-
border-right-color: #00ff33;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
@keyframes radar-beam {
|
|
274
|
-
0% {
|
|
275
|
-
transform: translateY(-100%);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
100% {
|
|
279
|
-
transform: translateY(0);
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
</style>
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="qrcode">
|
|
3
|
-
<div class="code">
|
|
4
|
-
<!-- decode是扫描结果的函数，torch用于是否需要打开手电筒，init用于检查该设备是否能够调用摄像头的权限，camera可用于打开前面或者后面摄像头 -->
|
|
5
|
-
<qrcode-drop-zone @decode="onDecode">
|
|
6
|
-
<qrcode-stream @decode="onDecode" :torch="torchActive" @init="onInit" :camera="camera" ></qrcode-stream>
|
|
7
|
-
</qrcode-drop-zone>
|
|
8
|
-
<div class="code-button">
|
|
9
|
-
<!--<button @click="switchCamera">相机反转</button>-->
|
|
10
|
-
<!--<button @click="ClickFlash">打开手电筒</button>-->
|
|
11
|
-
<button @click="turnCameraOff">关闭相机</button>
|
|
12
|
-
</div>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<script>
|
|
18
|
-
// 引用vue-qrcode-reader插件
|
|
19
|
-
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
|
|
20
|
-
|
|
21
|
-
export default {
|
|
22
|
-
name: 'Approve',
|
|
23
|
-
props: {
|
|
24
|
-
camera: {
|
|
25
|
-
type: String,
|
|
26
|
-
default: 'rear'
|
|
27
|
-
},
|
|
28
|
-
torchActive: {
|
|
29
|
-
type: Boolean,
|
|
30
|
-
default: false
|
|
31
|
-
},
|
|
32
|
-
qrcode: {
|
|
33
|
-
type: Boolean,
|
|
34
|
-
default: false
|
|
35
|
-
},
|
|
36
|
-
noStreamApiSupport: {
|
|
37
|
-
type: Boolean,
|
|
38
|
-
default: false
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
data() {
|
|
42
|
-
return {}
|
|
43
|
-
},
|
|
44
|
-
created() {},
|
|
45
|
-
components: {
|
|
46
|
-
// 注册组件
|
|
47
|
-
QrcodeStream,
|
|
48
|
-
QrcodeDropZone,
|
|
49
|
-
QrcodeCapture
|
|
50
|
-
},
|
|
51
|
-
methods: {
|
|
52
|
-
// 扫码结果回调
|
|
53
|
-
onDecode(result) {
|
|
54
|
-
this.$emit('onDecode', result)
|
|
55
|
-
},
|
|
56
|
-
// 相机反转
|
|
57
|
-
switchCamera() {
|
|
58
|
-
this.$emit('switchCamera')
|
|
59
|
-
},
|
|
60
|
-
// 关闭相机？？？？？？
|
|
61
|
-
turnCameraOff() {
|
|
62
|
-
this.$emit('turnCameraOff')
|
|
63
|
-
},
|
|
64
|
-
// 打开手电筒
|
|
65
|
-
ClickFlash() {
|
|
66
|
-
this.$emit('ClickFlash')
|
|
67
|
-
},
|
|
68
|
-
// 检查是否调用摄像头
|
|
69
|
-
onInit(promise) {
|
|
70
|
-
this.$emit('onInit', promise)
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
</script>
|