qrCode_copy.vue

<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash;    <qrcode-stream&ndash;&gt;-->
<!--    &lt;!&ndash;        v-show="qrcode"&ndash;&gt;-->
<!--    &lt;!&ndash;        :camera="camera"&ndash;&gt;-->
<!--    &lt;!&ndash;        :torch="torchActive"&ndash;&gt;-->
<!--    &lt;!&ndash;        @decode="onDecode"&ndash;&gt;-->
<!--    &lt;!&ndash;        @init="onInit"&ndash;&gt;-->
<!--    &lt;!&ndash;    >&ndash;&gt;-->
<!--    &lt;!&ndash;      <div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="qr-scanner">&ndash;&gt;-->
<!--    &lt;!&ndash;          <div class="box">&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="line"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="angle"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;          </div>&ndash;&gt;-->
<!--    &lt;!&ndash;          <div class="txt">&ndash;&gt;-->
<!--    &lt;!&ndash;            <van-button type="primary" @ style="width: 80%" @click="goBack">返回</van-button>&ndash;&gt;-->
<!--    &lt;!&ndash;          </div>&ndash;&gt;-->
<!--    &lt;!&ndash;        </div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    </qrcode-stream>&ndash;&gt;-->
<!--    <p class="error">{{ error }}11</p>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--// 下载插件-->
<!--// cnpm install &#45;&#45;save  vue-qrcode-reader-->
<!--import {getProvideUnitById} from '@/axios/api';-->
<!--import {callMobile} from '../../utils/scanUtils'-->
<!--// 引入-->
<!--import {QrcodeStream} from 'vue-qrcode-reader';-->

