icore-pass/src/views/index/components/printScan.vue

<template xmlns="http://www.w3.org/1999/html">
  <div class="saleSelfMachine">
    <div class="background">
      <img :src="backgroundImgURL" width="100%" height="100%" />
    </div>
    <el-button @click.native="fullScreen" id="full" v-show="false"></el-button>
    <div class="orderNumberData">
      <!--v-show="false" disabled="!isEdit"-->
      <el-input
        placeholder="请将二维码放置在扫描区"
        v-model="orderNumber"
        :focus="true"
        ref="inputs"
      >
      </el-input>
      <!--style="display:block;width:120px"-->
      <div v-show="false">
        手动输入开关：
      </div>
      <!--      <i class="el-icon-full-screen" @click="fullScreen"
      v-show="edit1"></i>-->
      <!--      <el-switch
=======
      <i class="el-icon-full-screen" @click="fullScreen" v-show="edit1"></i>
      <el-switch
        :disabled="!isEdit"
        v-show="false"
      >
      </el-input>style="display:block;width:120px"-->
      <div v-show="false">
        手动输入开关：
      </div>
      <i class="el-icon-full-screen" @click="fullScreen" v-show="edit1"></i>
      <!--      <el-switch
        v-model="isEdit"
        active-color="#66ccff"
        inactive-color="#ffffff"
      >
      </el-switch>-->
    </div>
<!--    <div class="tip">
      手机二维码对准下方摄像头<br />
      <div class="arrowDown">⇩</div>
      &lt;!&ndash; <i
        class="el-icon-bottom"
        style="padding-left: 450px;font-size: 300px;color: red"
      ></i> &ndash;&gt;
    </div>-->
    <div class="emg"><span style="">紧急联系人:0818-2521703</span></div>
  </div>
</template>
<script>
import screenfull from 'screenfull'
export default {
  data() {
    return {
      orderNumber: null,
      isEdit: true,
      edit1: true,
      backgroundImgURLList:[require('@/assets/saleSelfMachine/00.png'),
        require('@/assets/saleSelfMachine/01.png'),
        require('@/assets/saleSelfMachine/02.png'),
        require('@/assets/saleSelfMachine/03.png')],
      backgroundImgURL: require('@/assets/saleSelfMachine/00.png')
    }
  },
  created() {
    this.changfouce()
  },
  // watch:{
  //    data:"toSaleSelfMachine"
  // },
  methods: {
    //全屏函数
    fullScreen() {
      // screenfull.request()
      // console.log('wbei')
      // // documentElement 属性以一个元素对象返回一个文档的文档元素
      // // var el = document.documentElement
      // // el.requestFullscreen ||
      // // el.mozRequestFullScreen ||
      // // el.webkitRequestFullscreen ||
      // // el.msRequestFullScreen
      // //   ? el.requestFullscreen() ||
      // //     el.mozRequestFullScreen() ||
      // //     el.webkitRequestFullscreen() ||
      // //     el.msRequestFullscreen()
      // //   : null
      var wscript = new ActiveXObject('WScript.Shell') //创建ActiveX
      if (wscript !== null) {
        //创建成功
        wscript.SendKeys('{F11}') //触发f11
      }
    },
    //输入框自动聚焦
    changfouce() {
      this.$nextTick(x => {
        this.$refs.inputs.focus()
      })
    },
    /*fullScreen() {
      if (screenfull.isEnabled && !screenfull.isFullscreen) {
        screenfull.request()
        this.edit1 = false
      }
    },*/
    /*async querynumber(){
      console.log(this.orderNumber)
      let orderNumber=this.orderNumber
      let i=0
      await this.axios.post("/api/v1/tms/queryNumber?orderNumber=" + orderNumber)
        .then((res)=>{
          console.log("查找出来的数据")
          console.log(res.data)
          console.log("-------------------------")
          if (res.data.printnumber==1){
            i=1
          }
        })
      console.log(i)
      return i
        this.edit1 = false;
      }
    },*/
    async querynumber() {
      console.log(this.orderNumber)
      let orderNumber = this.orderNumber
      let i = 0
      await this.axios
        .post('/api/v1/tms/queryNumber?orderNumber=' + orderNumber)
        .then(res => {
          console.log('查找出来的数据')
          console.log(res.data)
          console.log('-------------------------')
          if (res.data.printnumber == 1) {
            i = 1
          }
        })
      console.log(i)
      return i
    }
    //失去焦点后自动执行获得焦点事件
    // onInputBlur(){
    //     console.log("获取焦点")
    //     this.changfouce();
    // }
    // toSaleSelfMachine(){
    //      this.$router.push({
    //         path:'/saleSelfMachine',
    //     })
    // }
  },
  mounted() {
    document.getElementById('full').click()
    console.log(screenfull.isFullscreen)
    const timer1 = setInterval(async ()=>{
      this.backgroundImgURL=this.backgroundImgURLList[0]
    },3000)
    const timer = setInterval(async () => {
      // if(this.$refs.inputs.focus==false){
      //     console.log("false")
      this.changfouce()
      //}
      if (
        this.orderNumber != null &&
        this.orderNumber != '' &&
        this.orderNumber.length == 21
      ) {
        if (
          this.orderNumber.startsWith('WYSDD') == true ||
          this.orderNumber.startsWith('wysdd') == true
        ) {
          let promise = await this.querynumber(this.orderNumber)
          console.log(promise)
          if (promise == 1) {
            this.backgroundImgURL=this.backgroundImgURLList[1]
            this.orderNumber = null
            return
          }
          this.$router.push({
            path: '/printReceipt?orderNumber=' + this.orderNumber
          })
        }
      } else if (
        this.orderNumber != null &&
        this.orderNumber != '' &&
        this.orderNumber.length > 21
      ) {
        //清空输入框，免得一次多个重复订单还无法删除
        this.orderNumber = null
      }
    }, 3000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  }
}
</script>
<style lang="scss">
.saleSelfMachine {
  width: 100vh;
  height: 100vh;
  .background {
    width: 100%;
    height: 100%;
    margin-top: 30px;
    z-index: -1;
    position: absolute;
    overflow: hidden;
  }
  .orderNumberData {
    width: 100%;
    color: #fff;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tip {
    width: 1800px;
    height: 600px;
    font-size: 100px;
    padding-left: 350px;
    padding-top: 500px;
    color: #4cc9e9;
    .arrowDown {
      margin-top: 150px;
      padding-left: 450px;
      font-size: 300px;
      color: red;
    }
  }
  .emg {
    position: fixed;
    right: 20px;
    bottom: 20px;
    font-size: 30px;
    color: red;
    font-weight: 500;
  }
}
</style>