nsgk_mobile/src/views/lawEnforcement/retrospect/scan.vue

<template>
  <div class="scan">
    <div class="nav">
      <a class="close" @click="() => $router.go(-1)"></a>
      <p class="title">扫一扫</p>
    </div>
    <div class="scroll-container">
      <Scaner
        v-on:code-scanned="codeScanned"
        v-on:error-captured="errorCaptured"
        :stop-on-scanned="true"
        :draw-on-found="true"
        :responsive="false"
      />
    </div>
  </div>
</template>

<script>

import Scaner from '@/components/qrcode/Scaner';
import Cookies from "js-cookie";

export default {
  name: 'Scan',
  components: {
    Scaner
  },
  data () {
    return {
      errorMessage: "",
      scanned: ""
    }
  },
  methods: {
    codeScanned(code) {
      this.scanned = code;
        alert(`扫码解析成功: ${code}`);
        Cookies.set("scanLink", code);
        this.$router.go(-1)
    },
    errorCaptured(error) {
      switch (error.name) {
        case "NotAllowedError":
          this.errorMessage = "Camera permission denied.";
          break;
        case "NotFoundError":
          this.errorMessage = "There is no connected camera.";
          break;
        case "NotSupportedError":
          this.errorMessage =
            "Seems like this page is served in non-secure context.";
          break;
        case "NotReadableError":
          this.errorMessage =
            "Couldn't access your camera. Is it already in use?";
          break;
        case "OverconstrainedError":
          this.errorMessage = "Constraints don't match any installed camera.";
          break;
        default:
          this.errorMessage = "UNKNOWN ERROR: " + error.message;
      }
      console.error(this.errorMessage);
      alert('相机调用失败');
    }
  },
  mounted () {
    var str = navigator.userAgent.toLowerCase();
    var ver = str.match(/cpu iphone os (.*?) like mac os/);
    if (ver && ver[1].replace(/_/g,".") < '10.3.3') {
     alert('相机调用失败');
    }
  }
}
</script>

<style lang="css" scoped>
.scan {
  height: 100%;
  width: 100%;
}
.scan .nav {
  height: 116px;
  background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 36px;
  line-height: 116px;
  text-align: center;
  color: #fff;
  z-index: 999;
}
.scan .nav .title {
  padding: 0;
  margin: 0;
  font-size: 16PX;
  color: #FFFFFF;
  text-align: center;
}
.scan .nav .close {
  width: 24px;
  height: 43.2px;
  background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
  background-size: 20px 36px;
  position: absolute;
  left: 38px;
  top: 36px;
}
</style>