【项目知识点】Vue中实现扫描二维码获取信息

1. 安装依赖

npm install @zxing/library --save

2.页面代码

<template class = "q1">


<div class="app-container">


  <div class="page-scan">


      <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
         <video ref="video" id="video" class="scan-video" autoplay></video>
      </el-form-item>
      <el-form-item>
         
         <h1>     &#12288                    信    </h1>  
        
      </el-form-item>
       <el-form-item>
        <h1>          &#12288                 息    </h1> 
        
      </el-form-item>
       <el-form-item>
         <h1>          &#12288                  录       </h1>  
        
      </el-form-item>
       <el-form-item>
         <h1>          &#12288                      入</h1>  
        
      </el-form-item>
      
      
   </el-form>
    <!--返回-->
    <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>
    <!-- 扫码区域 -->

    <!-- <span>      <video ref="video" id="video" class="scan-video" autoplay></video> </span>   <span>   <h1>信息录入</h1> </span>
     -->

    
  <!-- 提示语 -->
    <!-- <div v-show="tipShow" class="scan-tip"> {{tipMsg}} </div> -->



       <el-table
       v-loading="listLoading"

      :data="detail"

      element-loading-text="数据加载中"

      border

      fit

      highlight-current-row>

      <el-table-column

        label="序号"

        width="70"

        align="center">

        <template slot-scope="scope">

          {{ (page - 1) * limit + scope.$index + 1 }}

        </template>

      </el-table-column>

      

      <el-table-column prop="username" label="姓名" width="80" />

      <el-table-column label="性别" width="120" prop="sex">

        

      </el-table-column>

      <el-table-column prop="address" label="预约地点"  width="140"/>

      

      <el-table-column prop="tel" label="预约地点电话" width="180"/>

      <el-table-column  label="预约状态"  > 
          
          
          <template slot-scope="scope">

          {{ scope.row.stats===1?'已接种':'待接种' }}

         </template>
          
          
           </el-table-column>


      <!-- <el-table-column prop="sort" label="排序" width="60" /> -->

      <el-table-column label="操作" width="200" align="center">

        <template slot-scope="scope">

          

          
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.appid)">删除</el-button>

          <el-button type="success" size="mini" icon="el-icon-delete" @click="addByAppid(scope.row.appid)">添加</el-button>

        </template>

      </el-table-column>

    </el-table>

  </div>

 
 
</div>


</template>
 
<script>

import cms from '@/api/cms/cms';
import { BrowserMultiFormatReader } from '@zxing/library';
import { Dialog, Notify } from 'vant';
 
  export default {
    name: 'scanCodePage',
    data() {
      return {
          uid: '',
        loadingShow: false,
        codeReader: null,
        scanText: '',
        vin: null,
        tipMsg: '正在尝试识别....',
        tipShow: false,
        detail:[],
        page: 1,
            limit: 10,
           
            total: 1,
            

        
      }
    },

    
    created() {
      this.codeReader = new BrowserMultiFormatReader();
      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) {




            console.log('扫描结果', result);
            this.uid = result.text;
                this.getdeatil()
            

             

            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);
          }
        });
      },

      getdeatil(){

          cms.getdeatilByUserId(this.uid).then(response=>{
              this.detail = response.data.detail
              console.log(this.detail)
               this.$confirm('系统将写入接种信息, 是否继续?', '提示', {
               confirmButtonText: '确定',
                cancelButtonText: '取消',
               type: 'warning'
           })
              
          }).catch(error =>{
               this.$message({
                type: 'error',
                message: '请查看是否预约'
            })
          })



      },

      clickIndexLeft(){  // 返回上一页
        this.codeReader = null;
        this.$destroy();
        this.$router.back();
      },

       removeById(id) {
    // debugger
    // console.log(memberId)
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
    .then(()=>{
         
              this.resetData()
               this.$message({
              type: 'success',
              message: '删除成功!'
              
          
          })
          
         
           
          
    })
    .catch(error =>{
        if (error == "cancel"){
             this.$message({
                type: 'info',
                message: '已取消删除'
            })
        }else{
            this.$message({
                type: 'error',
                message: '删除失败'
            })
        }
       
        console.log(error)
    })
      },


      resetData(){

            this.uid = '',
            this.detail = []


      },


      addByAppid(id){
          cms.addByid(id).then(res=>{
               this.resetData()
               this.$message({
                 type: 'success',
                 message: '写入成功!'
              })
          })
      }




      

      
    }
  }
</script>
 
<style lang="scss">
.scan-index-bar{
  background-image: linear-gradient( -45deg, #42a5ff ,#59cfff);
}
.van-nav-bar__title{
  color: #fff !important;
}
.scan-video{
    margin-top: 0%;
 
  width: 200px;
}

.scan-video1{
    margin-top: 0%;
    margin-left: 10px;
    height: 90px;
}
.scan-tip{
  
}
// .page-scan{
//   overflow-y: hidden;
//   background-color: #363636;
  
// }

.q1{
    background: palegoldenrod;
}

h1{
    width: 70%;
    color: green;
    margin-left: 30%;
    font-size: 70px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>

3.实现效果：