- <template>
- <div>
- <van-field label="服务商编码" right-icon="scan" placeholder="扫描二维码获取" @click-right-icon="getCameras" />
- <div class="scan" :style="{'display':isScan ? 'none' : ''}">
- <div id="qr-reader" width="400px" height="400px">
- div>
- div>
- template>
- import util from "../common/util.js";
- export default {
- data() {
- return {
- cameraId: 0,//相机id
- isScan:true,
- };
- },
- mounted() {
- this.init();
- },
- // 页面销毁周期关闭相机
- beforeDestroy() {
- this.stop();
- },
- methods: {
- init() {
- util.addJs("https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js");
- },
- // 开始扫描
- getCameras() {
- Html5Qrcode.getCameras().then(devices => {
- if(devices){
- if (devices.length==1) {
- this.cameraId = devices[0].id;
- }else{
- this.cameraId = devices[1].id;
- }
- this.start();
- }
- }).catch(err => {
- this.$notify({
- type: 'warning',
- message: '调用摄像头失败 : ' + err
- });
- });
- },
- // 启动相机
- start() {
- this.isScan = false;
- this.html5QrCode = new Html5Qrcode("qr-reader");
- this.html5QrCode.start(
- this.cameraId,
- {
- fps: 10,
- qrbox: { width: 250, height: 250 }
- },
- qrCodeMessage => {
- if (qrCodeMessage) {
- this.stop();
- }
- }
- ).catch(err => {
- console.log(`Unable to start scanning, error: ${err}`);
- });
- },
- // 关闭相机
- stop() {
- this.isScan = true;
- this.html5QrCode.stop().then(ignore => {
- console.log("QR Code scanning stopped.");
- }).catch(err => {
- console.log("Unable to stop scanning.");
- });
- },
- }
- };
- .scan{
- width: 100%;
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- overflow: hidden;
- }
- const addJs=function (url) {
- return new Promise((resolve, reject) => {
- const script = document.createElement('script')
- script.src = url
- script.type = 'text/javascript'
- document.body.appendChild(script)
- script.onload = () => {
- resolve()
- }
- })
- }
- export default {addJs}
