扫码样式调整

src/views/home/index.vue

@@ -254,26 +254,27 @@ const openNews = (val:any,name:string) => {
 
 </script>
 <template>
-    <div>
+    <div >
         <div class="mt-4">
-            <div class="mt-4">
+            
-                <div style="display: flex; justify-content: center;">
+                <div style="display: flex; justify-content: center;margin-top: 5px;">
                     <el-input
 
-                    style="width: 92%;"
+                    style="width: 98%;"
                     placeholder="请输入搜索内容"
                     class="input-with-select"
                     >
                     <template #prepend>
                         <el-button  class="footSvg " ><SvgIcon icon-class="search" size="18"  /></el-button>
                     </template>
+
+                    <template #append>
+                        <div style="display: flex; justify-content: center; max-width: 15px;"><el-icon :size="20" style="margin-top: 15%;" @click="router.push('/scanQrCode')"><SetUp /></el-icon></div>
+                    </template>
                     </el-input>
                     
-                    <el-dropdown placement="top-end">
+                    <!-- <el-dropdown placement="top-end">
-                        <!-- <el-button> topEnd </el-button> -->
-                        <!-- <span split-button style="margin-top: 1.8%; width: 8%; border: 0px;background-color: #F5F5F5;" ><Plus /></span> -->
                         <span class="el-dropdown-link" >
-                        <!-- <el-icon class="el-icon--right"><arrow-down /></el-icon> -->
                         <el-icon :size="22" style="margin-top: 26%; margin-left: 7%; background-color: #F5F5F5; ">
                             <CirclePlus />
                         </el-icon>
@@ -284,11 +285,11 @@ const openNews = (val:any,name:string) => {
                             
                             </el-dropdown-menu>
                         </template>
-                    </el-dropdown>
+                    </el-dropdown> -->
                 </div>
                 
                 
-            </div>
+            
             <!--  -->
         </div>
         <el-scrollbar ref="scrollBox" class="indexBody" @scroll="onHandleScroll">
@@ -382,7 +383,7 @@ const openNews = (val:any,name:string) => {
 <style  lang='scss' scoped>
 .indexBody{
     width:100%;
-    height: calc(100vh - 97px);
+    height: calc(100vh - 99px);
     padding: 0 5px 0px 5px;
     .cardContBox{
 		display: flex;

src/views/home/scanQrCode.vue

@@ -2,33 +2,60 @@
     <div class="scanCode">
       <div class="container">
         <div class="qrcode">
+          
+
+          <div class="btn">
+            <div class="left-back" style="float: left;">
+              
+              <el-icon @click="clickBack" style="border: white solid 0px;">
+                  <Back />
+              </el-icon>
+            </div>
+            <!-- <div class="right-file">
+              
+              <van-uploader
+                v-model="fileList"
+                :preview-image="false"
+                :after-read="dealSelectFiles"
+              >
+              <el-icon><Picture /></el-icon>
+            </van-uploader>
+            </div> -->
+          </div>
+
+
           <div id="reader"></div>
         </div>
       </div>
-      <div class="btn">
+      <!--<div class="btn">
         <div class="left-back">
-          <van-icon name="arrow-left" @click="clickBack" />
+          
+          <el-icon @click="clickBack">
+              <Back />
+          </el-icon>
         </div>
         <div class="right-file">
+          
           <van-uploader
             v-model="fileList"
             :preview-image="false"
             :after-read="dealSelectFiles"
           >
-            <van-icon name="photo-o"
+          <el-icon><Picture /></el-icon>
-          /></van-uploader>
+        </van-uploader>
         </div>
-      </div>
+      </div> -->
     </div>
   </template>
-  ​
+  
-  <script>
+  <script setup>
   import { reactive } from "vue";
   import { defineComponent, toRefs, onMounted, onUnmounted } from "vue";
   import { Html5Qrcode } from "html5-qrcode";
+  import { useRouter } from 'vue-router'
+  
+      const router = useRouter()
     
-  export default defineComponent({
-    setup() {
       const state = reactive({
         html5QrCode: null,
         fileList: [],
@@ -42,6 +69,7 @@
               qrbox: { width: 250, height: 250 },
             },
             (decodedText, decodedResult) => {
+              window.location.href = decodedText;
               console.log("decodedText", decodedText);
               console.log("decodedResult", decodedResult);
             }
@@ -51,6 +79,7 @@
             let message = ""; // 错误信息处理仅供参考，具体描述自定义
             if (typeof err == "string") {
               message = "二维码识别失败！";
+              alert(message)
             } else {
               if (err.name == "NotAllowedError") {
                 message = "您需要授予相机访问权限！";
@@ -71,9 +100,14 @@
               if (err.name == "StreamApiNotSupportedError") {
                 message = "此浏览器不支持流API！";
               }
+              alert(message)
             }
           });
       };
+      const clickBack = () => {
+        //console.log(1)
+        router.back();
+      }
       const getCameras = () => {
         Html5Qrcode.getCameras()
           .then((devices) => {
@@ -119,17 +153,13 @@
       });
       onUnmounted(() => {
         //扫描设备是否在运行
-        if (state.html5QrCode.isScanning) {
+        if (state.html5QrCode&&state.html5QrCode.isScanning) {
           stop();
         }
       });
-      return {
+      
-        ...toRefs(state),
+    
-        getCameras,
+
-        dealSelectFiles,
-      };
-    },
-  });
   </script>
   
   <style lang="scss" scoped>
@@ -140,26 +170,35 @@
     background: rgba(0, 0, 0);
   }
   .container {
-    height: 90vh;
+    height: 100vh;
     position: relative;
     width: 100%;
+    /* border: red solid 7px; */
   }
   ​.qrcode {
     height: 100%;
+    /* width: 100%;
+    border: yellow solid 7px; */
   }
   #reader {
-    top: 50%;
+    display: block;
+    
+    height: 95.4vh;
+    /* top: 50%;
     left: 0;
-    transform: translateY(-50%);
+    transform: translateY(-50%); */
+    /* border: yellow solid 1px; */
   }
+
   .btn {
     flex: 1;
-    padding: 3vw;
+    padding-top: 2vw;
     display: flex;
-    justify-content: space-around;
+    padding-left: 3vw;
     color: #fff;
-    font-size: 8vw;
+    font-size: 6vw;
     align-items: flex-start;
+    /* border: green solid 7px; */
   }
   </style>
   ​