<template>
|
<div class="consult">
|
<div class="banner">
|
<div class="heart">
|
<div class="title">业务查询</div>
|
<div class="des">我们将尽快与您联系</div>
|
</div>
|
</div>
|
|
<div class="formArea">
|
<div class="header">请留下您的联系方式，以便我们为您服务</div>
|
<el-form
|
:model="formData"
|
:rules="rules"
|
ref="userForm"
|
class="demo-rulmargin"
|
label-position="left"
|
label-width="100px"
|
>
|
<el-form-item prop="name" label="您的姓名">
|
<el-input v-model="formData.name"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="phoneNum" label="您的手机号">
|
<div class="phoneNum">
|
<el-input v-model="formData.phoneNum"> </el-input>
|
</div>
|
</el-form-item>
|
|
<el-form-item prop="verifyCode" label="验证码">
|
<el-input
|
v-model="formData.verifyCode"
|
style="width: 350px; margin-right: 10px"
|
></el-input>
|
<el-button
|
class="code-btn"
|
:disabled="codeDisabled"
|
@click="getCode"
|
style="width: 140px"
|
>{{ codeMsg }}</el-button
|
>
|
</el-form-item>
|
|
<el-form-item prop="mail" label="您的邮箱">
|
<el-input v-model="formData.mail"> </el-input>
|
</el-form-item>
|
<el-form-item label="您的公司">
|
<el-input v-model="formData.company"> </el-input>
|
</el-form-item>
|
<el-form-item prop="detail" label="您想了解什么">
|
<el-input v-model="formData.detail" type="textarea" :rows="4">
|
</el-input>
|
</el-form-item>
|
|
<div class="button">提交</div>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getVerifyCode } from "@/api/login";
|
export default {
|
data() {
|
return {
|
formData: {
|
name: "",
|
phoneNum: "",
|
verifyCode: "",
|
mail: "",
|
company: "",
|
detail: "",
|
},
|
rules: {},
|
codeDisabled: false,
|
countdown: 60,
|
codeMsg: "获取验证码",
|
timer: null,
|
};
|
},
|
methods: {
|
getValidStr() {
|
if (this.countdown > 0 && this.countdown <= 60) {
|
this.countdown--;
|
if (this.countdown !== 0) {
|
this.codeMsg = `${this.countdown}s`;
|
} else {
|
clearInterval(this.timer);
|
this.codeMsg = "获取验证码";
|
this.countdown = 60;
|
this.timer = null;
|
this.codeDisabled = false;
|
}
|
}
|
},
|
//获取验证码
|
getCode() {
|
this.codeDisabled = true;
|
this.getValidStr();
|
this.timer = setInterval(this.getValidStr, 1000);
|
getVerifyCode({ phoneNum: this.formData.phoneNum, type: 1 })
|
.then(() => {
|
this.gotCode = true;
|
})
|
.catch((err) => {
|
if (err.data) {
|
console.log(err);
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.consult {
|
padding-bottom: 50px;
|
.banner {
|
height: 500px;
|
background: url("/images/connectUs/background.png");
|
|
.heart {
|
overflow: hidden;
|
}
|
|
.title {
|
margin-top: 150px;
|
font-size: 54px;
|
line-height: 76px;
|
font-weight: 700;
|
}
|
|
.des {
|
font-size: 34px;
|
line-height: 48px;
|
}
|
}
|
|
.formArea {
|
box-sizing: border-box;
|
margin: 0 auto;
|
margin-top: 60px;
|
padding: 0 30px;
|
width: 1096px;
|
height: 764px;
|
box-shadow: 0px 2px 8px rgba(0, 43, 106, 0.12);
|
border-radius: 4px;
|
text-align: center;
|
|
.header {
|
height: 104px;
|
font-weight: bold;
|
font-size: 36px;
|
line-height: 104px;
|
border-bottom: 1px solid #e9ebee;
|
}
|
|
.el-form ::v-deep {
|
box-sizing: border-box;
|
padding-top: 40px;
|
margin: 0 auto;
|
width: 600px;
|
|
input {
|
border-radius: 4px;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-form-item {
|
margin-bottom: 30px;
|
}
|
|
.button {
|
margin: 0 auto;
|
margin-bottom: 40px;
|
width: 240px;
|
height: 40px;
|
line-height: 40px;
|
background: #0065ff;
|
border-radius: 4px;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
