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,
            })
        }
    },
    mounted() {
        this.orderNumber=this.$route.query.orderNumber;
        let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
        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>