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">
            </el-input>
        </div>
    </div>    
</template>
<script>
export default {
    data(){
        return{
            orderNumber:null,
            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,
            })
        
            }   
        }
    },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: 20%;height: 30%;
            color: #fff;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 27rem;
        }
    }
</style>