h5页面的扫一扫

一，使用的插件：vue-qrcode-reader

官网：

https://gruhn.github.io/vue-qrcode-reader/demos/Simple.html

二，我在项目中使用;

项目代码：

<template>
  <div class="scan">
    <div class="scan-back" @click="handleBack()">
      <img :src="require('@/assets/images/qrcodeScanner-delete.png')" alt="">
    </div>
    <div class="scan-content">
      <p class="scan-error" v-if="error">{{error?'暂不支持扫一扫':''}}</p>
      <p class="scan-error" v-if="error">{{error}}</p>
      <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
    </div>
  </div>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
  name: 'qrcodeScanner',
  components: {
    QrcodeStream
  },
  data () {
    return {
      error: ''
    }
  },
  methods: {
    /**
     * 返回
     */
    handleBack () {
      this.$router.go(-1)
    },
    onDecode (result) {
      if (!result) {
        return
      }
      let params = {
        TXCODE: 'ST0074',
        qrCode: result
      }
      this.ajax('get', params, res => {
        if (res.data.SUCCESS === 'Y') {
          //对于我这个项目，应该跳转到龙支付的页面,并且将二维码得到的参数带入
          this.$notify({
            message: '应该跳转到龙支付页面',
            type: 'success', 
            duration: 500,
          });
        } else {
          this.$notify({
            message: res.data.ERRMSG,
            type: 'warning', 
            duration: 500,
          });
        }
      }, err => { console.log(err) }, this.$baseAPIs.server3rd)
    },
    async onInit (promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = "ERROR: you need to grant camera access permisson"
        } else if (error.name === 'NotFoundError') {
          this.error = "ERROR: no camera on this device"
        } else if (error.name === 'NotSupportedError') {
          this.error = "ERROR: secure context required (HTTPS, localhost)"
        } else if (error.name === 'NotReadableError') {
          this.error = "ERROR: is the camera already in use?"
        } else if (error.name === 'OverconstrainedError') {
          this.error = "ERROR: installed cameras are not suitable"
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = "ERROR: Stream API is not supported in this browser"
        }else{
          this.error=error
        }
        console.log(this.error)
      }
    }
  }
}
</script>

<style scoped>
.scan {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.scan-back {
  position: absolute;
  top: 5vw;
  left: 5vw;
  z-index: 1;
}
.scan-back img {
  width: 52px;
}
.scan-content {
  height: 100%;
}
.scan-error {
  margin-top: 10vh;
  color: #a0a0a0;
  font-size: 36px;
}
</style>