gxgx

package.json

@@ -59,6 +59,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
+    "html5-qrcode": "^2.3.8",
     "node-sass": "^4.14.1",
     "postcss-pxtorem": "^4.0.1",
     "prettier": "^1.19.1",

src/components/sweepPage.vue

@@ -60,7 +60,8 @@ export default {
       camera: 'auto', //front auto environment
       torchActive: false,
       flag: 0,
-      paused: true
+      paused: true,
+      cameraKey: 'qgt'
       // constraints:{
       // 	width:300,
       // 	height:300
@@ -85,7 +86,7 @@ export default {
       }
     },
     close() {
-      this.stopCamera();
+      this.stopCamera()
       this.show = false
     },
     onDecode(result) {

src/components/sweepPage_html5_qrcode.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="sweep" v-if="show">
+    <div id="reader" class="ku-scanner" style="width: 100vw;height: 100vh;position: relative;">
+      <div class="ku-scanner-content">
+        <div class="ku-scanner-tooltip">
+          将二维码/条码放入框内，即自动扫描{{ camerasList }}
+          {{ 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>
+    <!-- <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 { Html5QrcodeScanner } from 'html5-qrcode'
+import { Html5Qrcode } from 'html5-qrcode'
+export default {
+  data() {
+    return {
+      show: false,
+      cameras: null,
+      camerasList: [],
+      msg: ''
+      // constraints:{
+      // 	width:300,
+      // 	height:300
+      // }
+    }
+  },
+  methods: {
+    open() {
+      this.show = true
+      this.$nextTick(() => {
+        this.startCameras()
+        // this.getCamerasList()
+      })
+      // setTimeout(()=>{
+      //   this.$emit('success', "功能测试2503261429")
+      // },1000)
+    },
+    getCamerasList() {
+      Html5Qrcode.getCameras()
+        .then(devices => {
+          /**
+           * devices would be an array of objects of type:
+           * { id: "id", label: "label" }
+           */
+          if (devices && devices.length) {
+            // var cameraId = devices[0].id
+            this.camerasList = devices
+            this.$message.info(JSON.stringify(devices))
+            this.startCameras()
+            // .. use this to start scanning.
+          }
+        })
+        .catch(err => {
+          // handle err
+          console.log(err)
+          this.msg = err
+        })
+    },
+    startCameras() {
+      // if (this.camerasList.length <= 0) {
+      //   this.$emit('error', '未找到相机')
+      //   return
+      // }
+      // const html5QrCode = new Html5Qrcode('reader')
+      // html5QrCode
+      //   .start(
+      //     this.camerasList[0].id,
+      //     { fps: 10 },
+      //     (decodedText, decodedResult) => {
+      //       // do something when code is read
+      //       this.msg += decodedText + '👈'
+      //       this.msg += decodedResult + '?👈'
+      //       this.$emit('success', decodedText)
+      //     },
+      //     errorMessage => {
+      //       this.msg += errorMessage
+      //       this.$emit('error', errorMessage)
+      //       // parse error, ignore it.
+      //     }
+      //   )
+      //   .catch(err => {
+      //     this.msg += err
+      //   })
+      this.cameras = new Html5Qrcode('reader')
+      this.cameras.start({ facingMode: { exact: 'environment' } }, { fps: 10 }, this.CamerasSuccess)
+    },
+    CamerasSuccess(decodedText, decodedResult) {
+      console.log(decodedResult)
+      this.$emit('success', decodedText)
+    },
+    // 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.camerasList = []
+      if (this.cameras) {
+        this.cameras
+          .stop()
+          .then(ignore => {
+            this.cameras = null
+            // QR Code scanning is stopped.
+          })
+          .catch(err => {
+            // Stop failed, handle it.
+            this.msg = err
+            this.cameras = null
+          })
+      }
+      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>

src/views/testDetail/components/punchQRcode.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,12 +23,14 @@
         <el-button type="primary" size="small" @click="sweepBtn">扫一扫</el-button>
       </div>
     </div>
-		<sweepPage ref="sweepPageRef" @success="sweepSuccess" @error="sweepError"/>
+    <!-- <sweepPage ref="sweepPageRef" @success="sweepSuccess" @error="sweepError" /> -->
+    <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess" @error="sweepError" />
   </div>
 </template>
 
 <script>
-import sweepPage from '@/components/sweepPage.vue';
+import sweepPage from '@/components/sweepPage.vue'
+import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue'
 export default {
   props: {
     tindex: {
@@ -46,9 +48,10 @@ export default {
       default: false
     }
   },
-	components:{
-		sweepPage
-	},
+  components: {
+    sweepPage,
+    sweepPage_html5_qrcode
+  },
   data() {
     return {
       option: {
@@ -56,9 +59,9 @@ export default {
       },
       userid: this.$route.query.userid,
       checkJson: {
-				title:"",
-				detail:""
-			},
+        title: '',
+        detail: ''
+      }
     }
   },
   watch: {
@@ -73,101 +76,95 @@ export default {
     depthCopy(s) {
       return JSON.parse(JSON.stringify(s))
     },
-		sweepBtn(){
-			this.$refs.sweepPageRef.open();
-		},
-		sweepSuccess(result){
-      let _valueAndTime = this.extractValueAndTime(result);
+    sweepBtn() {
+      // this.$refs.sweepPageRef.open()
+      this.$refs.sweepPage_html5_qrcodeRef.open()
+    },
+    sweepSuccess(result) {
+      let _valueAndTime = this.extractValueAndTime(result)
 
-      if(!_valueAndTime)return this.$toast.fail("扫码的格式不正确");
+      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对象
-
-		    if ((currentTime - checkTime) > minutes * 60 * 1000) {
-		    	// 超过指定分钟数的逻辑处理
-		    	this.$toast.fail("该二维码已失效")
-		    } else {
-		    	// 在限制时间内的逻辑处理
-		    	this.checkJson.answer2 = _valueAndTime.value;
-          this.checkJson.codeScanningTime = _valueAndTime.time;
-		    }
+      if (_valueAndTime.time) {
+        let currentTime = new Date().getTime() // 获取当前时间戳
+        let checkTime = new Date(_valueAndTime.time).getTime() // 获取_valueAndTime.time的时间戳
+        let minutes = parseInt(this.checkJson.minutes) // 获取minutes对象
+
+        if (currentTime - checkTime > minutes * 60 * 1000) {
+          // 超过指定分钟数的逻辑处理
+          this.$toast.fail('该二维码已失效')
+        } else {
+          // 在限制时间内的逻辑处理
+          this.checkJson.answer2 = _valueAndTime.value
+          this.checkJson.codeScanningTime = _valueAndTime.time
+        }
       }
       console.log(_valueAndTime)
-			// this.checkJson.answer2 = result;
-			this.$refs.sweepPageRef.close();
-		},
-    sweepError(error){
-      if (error.name === 'NotAllowedError') {
-          this.$toast.fail('您需要授予相机访问权限')
-        } else if (error.name === 'NotFoundError') {
-          this.$toast.fail('这个设备上没有摄像头')
-        } else if (error.name === 'NotSupportedError') {
-          this.$toast.fail('所需的安全上下文(HTTPS、本地主机)')
-        } else if (error.name === 'NotReadableError') {
-          this.$toast.fail('相机被占用')
-        } else if (error.name === 'OverconstrainedError') {
-          this.$toast.fail('安装摄像头不合适')
-        } else if (error.name === 'StreamApiNotSupportedError') {
-          this.$toast.fail('此浏览器不支持流API')
-        }else{
-          this.$toast.fail(error.name)
-        }
+      // this.checkJson.answer2 = result;
+      this.$refs.sweepPageRef.close()
+    },
+    sweepError(error) {
+      // this.$message.error(error)
+      this.$toast.fail(error)
+      // if (error.name === 'NotAllowedError') {
+      //   this.$toast.fail('您需要授予相机访问权限')
+      // } else if (error.name === 'NotFoundError') {
+      //   this.$toast.fail('这个设备上没有摄像头')
+      // } else if (error.name === 'NotSupportedError') {
+      //   this.$toast.fail('所需的安全上下文(HTTPS、本地主机)')
+      // } else if (error.name === 'NotReadableError') {
+      //   this.$toast.fail('相机被占用')
+      // } else if (error.name === 'OverconstrainedError') {
+      //   this.$toast.fail('安装摄像头不合适')
+      // } else if (error.name === 'StreamApiNotSupportedError') {
+      //   this.$toast.fail('此浏览器不支持流API')
+      // } else {
+      //   this.$toast.fail(error.name)
+      // }
     },
     extractValueAndTime(inputStr) {
       try {
         // 1. 同时提取前缀文本和时间数字（格式：前缀 + 10位数字）
-        const match = inputStr.match(/^(.*?)(\d{10})$/);
+        const match = inputStr.match(/^(.*?)(\d{10})$/)
         if (!match || match[2].length !== 10) {
-          throw new Error("格式无效：需以10位数字结尾");
+          throw new Error('格式无效：需以10位数字结尾')
         }
 
-        const [full, value, timeStr] = match; // 解构匹配结果
+        const [full, value, timeStr] = match // 解构匹配结果
         if (!value || !timeStr) {
-          throw new Error("未找到有效的前缀或时间编码");
+          throw new Error('未找到有效的前缀或时间编码')
         }
 
         // 2. 解析时间部分（格式：YYMMDDHHMM → 25 03 24 15 44）
-        const year = `20${timeStr.substring(0, 2)}`;
-        const month = timeStr.substring(2, 4);
-        const day = timeStr.substring(4, 6);
-        const hours = timeStr.substring(6, 8);
-        const minutes = timeStr.substring(8, 10);
+        const year = `20${timeStr.substring(0, 2)}`
+        const month = timeStr.substring(2, 4)
+        const day = timeStr.substring(4, 6)
+        const hours = timeStr.substring(6, 8)
+        const minutes = timeStr.substring(8, 10)
 
         // 3. 构造 Date 对象并验证
-        const date = new Date(
-          parseInt(year),
-          parseInt(month) - 1,
-          parseInt(day),
-          parseInt(hours),
-          parseInt(minutes),
-          0
-        );
+        const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day), parseInt(hours), parseInt(minutes), 0)
         if (isNaN(date.getTime())) {
-          throw new Error("解析到无效的日期时间");
+          throw new Error('解析到无效的日期时间')
         }
 
         // 4. 格式化为目标字符串
-        const format = num => String(num).padStart(2, "0");
+        const format = num => String(num).padStart(2, '0')
         const formattedTime =
-          `${date.getFullYear()}/${format(date.getMonth() + 1)}/${format(
-            date.getDate()
-          )} ` + `${format(date.getHours())}:${format(date.getMinutes())}:00`;
+          `${date.getFullYear()}/${format(date.getMonth() + 1)}/${format(date.getDate())} ` +
+          `${format(date.getHours())}:${format(date.getMinutes())}:00`
 
         // 5. 返回对象
-        return { value, time: formattedTime };
+        return { value, time: formattedTime }
       } catch (error) {
-        console.error("错误:", error.message);
-        return null;
+        console.error('错误:', error.message)
+        return null
       }
     }
   },
   mounted() {
     this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
-
   }
 }
 </script>