gx

package.json

@@ -29,6 +29,7 @@
     "nprogress": "^0.2.0",
     "opencc-js": "^1.0.5",
     "papaparse": "^5.5.2",
+    "qr-scanner": "^1.4.2",
     "qrcodejs2": "0.0.2",
     "regenerator-runtime": "^0.13.5",
     "vant": "^2.12.7",

src/components/qrScanner.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="sweep" v-if="show">
+    <video ref="video" id="reader" style="width:100%;height:auto;"></video>
+    <div class="ku-scanner">
+      <div class="ku-scanner-content">
+        <div class="ku-scanner-tooltip">
+          将二维码/条码放入框内，即自动扫描
+          {{ msg }}
+        </div>
+        <div class="ku-scanner-section">
+          <div class="ku-scanner-section-animation-line"></div>
+          <div class="ku-scanner-section-angle"></div>
+        </div>
+      </div>
+    </div>
+    <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 QrScanner from 'qr-scanner'
+export default {
+  data() {
+    return {
+      show: false,
+      scanner: null,
+      msg: ''
+      // constraints:{
+      // 	width:300,
+      // 	height:300
+      // }
+    }
+  },
+  methods: {
+    open() {
+      this.show = true
+      this.$nextTick(() => {
+        if (this.$refs.video) {
+          this.startScanner()
+        }
+      })
+    },
+    close() {
+      if (this.scanner) {
+        this.scanner.stop()
+      }
+      this.show = false
+    },
+    async startScanner() {
+      this.scanner = new QrScanner(
+        this.$refs.video,
+        result => {
+          this.$emit('success', result)
+          this.scanner.stop() // 扫描一次后停止
+          // this.close()
+        },
+        { preferredCamera: 'environment' } // 优先使用后置摄像头
+      )
+      await this.scanner.start()
+    }
+  }
+}
+</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);
+      // 扫描活动线
+      .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);
+  }
+}
+
+#reader {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: cover; /* 使视频自适应填充 */
+}
+</style>

src/views/testDetail/components/punchQRcode.vue

@@ -24,13 +24,15 @@
       </div>
     </div>
     <!-- <sweepPage ref="sweepPageRef" @success="sweepSuccess" @error="sweepError" /> -->
-    <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess" @error="sweepError" />
+    <!-- <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess" @error="sweepError" /> -->
+    <qrScanner ref="qrScannerRef" @success="sweepSuccess" />
   </div>
 </template>
 
 <script>
-import sweepPage from '@/components/sweepPage.vue'
-import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue'
+// import sweepPage from '@/components/sweepPage.vue'
+// import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue'
+import qrScanner from '@/components/qrScanner.vue'
 export default {
   props: {
     tindex: {
@@ -49,8 +51,9 @@ export default {
     }
   },
   components: {
-    sweepPage,
-    sweepPage_html5_qrcode
+    // sweepPage,
+    // sweepPage_html5_qrcode
+    qrScanner
   },
   data() {
     return {
@@ -78,18 +81,18 @@ export default {
     },
     sweepBtn() {
       // this.$refs.sweepPageRef.open()
-      this.$refs.sweepPage_html5_qrcodeRef.open()
+      this.$refs.qrScannerRef.open()
     },
     sweepSuccess(result) {
-      let _valueAndTime = this.extractValueAndTime(result)
+      const _valueAndTime = this.extractValueAndTime(result)
 
       if (!_valueAndTime) return this.$toast.fail('扫码的格式不正确')
 
-      //判断当前时间和扫码时间是否超过设置的时间
+      // 判断当前时间和扫码时间是否超过设置的时间
       if (_valueAndTime.time) {
-        let currentTime = new Date().getTime() // 获取当前时间戳
-        let checkTime = new Date(_valueAndTime.time).getTime() // 获取_valueAndTime.time的时间戳
-        let minutes = parseInt(this.checkJson.minutes) // 获取minutes对象
+        const currentTime = new Date().getTime() // 获取当前时间戳
+        const checkTime = new Date(_valueAndTime.time).getTime() // 获取_valueAndTime.time的时间戳
+        const minutes = parseInt(this.checkJson.minutes) // 获取minutes对象
 
         if (currentTime - checkTime > minutes * 60 * 1000) {
           // 超过指定分钟数的逻辑处理
@@ -102,7 +105,7 @@ export default {
       }
       console.log(_valueAndTime)
       // this.checkJson.answer2 = result;
-      this.$refs.sweepPage_html5_qrcodeRef.close()
+      this.$refs.qrScannerRef.close()
     },
     sweepError(error) {
       // this.$message.error(error)

src/views/testDetail/components/sweep.vue

@@ -12,9 +12,9 @@
         style="color: #00000099;margin-top: 5px;"
       ></div>
 
-			<div
+      <div
         class="detail"
-        v-if="checkJson.answer2 && typeof checkJson.answer2=='string'"
+        v-if="checkJson.answer2 && typeof checkJson.answer2 == 'string'"
         v-html="checkJson.answer2"
         style="color: #000000;margin-top: 5px;"
       ></div>
@@ -23,14 +23,16 @@
         <el-button type="primary" size="small" @click="sweepBtn">扫一扫</el-button>
       </div>
     </div>
-		<!-- <sweepPage ref="sweepPageRef" @success="sweepSuccess"  @error="sweepError"/> -->
-    <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess"  @error="sweepError"/>
+    <!-- <sweepPage ref="sweepPageRef" @success="sweepSuccess"  @error="sweepError"/> -->
+    <!-- <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess"  @error="sweepError"/> -->
+    <qrScanner ref="qrScannerRef" @success="sweepSuccess" />
   </div>
 </template>
 
 <script>
 // import sweepPage from '@/components/sweepPage.vue';
-import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue';
+// import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue';
+import qrScanner from '@/components/qrScanner.vue'
 export default {
   props: {
     tindex: {
@@ -48,10 +50,11 @@ export default {
       default: false
     }
   },
-	components:{
-		// sweepPage
-    sweepPage_html5_qrcode
-	},
+  components: {
+    // sweepPage
+    // sweepPage_html5_qrcode
+    qrScanner
+  },
   data() {
     return {
       option: {
@@ -59,9 +62,9 @@ export default {
       },
       userid: this.$route.query.userid,
       checkJson: {
-				title:"",
-				detail:""
-			},
+        title: '',
+        detail: ''
+      }
     }
   },
   watch: {
@@ -76,15 +79,15 @@ export default {
     depthCopy(s) {
       return JSON.parse(JSON.stringify(s))
     },
-		sweepBtn(){
-			this.$refs.sweepPage_html5_qrcodeRef.open();
-		},
-		sweepSuccess(result){
-			this.checkJson.answer2 = result;
-			this.$refs.sweepPage_html5_qrcodeRef.close();
-      this.$forceUpdate();
-		},
-    sweepError(error){
+    sweepBtn() {
+      this.$refs.qrScannerRef.open()
+    },
+    sweepSuccess(result) {
+      this.checkJson.answer2 = result
+      this.$refs.qrScannerRef.close()
+      this.$forceUpdate()
+    },
+    sweepError(error) {
       this.$toast.fail(error)
       // if (error.name === 'NotAllowedError') {
       //     this.$toast.fail('您需要授予相机访问权限')
@@ -101,7 +104,7 @@ export default {
       //   }else{
       //     this.$toast.fail(error.name)
       //   }
-    },
+    }
   },
   mounted() {
     this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined