扫码页返回按钮样式

src/views/enforce/scanPage.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page bgc-f4f4f4">
+    <label class="backlab" @click="back()"></label>
     <div class="video-show" />
     <video id="video" ref="video" class="video vjs-fluid" autoplay />
     <span class="change" @click="change">
@@ -43,25 +44,25 @@ export default {
       const that = this;
       // 这个就是data里的哪个new出来的玩意，调用里面的方法
       that.codeReader
-        .getVideoInputDevices()
+          .getVideoInputDevices()
-        .then(videoInputDevices => {
+          .then(videoInputDevices => {
-          console.log(videoInputDevices)
+            console.log(videoInputDevices)
-          // 记录一下扫描到的摄像头数量，这个videoInputDevices是个数组，里面有扫描到的摄像头数据
+            // 记录一下扫描到的摄像头数量，这个videoInputDevices是个数组，里面有扫描到的摄像头数据
-          this.videoLength = videoInputDevices.length;
+            this.videoLength = videoInputDevices.length;
-          // 这步我们来决定一下调用第几个摄像头，看到这个num没，这就是data里的
+            // 这步我们来决定一下调用第几个摄像头，看到这个num没，这就是data里的
-          const firstDeviceId = videoInputDevices[that.num].deviceId;
+            const firstDeviceId = videoInputDevices[that.num].deviceId;
-          // 这调用另一个方法
+            // 这调用另一个方法
-          that.decodeFromInputVideoFunc(
+            that.decodeFromInputVideoFunc(
-            firstDeviceId,
+                firstDeviceId,
-            videoInputDevices.length
+                videoInputDevices.length
-          );
+            );
-        })
+          })
-        // 失败回调，为什么这里的失败回调这么写，后面会说的
+          // 失败回调，为什么这里的失败回调这么写，后面会说的
-        .catch(err => {
+          .catch(err => {
-          this.num = 1;
+            this.num = 1;
-          that.openScan();
+            that.openScan();
-          console.error(err);
+            console.error(err);
-        });
+          });
     },
     //这就是在openScan里调的另一个方法，传入想调用的摄像头id和摄像头数量
     decodeFromInputVideoFunc(firstDeviceId, length) {
@@ -70,35 +71,35 @@ export default {
       that.textContent = null; // 重置
       // 看不懂不重要，打印出来自己琢磨琢磨
       that.codeReader.decodeFromInputVideoDeviceContinuously(
-        firstDeviceId,
+          firstDeviceId,
-        "video",
+          "video",
-        (result, err) => {
+          (result, err) => {
-          that.textContent = null;
+            that.textContent = null;
-          // 扫描成功 这个result就是扫描结果，长啥样自己打印出来看看
+            // 扫描成功 这个result就是扫描结果，长啥样自己打印出来看看
-          if (result) {
+            if (result) {
-            that.textContent = result;
+              that.textContent = result;
-            // 这里写你要对扫描结果做什么，我这里扫描出来的是个网址，写的页面跳转
+              // 这里写你要对扫描结果做什么，我这里扫描出来的是个网址，写的页面跳转
-            if (that.textContent) {
+              if (that.textContent) {
-              setTimeout(() => {
+                setTimeout(() => {
-                window.location.href = that.textContent;
+                  window.location.href = that.textContent;
-                // 记得重置，不然在微信里用会有问题
+                  // 记得重置，不然在微信里用会有问题
-                that.textContent = null;
+                  that.textContent = null;
-                that.codeReader && that.codeReader.reset();
+                  that.codeReader && that.codeReader.reset();
-              }, 100);
+                }, 100);
+              }
             }
-          }
+            // 扫描失败，我这里是直接找下一个摄像头，其实可以不写
-          // 扫描失败，我这里是直接找下一个摄像头，其实可以不写
+            if (err && !err) {
-          if (err && !err) {
+              this.num++;
-            this.num++;
+              setTimeout(() => {
-            setTimeout(() => {
+                that.tipShow = false;
-              that.tipShow = false;
+              }, 2000);
-            }, 2000);
+              if (this.num <= length) {
-            if (this.num <= length) {
+                that.openScan();
-              that.openScan();
+              }
+              console.error(err);
             }
-            console.error(err);
           }
-        }
       );
     },
     // 点击切换前后摄像头
@@ -130,6 +131,20 @@ export default {
 
  
 <style scoped>
+.backlab {
+  position: absolute;
+  z-index: 999999;
+  top: 0.5rem;
+  left: 0.35rem;
+  padding-left: 0;
+  width: 0.6rem;
+  height: 0.6rem;
+  background: url(../../assets/images/icon_arbw.png) no-repeat left 40% center;
+  background-size: auto 50%;
+  background-color: rgba(255, 255, 255, .2);
+  border: 1px solid rgba(255, 255, 255, .7);
+  border-radius: 50%;
+}
 .video {
   width: 100vw;
   height: 100vh;