<template>
|
<view class="container">
|
<button class="scan" @click="openQrcode">点击扫码</button>
|
<view class="reader-box" v-if="isScaning">
|
<view class="reader" id="reader"></view>
|
</view>
|
<view>扫码内容：{{scanVal}}</view>
|
</view>
|
</template>
|
<script>
|
import {
|
Html5Qrcode
|
} from "html5-qrcode";
|
export default {
|
name: 'spare',
|
watch: {
|
cur: {
|
immediate: true,
|
handler() {
|
console.log('watch', this.cur)
|
},
|
},
|
},
|
data() {
|
return {
|
html5QrCode: null,
|
isScaning: false,
|
cameraId: null,
|
scanVal: ''
|
}
|
},
|
methods: {
|
|
isValidURL(url) {
|
const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
|
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
|
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
|
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
|
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
|
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
|
return !!pattern.test(url);
|
},
|
checkURL() {
|
const url = this.scanVal;
|
if (this.isValidURL(url)) {
|
uni.openURL({
|
url: url
|
})
|
} else {
|
uni.showToast({
|
title: 'url地址错误，请重试',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
},
|
|
openQrcode() {
|
this.isScaning = true;
|
Html5Qrcode.getCameras().then((devices) => {
|
if (devices && devices.length) {
|
if (devices.length > 1) {
|
this.cameraId = devices[1].id;
|
} else {
|
this.cameraId = devices[0].id;
|
}
|
this.html5QrCode = new Html5Qrcode('reader');
|
this.startInit();
|
}
|
});
|
},
|
startInit() {
|
const that = this;
|
this.html5QrCode.start(
|
this.cameraId, // retreived in the previous step.
|
// {
|
// facingMode: "environment" // environment后置摄像头 user前置摄像头
|
// },
|
{
|
fps: 10, // sets the framerate to 10 frame per second
|
qrbox: 250 // sets only 250 X 250 region of viewfinder to
|
},
|
qrCodeMessage => {
|
uni.showModal({
|
title: 'success',
|
content: JSON.stringify(qrCodeMessage),
|
showCancel: false
|
});
|
// do something when code is read. For example:
|
if (qrCodeMessage) {
|
//成功扫出码qrCodeMessage为扫码内容
|
//扫码成功记得关掉摄像
|
that.action(qrCodeMessage) //对二维码逻辑处理
|
that.stopScan(); //关闭扫码功能
|
}
|
|
},
|
errorMessage => {
|
console.log('errorMessage', errorMessage);
|
if (errorMessage.includes('NotFoundException')) {
|
uni.showToast({
|
title: '未找到二维码，请重新对准',
|
icon: 'none',
|
duration: 2000
|
});
|
} else {
|
uni.showToast({
|
title: '扫码失败，请重试',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
|
}
|
)
|
.catch((err) => {
|
// 扫码错误信息
|
let message = "";
|
if (typeof err == "string") {
|
message = "识别失败";
|
} else {
|
if (err.name == "NotAllowedError") {
|
message = "您需要授予相机访问权限！";
|
}
|
if (err.name == "NotFoundError") {
|
message = "这个设备上没有摄像头！";
|
}
|
if (err.name == "NotSupportedError") {
|
message =
|
"摄像头访问只支持在安全的上下文中，如https或localhost！";
|
}
|
if (err.name == "NotReadableError") {
|
message = "相机被占用！";
|
}
|
if (err.name == "OverconstrainedError") {
|
message = "安装摄像头不合适！";
|
}
|
if (err.name == "StreamApiNotSupportedError") {
|
message = "此浏览器不支持流API！";
|
}
|
}
|
uni.showToast({
|
title: message,
|
icon: 'none',
|
duration: 2000
|
});
|
});
|
},
|
action(val) {
|
this.scanVal = val;
|
const url = this.scanVal;
|
this.checkURL(url)
|
|
// plus.runtime.openURL(this.scanVal, function(res) {
|
// console.log(res);
|
// });
|
},
|
stopScan() {
|
console.log('停止扫码')
|
this.isScaning = false;
|
if (this.html5QrCode) {
|
this.html5QrCode.stop()
|
.then((ignore) => {
|
console.log("停止扫码", ignore);
|
})
|
.catch((err) => {
|
console.log(err);
|
showToast("停止扫码失败");
|
});
|
}
|
},
|
|
}
|
}
|
</script>
|
|
<style>
|
.container {
|
height: 100%;
|
}
|
|
.reader-box {
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
|
.reader {
|
width: 540rpx;
|
height: 540rpx;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
</style>
|
