<template>
|
<div :style="{ backgroundImage: 'url(' + require('../assets/bg.png') + ')' }" class="content">
|
<img src="../assets/title.png" class="title" />
|
<el-input v-if="dialogVisible" v-focus.noKeyboard @input="changeInput" v-model="code" />
|
<div class="btn" @click="nowScan">立即扫码</div>
|
<el-dialog :visible.sync="dialogVisible" width="80%" :show-close="false" :close-on-click-modal="false">
|
<div class="dialog_box">
|
<div class="dialog_title">{{ title }}</div>
|
<div v-if="errFlag" class="dialog_title">{{ errText }}</div>
|
<div class="time">{{ timeNum }}s</div>
|
<div class="close" @click="close">关闭</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
const { ipcRenderer } = require("electron");
|
export default {
|
components: {
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
title: '',
|
code: '',
|
errFlag: false,
|
errText: '',
|
timer: null,
|
timeNum: 10,
|
inputTimer: null
|
};
|
},
|
created() { },
|
mounted() { },
|
methods: {
|
getParameter(name, str) {
|
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
|
var r = str.substr(1).match(reg)
|
if (r != null) return unescape(r[2])
|
return null
|
},
|
changeInput(e) {
|
if (e) {
|
clearTimeout(this.inputTimer)
|
this.inputTimer = setTimeout(() => {
|
if (this.getParameter('id', e)) {
|
this.$axios
|
.post(`/api/accreditation/callNumber?id=${this.getParameter('id', e)}`)
|
.then((res) => {
|
if (res.code == 1) {
|
this.errFlag = true
|
this.title = '排号失败'
|
this.errText = res.msg
|
this.code = ''
|
} else {
|
this.errFlag = false
|
this.code = ''
|
this.title = '排号成功，请注意叫号状态！'
|
ipcRenderer.send('print', res)
|
}
|
});
|
} else {
|
this.errFlag = true
|
this.title = '排号失败'
|
this.errText = '请扫描正确的二维码'
|
this.code = ''
|
}
|
}, 1000)
|
}
|
},
|
nowScan() {
|
this.title = '请出示二维码'
|
this.dialogVisible = true
|
if (this.timer) {
|
clearInterval(this.timer)
|
this.code = ''
|
this.errFlag = false
|
this.errText = ''
|
this.timeNum = 10
|
}
|
this.$nextTick(() => {
|
this.timer = setInterval(() => {
|
this.timeNum -= 1
|
if (this.timeNum == 1) {
|
setTimeout(() => {
|
this.close()
|
}, 800)
|
}
|
}, 1000)
|
})
|
},
|
close() {
|
this.dialogVisible = false
|
}
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.content {
|
height: 100%;
|
width: 100%;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.title {
|
width: 757px;
|
height: 199px;
|
margin-top: 299px;
|
}
|
|
.btn {
|
cursor: pointer;
|
margin-bottom: 114px;
|
width: 601px;
|
line-height: 127px;
|
text-align: center;
|
background: linear-gradient(180deg, #A8D0F0 0%, #FFFFFF 100%);
|
border-radius: 73px;
|
font-size: 60px;
|
color: #1D67DF;
|
}
|
}
|
|
.dialog_box {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.dialog_title {
|
font-weight: 600;
|
font-size: 36px;
|
color: rgba(0, 0, 0, 0.8);
|
}
|
|
.time {
|
font-size: 60px;
|
color: #1D67DF;
|
font-weight: bold;
|
margin-top: 139px;
|
}
|
|
.close {
|
cursor: pointer;
|
width: 330px;
|
line-height: 110px;
|
text-align: center;
|
background: #1D67DF;
|
border-radius: 55px;
|
font-size: 36px;
|
color: #FFFFFF;
|
margin-top: 91px;
|
}
|
}
|
|
/deep/ .el-dialog {
|
|
border-radius: 10px;
|
|
.el-dialog__header {
|
display: none;
|
}
|
|
.el-dialog__body {
|
// padding-top: 50px;
|
padding-bottom: 63px;
|
}
|
}
|
|
/deep/ .el-input__inner {
|
width: 1px;
|
background-color: transparent;
|
border: unset;
|
color: transparent;
|
}
|
</style>
|
