1

src/views/JXSK/mes/forward/index.vue

@@ -6,7 +6,10 @@
     @click-left="onClickLeft"
     @click-right="onClickRight"
   >
-    <template #right> 扫码 </template>
+    <template #right>
+      <div v-show="!isShowVideo">扫码</div>
+      <div v-show="isShowVideo">关闭</div>
+    </template>
   </van-nav-bar>
   <van-search
     v-model="req.keyword"
@@ -32,11 +35,22 @@
       </van-list>
     </div>
   </van-pull-refresh>
+
+  <video
+    ref="video"
+    id="video"
+    class="scan-video"
+    autoplay
+    v-show="isShowVideo"
+  ></video>
 </template>
 <script setup>
 import { ref, getCurrentInstance, onMounted } from "vue";
 import commonList from "@/components/common-list.vue";
 import { useRoute } from "vue-router";
+import { showSuccessToast, showFailToast } from "vant";
+import { BrowserMultiFormatReader } from "@zxing/library";
+
 const loading = ref(false);
 const router = useRoute();
 const req = ref({
@@ -117,19 +131,63 @@ const getList = (type) => {
 };
 
 getList();
-
+const isShowVideo = ref(false);
+const codeReader = new BrowserMultiFormatReader();
 const onClickRight = () => {
-  // 允许从相机和相册扫码
-  uni.scanCode({
-    success: function (res) {
-      console.log("条码类型：" + res.scanType);
-      console.log("条码内容：" + res.result);
-      uni.showToast({
-        title: res.result,
-        duration: 2000,
-      });
-    },
-  });
+  if (isShowVideo.value) {
+    codeReader.reset();
+    isShowVideo.value = false;
+  } else {
+    handleScanCode();
+  }
+};
+const showScanData = (text) => {
+  console.log(text, "aweaw");
+};
+const decodeFromInputVideoFunc = (firstDeviceId) => {
+  codeReader.reset(); // 重置
+  isShowVideo.value = true;
+  codeReader.decodeFromInputVideoDeviceContinuously(
+    firstDeviceId,
+    "video",
+    (result, err) => {
+      if (result) {
+        codeReader.reset();
+        showSuccessToast(proxy.t("manualInbound.scanSuccess"));
+        isShowVideo.value = false;
+        showScanData(result.text);
+      }
+      if (err && !err) {
+        console.error(err);
+        isShowVideo.value = false;
+      }
+    }
+  );
+};
+
+const handleScanCode = () => {
+  codeReader
+    .getVideoInputDevices()
+    .then((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>
 
@@ -137,4 +195,10 @@ const onClickRight = () => {
 .list {
   min-height: 70vh;
 }
+.scan-video {
+  width: 100vw;
+  position: absolute;
+  z-index: 1000;
+  top: 60px;
+}
 </style>