~~

resources/admin/src/pages/cashierhome/cashierhome.vue

 <template>
   <el-container>
     <el-main class="nopadding">
-      <input class="input" id="inputsmq" ref="inputRef" type="password" />
+      <!-- <input class="input" id="inputsmq" ref="inputRef" type="password" /> -->
+      <input class="input" id="inputsmq" ref="scannerInput" type="text" @input="handleScannerInput" @focus="onFocus" @blur="blurfun" />
       <div class="pos">
           <el-row>
-            <el-col :span='7' class="pos_order" id="order_list">
+            <el-col :span='9' class="pos_order" id="order_list">
               <el-tabs style="padding-left:10px;">
                   <el-tab-pane label="购物单">
+                    <p v-if="scannedCode">{{ scannedCode }}</p>
                     <el-table :data="tableData" border style="width:100%;">
-                      <el-table-column prop="title" label="商品名称"> </el-table-column>
+                      <el-table-column prop="title"  label="商品名称"> </el-table-column>
                       <el-table-column prop="count" label="数量">
                         <template slot-scope='scope' #default="scope">
                           <el-input-number :min="1" @change="(e)=>changenums(e, scope.$index)" size="small" v-model="scope.row.count"></el-input-number>
@@ -27,14 +29,14 @@
                       <small>数量:</small>{{ totalCount }}<small>金额:</small>{{ totalMoney }}
                     </div>
                     <div class="pos_btn">
-                      <el-button type="success" @click.native="handleScanCode" >扫码识别</el-button>
+                      <el-button type="success" @click="focusfun" >监听扫码识别</el-button>
                       <el-button type="danger" @click="delAllGoods()">清空购物单</el-button>
                       <el-button type="success" @click="checkOut()">结账</el-button>
                     </div>
                   </el-tab-pane> 
               </el-tabs>
             </el-col>
-              <el-col :span="17">
+              <el-col :span="15">
                 <el-header>
                   <div class="left-panel">
                     <el-input v-model="search.keyword" placeholder="关键词" style="width:150px; margin-right: 10px;" clearable />
@@ -75,6 +77,8 @@
 </template>
 <script >
 
+import { ElLoading, ElMessage } from "element-plus";
+
 export default {
   name: "ucenter.cashierhome",
   components: {},
@@ -95,18 +99,20 @@ export default {
         },
         selection: [],
         search: {},
-        formData:{
-            content: "",
-        },
+
         tableData: [],
         totalMoney: 0,
-        totalCount: 0
+        totalCount: 0,
+
+
+        loading:null,
+        scannedCode: '', // 存储扫码后的结果  结果
+        isTyping: false, // 用户是否正在手动输入
+        typingTimeout: null, // 用于判断输入间隔的定时器
       
     };
   },
   mounted(){
-    this.handleScanCode();
-
     var orderHeight = document.body.clientHeight;
     document.getElementById("order_list").style.height = orderHeight + "px";
   },
@@ -114,24 +120,67 @@ export default {
     
   },
   methods: {
+    focusfun(){
+      // 自动聚焦到输入框，方便直接扫描
+        this.loading = ElLoading.service({
+          lock: true,
+          text: "请开始扫码识别",
+          background: "rgba(255, 255, 255, 0.7)",
+        });
+        this.$nextTick(() => {
+          this.$refs.scannerInput.focus();
+        });
+        // this.loading.close();
+    },
+    handleScannerInput(event) {
+      const input = event.target;
+      clearTimeout(this.typingTimeout);
+
+      // 如果用户手动输入，则设置一个短暂的延迟
+      if (this.isTyping) {
+        this.typingTimeout = setTimeout(() => {
+          this.isTyping = false;
+
+
+          // 扫描完成后的处理逻辑
+          this.scannedCode = input.value;
+          console.log('Scanned code:', this.scannedCode);
+
+          console.log('input.value:', input.value );
+          // 清空输入框以便下一次扫描
+          input.value = '';
+          // 处理扫码后的业务逻辑...
+
+          this.blurfun();
+
+        }, 500); // 假设用户不会连续输入超过500ms
+      } else {
+        clearTimeout(this.typingTimeout);
+        // 扫描完成后的处理逻辑
+        this.scannedCode = input.value;
+        console.log('Scanned code:', this.scannedCode);
+
+        console.log('input.value:', input.value );
+        // 清空输入框以便下一次扫描
+        input.value = '';
+        this.blurfun();
+        // 处理扫码后的业务逻辑...
+      }
+    },
+    onFocus() {
+      // 当输入框获得焦点时，认为用户可能开始手动输入
+      this.isTyping = true;
+    },
+    //失去焦点
+    blurfun(){
+      this.isTyping = false;
+      this.loading.close();
+    },
     changenums(e,index){
       this.$nextTick(()=>{
         this.getAllMoney();
       })
     },
-    //监听
-    handleScanCode() {
-        const input= document.getElementById('inputsmq');
-        input.addEventListener('keydown',e=>{
-            if(e.keyCode==13){//回车结束
-                let qrcodeData=input.value;
-                this.formData.content = qrcodeData;
-                input.value = "";
-                console.log(`二维码数据为${qrcodeData}`)
-            }
-        })
-        input.focus()//聚焦
-    },
     // 添加和计算商品价格
     addOrderList(goods,index) {
       // 商品是否已经存在于订单列表中