<!--export default {-->
<!--  // 注册-->
<!--  components: {QrcodeStream},-->
<!--  name: "qrCode",-->

<!--  data() {-->
<!--    return {-->
<!--      result: '', // 扫码结果信息-->
<!--      error: '', // 错误信息-->
<!--      show: true,-->
<!--      qrcode: true,-->
<!--      torchActive: false,-->
<!--      camera: 'rear',-->
<!--    };-->
<!--  },-->
<!--  mounted() {-->
<!--    this.scanCode()-->
<!--    let vm = this;-->
<!--    window['qrcodeContent'] = (result) => {-->
<!--      vm.subscanQRCallBack(result)-->
<!--      this.$nextTick(() => {-->
<!--        vm.$uweb.setCustomVar('医站到家扫码', '人数', 0)-->
<!--      })-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    scanCode() {-->
<!--      // let info = JSON.parse(window.sessionStorage.getItem('mobileTokenIno'))-->
<!--      // const {phone = '', userId = ''} = info-->
<!--      // let par = {telephone: phone, residentId: userId}//居民id-->
<!--      // getUserReceiveNum(par).then(({data}) => {-->
<!--      //     if (data.data == true) {//true 该用户非首次领取需要填写随访-->
<!--      //         this.$router.push(`/returnVisit`);-->
<!--      //     } else {-->
<!--      callMobile("qrcode", {});-->
<!--      //     }-->
<!--      // })-->
<!--      // this.subscanQRCallBack(111)-->
<!--    },-->

<!--    onDecode(unitId) {-->
<!--      if (!unitId) {-->
<!--        this.$toast.success('无效的二维码');-->
<!--        return;-->
<!--      }-->
<!--      getProvideUnitById(unitId).then(res => {-->
<!--        if (res.code === 'SUCCESS') {-->
<!--          if (res.data) {-->
<!--            let applyUnitInfo = {-->
<!--              unitId: res.data.id,-->
<!--              unitName: res.data.unitName,-->
<!--              unitAddress: res.data.unitAddress,-->
<!--            };-->
<!--            window.sessionStorage.setItem('applyUnitInfo', JSON.stringify(applyUnitInfo));-->
<!--            this.$router.push({path: "receiveApply"});-->
<!--          } else {-->
<!--            this.$toast.success('无效的二维码');-->
<!--          }-->
<!--        }-->
<!--        ;-->
<!--      })-->

<!--    },-->
<!--    async onInit(promise) {-->
<!--      const {capabilities} = await promise;-->
<!--      const TORCH_IS_SUPPORTED = !!capabilities.torch;-->
<!--      try {-->
<!--        await promise;-->
<!--      } catch (error) {-->
<!--        if (error.name === 'NotAllowedError') {-->
<!--          this.error = '您需要授予相机访问权限';-->
<!--        } else if (error.name === 'NotFoundError') {-->
<!--          this.error = '这个设备上没有摄像头';-->
<!--        } else if (error.name === 'NotSupportedError') {-->
<!--          this.error = '所需的安全上下文(HTTPS、本地主机)';-->
<!--        } else if (error.name === 'NotReadableError') {-->
<!--          this.error = '相机被占用';-->
<!--        } else if (error.name === 'OverconstrainedError') {-->
<!--          this.error = '安装摄像头不合适';-->
<!--        } else if (error.name === 'StreamApiNotSupportedError') {-->
<!--          this.error = 'ERROR: 此浏览器不支持流API';-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    // 打开相机-->
<!--    openCamera() {-->
<!--      this.camera = 'rear'-->
<!--      this.qrcode = true-->
<!--      this.show = true-->
<!--    },-->
<!--    // 关闭相机-->
<!--    closeCamera() {-->
<!--      this.camera = 'off'-->
<!--      this.qrcode = false-->
<!--      this.show = false-->
<!--    },-->
<!--    // 打开手电筒-->
<!--    openFlash() {-->
<!--      this.torchActive = !this.torchActive;-->
<!--    },-->
<!--    // 相机反转-->
<!--    switchCamera() {-->
<!--      // console.log(this.camera);-->
<!--      switch (this.camera) {-->
<!--        case 'front':-->
<!--          this.camera = 'rear'-->
<!--          console.log(this.camera)-->
<!--          break-->
<!--        case 'rear':-->
<!--          this.camera = 'front'-->
<!--          console.log(this.camera)-->
<!--          break-->
<!--      }-->
<!--    },-->
<!--    goBack() {-->
<!--      this.$router.push({path: "provideUnit"});-->
<!--    }-->
<!--  },-->
<!--};-->
<!--</script>-->
<!--<style scoped>-->
<!--.error {-->
<!--  font-weight: bold;-->
<!--  color: red;-->
<!--}-->

<!--.cameraMessage {-->
<!--  width: 100%;-->
<!--  height: 60px;-->
<!--}-->

<!--.qr-scanner {-->
<!--  background-image: linear-gradient(-->
<!--      0deg,-->
<!--      transparent 24%,-->
<!--      rgba(32, 255, 77, 0.1) 25%,-->
<!--      rgba(32, 255, 77, 0.1) 26%,-->
<!--      transparent 27%,-->
<!--      transparent 74%,-->
<!--      rgba(32, 255, 77, 0.1) 75%,-->
<!--      rgba(32, 255, 77, 0.1) 76%,-->
<!--      transparent 77%,-->
<!--      transparent-->
<!--  ),-->
<!--  linear-gradient(-->
<!--      90deg,-->
<!--      transparent 24%,-->
<!--      rgba(32, 255, 77, 0.1) 25%,-->
<!--      rgba(32, 255, 77, 0.1) 26%,-->
<!--      transparent 27%,-->
<!--      transparent 74%,-->
<!--      rgba(32, 255, 77, 0.1) 75%,-->
<!--      rgba(32, 255, 77, 0.1) 76%,-->
<!--      transparent 77%,-->
<!--      transparent-->
<!--  );-->
<!--  background-size: 3rem 3rem;-->
<!--  background-position: -1rem -1rem;-->
<!--  width: 100%;-->
<!--  /* height: 100%; */-->
<!--  height: 100vh;-->
<!--  /* height: 288px; */-->
<!--  position: relative;-->
<!--  background-color: #1110;-->

<!--  /* background-color: #111; */-->
<!--}-->

<!--/* .qrcode-stream-wrapper {-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  margin-top: 82px;-->
<!--  clear: both;-->
<!--} */-->
<!--/* .qrcode-stream-wrapper >>> .qrcode-stream-camera {-->
<!--  width: 213px;-->
<!--  height: 210px;-->
<!--  clear: both;-->
<!--  margin-top: 39px;-->
<!--} */-->
<!--.qr-scanner .box {-->
<!--  width: 213px;-->
<!--  height: 213px;-->
<!--  position: absolute;-->
<!--  left: 50%;-->
<!--  top: 50%;-->
<!--  transform: translate(-50%, -50%);-->
<!--  overflow: hidden;-->
<!--  border: 0.1rem solid rgba(0, 255, 51, 0.2);-->
<!--  /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */-->
<!--}-->

<!--.qr-scanner .txt {-->
<!--  width: 100%;-->
<!--  height: 35px;-->
<!--  line-height: 35px;-->
<!--  font-size: 14px;-->
<!--  text-align: center;-->
<!--  /* color: #f9f9f9; */-->
<!--  margin: 0 auto;-->
<!--  position: absolute;-->
<!--  top: 75%;-->
<!--  left: 0;-->
<!--}-->


<!--.qr-scanner .line {-->
<!--  height: calc(100% - 2px);-->
<!--  width: 100%;-->
<!--  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);-->
<!--  border-bottom: 3px solid #00ff33;-->
<!--  transform: translateY(-100%);-->
<!--  animation: radar-beam 2s infinite alternate;-->
<!--  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);-->
<!--  animation-delay: 1.4s;-->
<!--}-->

<!--.qr-scanner .box:after,-->
<!--.qr-scanner .box:before,-->
<!--.qr-scanner .angle:after,-->
<!--.qr-scanner .angle:before {-->
<!--  content: '';-->
<!--  display: block;-->
<!--  position: absolute;-->
<!--  width: 3vw;-->
<!--  height: 3vw;-->

<!--  border: 0.2rem solid transparent;-->
<!--}-->

<!--.qr-scanner .box:after,-->
<!--.qr-scanner .box:before {-->
<!--  top: 0;-->
<!--  border-top-color: #00ff33;-->
<!--}-->

<!--.qr-scanner .angle:after,-->
<!--.qr-scanner .angle:before {-->
<!--  bottom: 0;-->
<!--  border-bottom-color: #00ff33;-->
<!--}-->

<!--.qr-scanner .box:before,-->
<!--.qr-scanner .angle:before {-->
<!--  left: 0;-->
<!--  border-left-color: #00ff33;-->
<!--}-->

<!--.qr-scanner .box:after,-->
<!--.qr-scanner .angle:after {-->
<!--  right: 0;-->
<!--  border-right-color: #00ff33;-->
<!--}-->

<!--@keyframes radar-beam {-->
<!--  0% {-->
<!--    transform: translateY(-100%);-->
<!--  }-->

<!--  100% {-->
<!--    transform: translateY(0);-->
<!--  }-->
<!--}-->
<!--</style>-->