<template>
|
<div class="invoice-wrap">
|
<div class="weixin-box" v-if="!isWeiXin">
|
<div class="invoice-main">
|
<img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
|
<h1>发票查询</h1>
|
</div>
|
<div class="invoice-main2">
|
<el-form
|
:inline="true"
|
:model="form"
|
class="invoice-main2-box"
|
ref="form"
|
:rules="rules">
|
<el-form-item
|
prop="carNo"
|
class="carNum"
|
label="车牌号:"
|
>
|
<el-input v-model="form.carNo" placeholder="输入车牌号"></el-input>
|
</el-form-item>
|
<el-form-item
|
prop="phone"
|
class="carNum"
|
label="手机号:"
|
>
|
<el-input v-model="form.phone" placeholder="输入手机号"></el-input>
|
</el-form-item>
|
<el-form-item class="invoice-btn" v-if="isShowBtn">
|
<el-button
|
id="fixBtn"
|
@click="submitInvoice('form')"
|
class="jiaofei-btn"
|
type="primary">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div class="middlePge-wrap" v-else>
|
<div class="middlePge-main">
|
<img src="../../../assets/images/middlePage.png" alt="">
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "index",
|
data() {
|
var validateMobile = (rule, value, callback) => {
|
if(value === '') {
|
callback(new Error('手机号码不能为空'))
|
}else {
|
var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
|
if(!phonereg.test(value)) {
|
callback(new Error('手机号码格式错误'))
|
}else {
|
callback()
|
}
|
}
|
}
|
return {
|
isWeiXin: false,
|
isShowBtn: true, //确定按钮显示 解决安卓button被顶起的问题
|
docmHeight: document.documentElement.clientHeight, //默认屏幕高度
|
showHeight: document.documentElement.clientHeight, //实时屏幕高度
|
form: {
|
carNo:'',
|
phone:''
|
},
|
rules:{
|
carNo: [
|
{required: true, message: '车牌号码不能为空',trigger: 'blur'}
|
],
|
phone: [
|
{ required: true, message: '手机号不能为空' },
|
{validator: validateMobile, trigger: 'blur'}
|
]
|
}
|
}
|
},
|
created() {
|
this.checkWeiXin()
|
},
|
watch: {
|
showHeight() {
|
// 解决安卓底部固定部位被软键盘顶上去问题
|
//监听屏幕高度变化
|
if(this.docmHeight > this.showHeight){
|
this.isShowBtn = false
|
}else {
|
this.isShowBtn = true
|
}
|
}
|
},
|
mounted() {
|
//首次进入的原始高度
|
window.addEventListener('resize', this.watchResize);
|
},
|
methods: {
|
watchResize() {
|
//实时变化的窗口高度
|
this.showHeight = document.body.clientHeight;
|
},
|
checkWeiXin() {
|
// let userAgent = navigator.userAgent;
|
// console.log(userAgent)
|
// if (userAgent.includes("MicroMessenger")) {
|
// this.isWeiXin = true
|
// } else {
|
// this.isWeiXin = false
|
// }
|
let ua = window.navigator.userAgent.toLowerCase();
|
//通过正则表达式匹配ua中是否含有MicroMessenger字符串
|
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
|
this.isWeiXin = true
|
} else{
|
this.isWeiXin = false
|
}
|
},
|
submitInvoice(formName) {
|
this.$refs[formName].validate(valid => {
|
if(valid) {
|
this.$router.push({
|
path: '/invoiceForm',
|
query: {
|
carNo: this.form.carNo,
|
phone: this.form.phone
|
}
|
})
|
}
|
})
|
|
}
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.watchResize);
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.invoice-wrap{
|
.jiaofei-btn{
|
span{
|
color: #fff;
|
}
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
*{
|
font-family: '苹方';
|
color: #626262;
|
}
|
::v-deep{
|
.el-form{
|
width: 88%;
|
padding-right: 2.67vw /* 20/7.5 */;
|
}
|
.el-form-item__label{
|
font-size: 3.73vw /* 28/7.5 */;
|
width: 24vw /* 180/7.5 */;
|
}
|
.el-form-item__content{
|
width: calc(100% - 24vw - 15px);
|
}
|
|
}
|
.invoice-wrap{
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
.weixin-box{
|
width: 100%;
|
height: 100%;
|
}
|
.middlePge-wrap{
|
width: 100%;
|
height: 100%;
|
background: rgba(0,0,0,0.7);
|
img{
|
width: 100%;
|
}
|
}
|
.invoice-main{
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
margin-top: 10vw;
|
h1{
|
font-size: 3.73vw /* 28/7.5 */;
|
line-height: 2;
|
margin-top: 2.67vw /* 20/7.5 */;
|
}
|
}
|
.logoPhone{
|
margin-top: 10vw;
|
width: 20vw /* 180/7.5 */;
|
height: 20vw /* 180/7.5 */;
|
}
|
.invoice-main2{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
margin-top: 10vw;
|
height: calc(100% - 60vw);
|
position: relative;
|
}
|
.jiaofei-btn{
|
width: 64.53vw /* 484/7.5 */;
|
border-radius: 5.33vw /* 40/7.5 */;
|
background-image: linear-gradient(to right,#33b1fe,#0679dc);
|
}
|
.invoice-main2-box{
|
position: relative;
|
}
|
.carNum{
|
margin-top: 10vw;
|
width: 100%;
|
}
|
.invoice-btn{
|
position: absolute;
|
bottom: 20vw;
|
left: calc(50% - 32.265vw);
|
}
|
|
}
|
|
</style>
|
