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

<template>
    <div class="saleSelfMachine">
        <div class="background">
            <img :src="backgroundImgURL" width="100%" height="100%"/>
        </div>
        <!-- <div class="time">
            <span>{{nowTime}}</span>
        </div> -->
        <div class="loginForm">
            <div class="menu" v-for="(item,index) in menuList" :key="index" @click="onClick(item.url)">
                <img :src="item.img" width="100%" height="100%"/>
            </div>
        </div>
    </div>
</template>
<script>
// import {renderTime} from '@/utils/sharedJsFile'
export default {
    data(){
        return{
            orderNumber:"",
            nowTime:'',
            backgroundImgURL:require('@/assets/saleSelfMachine/backgroundImg.jpg'),
            menuList:[
                {
                    img: require("@/assets/saleSelfMachine/billOfLading.png"),
                    url: "/printLading",
                },{
                    img: require("@/assets/saleSelfMachine/ticketChangeDeliveryNote.png"),
                    url: "/printReceipt",
                },{
                    img: require("@/assets/saleSelfMachine/Warranty.png"),
                    url: "/printWarranty",
                },
            ],
        }
    },
    methods:{
        onClick(url){
            this.$router.push({
                path:url+"?orderNumber="+this.orderNumber,
            })
        },
        backScan(){
        this.$router.go(-1);
    }
    },
    mounted() {
        this.orderNumber=this.$route.query.orderNumber;
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        //三十秒不操作，自动返回扫码页面
        const timer = setInterval(()=>{
            this.backScan();
        },30000)
        this.$once('hook:beforeDestroy', ()=>{
            clearInterval(timer)
        })
        // this.timer = setInterval(() => {
        // _this.nowTime = renderTime(new Date()); // 修改数据date
        // }, 1000)
    },
    // beforeDestroy() {
    //     if (this.timer) {
    //     clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    //     }
    // }
}
</script>
<style lang="scss">
    .saleSelfMachine{
        width: 100vh;
        height: 97vh;
        .background {
            width: 100%;
            height: 100%; 
            z-index: -1;
            position: absolute;
            overflow: hidden;
        }
        .time{
            width: 30%;height: 20%;
            color: #fff;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loginForm {
            z-index: 1;
            width: 196%;height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .menu{
                width: 20%;
                height: 40%;
                margin: 30px;
                overflow: hidden;
            }
        }
    }
</style>