扫码页面

package.json

@@ -8,6 +8,7 @@
     "dev": "vue-cli-service serve"
   },
   "dependencies": {
+    "@zxing/library": "^0.20.0",
     "axios": "^1.3.4",
     "core-js": "^3.8.3",
     "dingtalk-jsapi": "^3.0.20",

src/router/index.js

@@ -191,7 +191,7 @@ const routes = [{
 				name: '组织架构新增',
 				component: () => import('../views/system/dept/add.vue')
 			},
-			
+
 			{
 				path: 'xiamenList',
 				name: '发酵机列表',
@@ -455,8 +455,11 @@ const routes = [{
 				name: '写邮件',
 				component: () => import('../views/email/write.vue')
 			},
-
-
+			{
+				path: "sacnTest",
+				name: "扫码页面",
+				component: () => import("../views/system/sacn/index.vue"),
+			}
 		]
 	},
 ]

src/router/jxskRouter.js

@@ -38,7 +38,8 @@ export function jxskRouter() {
       path: "jxskReceiveAdd",
       name: "jxsk_任务接收添加",
       component: () => import("../views/JXSK/mes/receive/add.vue"),
-    }
+    },
+
   ];
   return jxskRouter;
 }

src/views/system/sacn/aa.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="page-scan">
+    <!--返回-->
+    <van-nav-bar
+      title="扫描二维码/条形码"
+      fixed
+      @click-left="clickIndexLeft()"
+      class="scan-index-bar"
+    >
+      <template #left>
+        <van-icon name="arrow-left" size="18" color="#fff" />
+        <span style="color: #fff"> 取消 </span>
+      </template>
+    </van-nav-bar>
+    <!-- 扫码区域 -->
+    <video ref="video" id="video" class="scan-video" autoplay></video>
+    <!-- 提示语 -->
+    <div v-show="tipShow" class="scan-tip">{{ tipMsg }}</div>
+  </div>
+</template>
+
+<script>
+import { BrowserMultiFormatReader } from "@zxing/library";
+// import { Dialog, Notify } from 'vant';
+import { Dialog } from "vant";
+
+export default {
+  name: "scanCodePage",
+  components: {
+    [Dialog.Component.name]: Dialog.Component,
+  },
+  data() {
+    return {
+      loadingShow: false,
+      codeReader: null,
+      scanText: "",
+      vin: null,
+      tipMsg: "正在尝试识别....",
+      tipShow: false,
+    };
+  },
+  created() {
+    this.codeReader = new BrowserMultiFormatReader();
+    console.log("测试", this.codeReader);
+    this.openScan();
+  },
+  destroyed() {
+    this.codeReader.reset();
+  },
+  watch: {
+    $route(to, from) {
+      if (to.path == "/scanCodePage") {
+        this.codeReader = new BrowserMultiFormatReader();
+        this.openScanTwo();
+      }
+    },
+  },
+  methods: {
+    async openScan() {
+      this.codeReader
+        .getVideoInputDevices()
+        .then((videoInputDevices) => {
+          this.tipShow = true;
+          this.tipMsg = "正在调用摄像头...";
+          console.log("videoInputDevices", videoInputDevices);
+          // 默认获取第一个摄像头设备id
+          let firstDeviceId = videoInputDevices[0].deviceId;
+          // 获取第一个摄像头设备的名称
+          const videoInputDeviceslablestr = JSON.stringify(
+            videoInputDevices[0].label
+          );
+          if (videoInputDevices.length > 1) {
+            // 判断是否后置摄像头
+            if (videoInputDeviceslablestr.indexOf("back") > -1) {
+              firstDeviceId = videoInputDevices[0].deviceId;
+            } else {
+              firstDeviceId = videoInputDevices[1].deviceId;
+            }
+          }
+          this.decodeFromInputVideoFunc(firstDeviceId);
+        })
+        .catch((err) => {
+          this.tipShow = false;
+          console.error(err);
+        });
+    },
+    async openScanTwo() {
+      this.codeReader = await new BrowserMultiFormatReader();
+      this.codeReader
+        .getVideoInputDevices()
+        .then((videoInputDevices) => {
+          this.tipShow = true;
+          this.tipMsg = "正在调用摄像头...";
+          console.log("videoInputDevices", videoInputDevices);
+          // 默认获取第一个摄像头设备id
+          let firstDeviceId = videoInputDevices[0].deviceId;
+          // 获取第一个摄像头设备的名称
+          const videoInputDeviceslablestr = JSON.stringify(
+            videoInputDevices[0].label
+          );
+          if (videoInputDevices.length > 1) {
+            // 判断是否后置摄像头
+            if (videoInputDeviceslablestr.indexOf("back") > -1) {
+              firstDeviceId = videoInputDevices[0].deviceId;
+            } else {
+              firstDeviceId = videoInputDevices[1].deviceId;
+            }
+          }
+          this.decodeFromInputVideoFunc(firstDeviceId);
+        })
+        .catch((err) => {
+          this.tipShow = false;
+          console.error(err);
+        });
+    },
+    decodeFromInputVideoFunc(firstDeviceId) {
+      this.codeReader.reset(); // 重置
+      this.scanText = "";
+      this.codeReader.decodeFromInputVideoDeviceContinuously(
+        firstDeviceId,
+        "video",
+        (result, err) => {
+          this.tipMsg = "正在尝试识别...";
+          this.scanText = "";
+          if (result) {
+            Dialog.alert({
+              title: "扫描结果",
+              message: result.text,
+            }).then(() => {
+              this.codeReader = null;
+              this.$destroy();
+              this.$router.back();
+            });
+            console.log("扫描结果", result);
+            this.scanText = result.text;
+            if (this.scanText) {
+              this.tipShow = false;
+              // 这部分接下去的代码根据需要，读者自行编写了
+              // this.$store.commit('app/SET_SCANTEXT', result.text);
+              // console.log('已扫描的小票列表', this.$store.getters.scanTextArr);
+            }
+          }
+          if (err && !err) {
+            this.tipMsg = "识别失败";
+            setTimeout(() => {
+              this.tipShow = false;
+            }, 2000);
+            console.error(err);
+          }
+        }
+      );
+    },
+    clickIndexLeft() {
+      // 返回上一页
+      this.codeReader = null;
+      this.$destroy();
+      this.$router.back();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.scan-index-bar {
+  background-image: linear-gradient(-45deg, #42a5ff, #59cfff);
+}
+.van-nav-bar__title {
+  color: #fff !important;
+}
+.scan-video {
+  height: 80vh;
+}
+.scan-tip {
+  width: 100vw;
+  text-align: center;
+  margin-bottom: 10vh;
+  color: white;
+  font-size: 5vw;
+}
+.page-scan {
+  overflow-y: hidden;
+  background-color: #363636;
+}
+</style>
+

src/views/system/sacn/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <van-nav-bar title="扫码" left-text="" left-arrow @click-left="onClickLeft">
+  </van-nav-bar>
+  <van-button type="primary" @click="ceshi">扫码</van-button>
+  <div style="text-align: center; margin: 10px 0">{{ textValue }}</div>
+  <video ref="video" id="video" class="scan-video" autoplay></video>
+
+  <van-popup
+    :close-on-click-overlay="false"
+    v-model:show="loading"
+    style="background-color: transparent"
+  >
+    <div class="loadingWrap">
+      <van-loading type="spinner"> 请稍后</van-loading>
+    </div>
+  </van-popup>
+</template>
+<script setup>
+import { ref, getCurrentInstance, onMounted } from "vue";
+import { BrowserMultiFormatReader } from "@zxing/library";
+import { showSuccessToast, showFailToast } from "vant";
+
+const loading = ref(false);
+const textValue = ref("aa");
+const proxy = getCurrentInstance().proxy;
+const codeReader = new BrowserMultiFormatReader();
+const onClickLeft = () => {};
+const decodeFromInputVideoFunc = (firstDeviceId) => {
+  codeReader.reset(); // 重置
+  loading.value = true;
+  codeReader.decodeFromInputVideoDeviceContinuously(
+    firstDeviceId,
+    "video",
+    (result, err) => {
+      if (result) {
+        textValue.value = result.text;
+        codeReader.reset();
+        showSuccessToast("扫描成功");
+        loading.value = false;
+      }
+      if (err && !err) {
+        console.error(err);
+      }
+    }
+  );
+};
+const ceshi = () => {
+  codeReader
+    .getVideoInputDevices()
+    .then((videoInputDevices) => {
+      console.log("videoInputDevices", videoInputDevices);
+      // 默认获取第一个摄像头设备id
+      let firstDeviceId = videoInputDevices[0].deviceId;
+      // 获取第一个摄像头设备的名称
+      const videoInputDeviceslablestr = JSON.stringify(
+        videoInputDevices[0].label
+      );
+      if (videoInputDevices.length > 1) {
+        // 判断是否后置摄像头
+        if (videoInputDeviceslablestr.indexOf("back") > -1) {
+          firstDeviceId = videoInputDevices[0].deviceId;
+        } else {
+          firstDeviceId = videoInputDevices[1].deviceId;
+        }
+      }
+      decodeFromInputVideoFunc(firstDeviceId);
+    })
+    .catch((err) => {
+      console.error(err, "错误");
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  min-height: 70vh;
+}
+.scan-video {
+  width: 100vw;
+}
+
+.loadingWrap {
+  .van-popup {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+}
+</style>

vue.config.js

@@ -1,6 +1,10 @@
-const { defineConfig } = require('@vue/cli-service')
+const {
+	defineConfig
+} = require('@vue/cli-service')
 
-const { VantResolver } = require('unplugin-vue-components/resolvers');
+const {
+	VantResolver
+} = require('unplugin-vue-components/resolvers');
 const ComponentsPlugin = require('unplugin-vue-components/webpack');
 module.exports = defineConfig({
 	transpileDependencies: true,
@@ -12,6 +16,7 @@ module.exports = defineConfig({
 		],
 	},
 	devServer: {
+		// https: true,
 		port: "8088", //代理端口
 		open: false, //项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
 		headers: {
@@ -31,7 +36,4 @@ module.exports = defineConfig({
 			}
 		}
 	},
-})
-
-
-
+})