pbl-app/src/components/sweepPage.vue

<template>
  <div class="sweep" v-if="show">
    <QrcodeStream
      class="ku-scanner"
      ref="QrcodeStreamRef"
      v-if="show"
      :constraints="{ facingMode: { ideal: 'environment' } }"
      :camera="camera"
      :torch="torchActive"
      :zoom="1"
      :key="cameraKey"
      @decode="onDecode"
      @init="onInit"
    >
      <div class="ku-scanner-content">
        <div class="ku-scanner-tooltip">
          将二维码/条码放入框内，即自动扫描
        </div>
        <div class="ku-scanner-section">
          <div class="ku-scanner-section-animation-line"></div>
          <div class="ku-scanner-section-angle"></div>
        </div>
      </div>
    </QrcodeStream>
    <span class="closeBtn" @click="close">
      <svg
        t="1733477770331"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4265"
        width="64"
        height="64"
      >
        <path
          d="M623.807 528.693a113.756 113.756 0 0 0-0.139-33.126l252.787-252.692c26.245-26.236 26.245-68.772 0-95.006-26.248-26.236-68.798-26.236-95.043 0L528.281 400.902c-5.296-0.762-10.708-1.164-16.216-1.164s-10.92 0.402-16.216 1.164l-253.13-253.031c-26.245-26.236-68.796-26.236-95.043 0-26.245 26.234-26.245 68.77 0 95.006l252.789 252.692a113.726 113.726 0 0 0-0.14 33.124L147.676 781.247c-26.245 26.236-26.245 68.77 0 95.006 26.248 26.236 68.798 26.236 95.043 0L494.85 624.218c5.613 0.859 11.362 1.305 17.215 1.305s11.602-0.446 17.215-1.305l252.13 252.035c26.245 26.236 68.796 26.236 95.043 0 26.245-26.236 26.245-68.77 0-95.006L623.807 528.693z"
          fill="#000000"
          p-id="4266"
        ></path>
        <path
          d="M512.063 444.326c37.407 0 67.73 30.327 67.73 67.736 0 37.41-30.323 67.735-67.73 67.735-37.405 0-67.728-30.325-67.728-67.735 0.001-37.408 30.323-67.736 67.728-67.736z"
          fill="#000000"
          p-id="4267"
        ></path>
      </svg>
    </span>
  </div>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
  components: {
    QrcodeStream
  },
  data() {
    return {
      show: false,
      camera: 'auto', //front auto environment
      torchActive: false,
      flag: 0,
      paused: true,
      cameraKey: 'qgt'
      // constraints:{
      // 	width:300,
      // 	height:300
      // }
    }
  },
  methods: {
    open() {
      this.cameraKey = new Date().getTime()
      this.show = true
      // setTimeout(()=>{
      //   this.$emit('success', "功能测试2503261429")
      // },1000)
    },
    stopCamera() {
      const video = document.querySelector('video')
      if (video && video.srcObject) {
        const stream = video.srcObject
        const tracks = stream.getTracks()
        tracks.forEach(track => track.stop())
        video.srcObject = null
      }
    },
    close() {
      this.stopCamera()
      this.show = false
    },
    onDecode(result) {
      this.$emit('success', result)
      // this.$toast(result)
    },
    async onInit(promise) {
      try {
        const { capabilities } = await promise
        const TORCH_IS_SUPPORTED = !!capabilities.torch
        console.log('TORCH_IS_SUPPORTED', TORCH_IS_SUPPORTED)
        await promise
      } catch (error) {
        this.$emit('error', error)
        this.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sweep {
  width: 100vw;
  height: 100vh;
  z-index: 9990;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
}

.closeBtn {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 20px;
  border-radius: 50%;
  background-color: #ffffff80;
  right: 20px;
  z-index: 9992;
  box-sizing: border-box;
  padding: 10px;
  svg {
    width: 100%;
    height: 100%;
  }
}

.ku-scanner {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9991;
  display: flex;
  justify-content: center;
  align-items: center;
  .ku-scanner-content {
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(18, 18, 18, 0);
    margin: auto;
    // 提示信息
    .ku-scanner-tooltip {
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      text-align: center; /* color: #f9f9f9; */
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 0;
      color: #ffffff;
    }
    .ku-scanner-section {
      width: 213px;
      height: 213px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      border: 0.1rem solid rgba(86, 247, 118, 0.301);
      // // 装饰角
      // &:after {
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   width: 12px;
      //   height: 12px;
      //   border: 0.2rem solid transparent;
      //   top: 0;
      //   border-top-color: #2ffc58;
      //   right: 0;
      //   border-right-color: #2ffc58;
      // }
      // &:before {
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   width: 12px;
      //   height: 12px;
      //   border: 0.2rem solid transparent;
      //   top: 0;
      //   border-top-color: #2ffc58;
      //   left: 0;
      //   border-left-color: #2ffc58;
      // }
      // // 装饰角
      // .ku-scanner-section-angle {
      //   &:after {
      //     content: '';
      //     display: block;
      //     position: absolute;
      //     width: 12px;
      //     height: 12px;
      //     border: 0.2rem solid transparent;
      //     bottom: 0;
      //     border-bottom-color: #2ffc58;
      //     right: 0;
      //     border-right-color: #2ffc58;
      //   }
      //   &:before {
      //     content: '';
      //     display: block;
      //     position: absolute;
      //     width: 12px;
      //     height: 12px;
      //     border: 0.2rem solid transparent;
      //     bottom: 0;
      //     border-bottom-color: #2ffc58;
      //     left: 0;
      //     border-left-color: #2ffc58;
      //   }
      // }
      // 扫描活动线
      .ku-scanner-section-animation-line {
        height: calc(100% - 2px);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #2ffc58 211%);
        border-bottom: 3px solid #2ffc58;
        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;
      }
    }
  }
}
// 扫描活动线--上下 动画
@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

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