icore-pass/src/views/sale/components/saleSelfMachine/printScan.vue

<template>
  <div class="saleSelfMachine">
    <div class="background">
      <img :src="backgroundImgURL" width="100%" height="100%" />
    </div>
    <div class="orderNumberData">
      <el-input
        placeholder="请将二维码放置在扫描区"
        v-model="orderNumber"
        :focus="true"
        ref="inputs"
        :disabled="!isEdit"
      >
      </el-input>
      <div style="display:block;width:120px">
        手动输入开关：
      </div>
      <el-switch
        v-model="isEdit"
        active-color="#66ccff"
        inactive-color="#ffffff"
      >
      </el-switch>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderNumber: null,
      isEdit: true,
      backgroundImgURL: require("@/assets/saleSelfMachine/scanCode.jpg")
    };
  },
  created() {
    this.changfouce();
  },
  // watch:{
  //    data:"toSaleSelfMachine"
  // },
  methods: {
    //输入框自动聚焦
    changfouce() {
      this.$nextTick(x => {
        this.$refs.inputs.focus();
      });
    }
    //失去焦点后自动执行获得焦点事件
    // onInputBlur(){
    //     console.log("获取焦点")
    //     this.changfouce();
    // }
    // toSaleSelfMachine(){
    //      this.$router.push({
    //         path:'/saleSelfMachine',
    //     })
    // }
  },
  mounted() {
    // this.changfouce();
    const timer = setInterval(() => {
      // if(this.$refs.inputs.focus==false){
      //     console.log("false")
      this.changfouce();
      //}
      if (this.orderNumber != null && this.orderNumber.length == 21) {
        if (
          this.orderNumber.startsWith("WYSDD") == true ||
          this.orderNumber.startsWith("wysdd") == true
        ) {
          this.$router.push({
            path: "/saleSelfMachine?orderNumber=" + this.orderNumber
          });
        }
      } else if (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%;
    z-index: -1;
    position: absolute;
    overflow: hidden;
  }
  .orderNumberData {
    width: 100%;
    color: #fff;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>