<template>
|
<div class="container">
|
<div id="reader"></div>
|
|
<div class="scan-tip">将二维码对准扫描框</div>
|
</div>
|
</template>
|
|
<script setup>
|
document.title = '扫码'
|
|
import { onMounted, ref } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { Html5Qrcode } from 'html5-qrcode'
|
|
let cameraId = ref('')
|
let devicesInfo = ref('')
|
let html5QrCode = ref(null)
|
const router = useRouter()
|
|
onMounted(() => {
|
getCameras()
|
})
|
|
onUnmounted(() => {
|
stop()
|
|
document.title = ''
|
})
|
|
const getCameras = () => {
|
Html5Qrcode.getCameras()
|
.then(devices => {
|
console.log('摄像头信息', devices)
|
if (devices && devices.length) {
|
// 如果有2个摄像头，1为前置的
|
if (devices.length > 1) {
|
cameraId.value = devices[1].id
|
} else {
|
cameraId.value = devices[0].id
|
}
|
devicesInfo.value = devices
|
// start开始扫描
|
start()
|
}
|
})
|
.catch(err => {
|
// handle err
|
console.log('获取设备信息失败', err) // 获取设备信息失败
|
})
|
}
|
|
function removeParamFromUrl (url, paramToRemove) {
|
// 分割URL和查询参数部分
|
const [baseUrl, queryString] = url.split('?')
|
|
// 如果没有查询参数，直接返回原URL
|
if (!queryString) return url
|
|
// 用 & 分割所有参数
|
const params = queryString.split('&')
|
|
// 过滤掉要删除的参数
|
const filteredParams = params.filter(param => {
|
// 获取参数名（分割第一个=之前的部分）
|
const paramName = param.split('=')[0]
|
return paramName !== paramToRemove
|
})
|
|
// 重新组合URL
|
if (filteredParams.length === 0) {
|
return baseUrl // 如果没有参数了，只返回基础URL
|
} else {
|
return baseUrl + '?' + filteredParams.join('&')
|
}
|
}
|
|
const start = () => {
|
html5QrCode = new Html5Qrcode('reader')
|
html5QrCode
|
.start(
|
// retreived in the previous step.
|
cameraId.value,
|
{
|
fps: 10, // 设置每秒多少帧
|
qrbox: { width: 250, height: 250 }, // 设置取景范围
|
aspectRatio: 1, // 宽高比
|
disableFlip: false, // 允许翻转扫描
|
},
|
(decodedText, decodedResult) => {
|
if (decodedText.includes('ztzf')) {
|
const newUrl = removeParamFromUrl(decodedText, 'from')
|
|
const transmitData = { data: { type: 'browser', data: { url: newUrl } } }
|
wx.miniProgram.navigateTo({ url: "/subPackages/browser/index?url=" + encodeURIComponent(newUrl) })
|
wx.miniProgram.postMessage(transmitData)
|
uni.postMessage(transmitData)
|
}
|
},
|
errorMessage => {
|
// parse error, ideally ignore it. For example:
|
// console.log(`QR Code no longer in front of camera.`);
|
console.log('暂无额扫描结果', errorMessage)
|
}
|
)
|
.catch(err => {
|
// Start failed, handle it. For example,
|
console.log(`Unable to start scanning, error: ${err}`)
|
})
|
}
|
const stop = () => {
|
html5QrCode
|
.stop()
|
.then(ignore => {
|
// QR Code scanning is stopped.
|
console.log('QR Code scanning stopped.', ignore)
|
})
|
.catch(err => {
|
// Stop failed, handle it.
|
console.log('Unable to stop scanning.', err)
|
})
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
background: #000;
|
z-index: 9999;
|
}
|
|
#reader {
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
}
|
|
/* 扫描提示文字 */
|
.scan-tip {
|
width: 100%;
|
position: absolute;
|
bottom: 44px;
|
left: 50%;
|
transform: translateX(-50%);
|
color: white;
|
font-size: 14px;
|
text-align: center;
|
}
|
</style>
|
