<template>
|
<div class="invoice-wrap">
|
<div class="invoice-main">
|
<img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
|
<h1>发票查询</h1>
|
</div>
|
<div class="invoice-main2">
|
<el-form
|
:model="form"
|
class="invoice-main2-box"
|
ref="form"
|
:rules="rules">
|
<el-form-item
|
prop="carNo"
|
class="carNum"
|
label="车牌号:"
|
label-width="80px">
|
<el-input v-model="form.carNo" placeholder="输入车牌号"></el-input>
|
</el-form-item>
|
<el-form-item
|
prop="phone"
|
class="carNum"
|
label="手机号:"
|
label-width="80px">
|
<el-input v-model="form.phone" placeholder="输入手机号"></el-input>
|
</el-form-item>
|
<el-form-item class="invoice-btn">
|
<el-button
|
@click="submitInvoice('form')"
|
class="jiaofei-btn"
|
type="primary">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</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 {
|
form: {
|
carNo:'',
|
phone:''
|
},
|
rules:{
|
carNo: [
|
{required: true, message: '车牌号码不能为空',trigger: 'blur'}
|
],
|
phone: [
|
{ required: true, message: '手机号不能为空' },
|
{validator: validateMobile, trigger: 'blur'}
|
]
|
}
|
}
|
},
|
methods: {
|
submitInvoice(formName) {
|
this.$refs[formName].validate(valid => {
|
if(valid) {
|
this.$router.push({
|
path: '/invoiceForm',
|
query: {
|
carNo: this.form.carNo,
|
phone: this.form.phone
|
}
|
})
|
}
|
})
|
|
}
|
}
|
}
|
</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__content{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
.invoice-wrap{
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
height: 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;
|
}
|
.invoice-btn{
|
position: absolute;
|
bottom: 20vw;
|
left: calc(50% - 32.265vw);
|
}
|
|
}
|
|
</style>
|
