<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="username" label="您的姓名">
|
<el-input v-model="formData.username"></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="email" label="您的邮箱">
|
<el-input v-model="formData.email"> </el-input>
|
</el-form-item>
|
<el-form-item label="您的公司">
|
<el-input v-model="formData.company"> </el-input>
|
</el-form-item>
|
<el-form-item prop="contents" label="想了解什么">
|
<el-input v-model="formData.contents" type="textarea" :rows="4">
|
</el-input>
|
</el-form-item>
|
|
<div class="button" @click="submit">提交</div>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getVerifyCode, saveConnectUs } from "@/api/login";
|
export default {
|
data() {
|
return {
|
formData: {
|
username: "",
|
phoneNum: "",
|
verifyCode: "",
|
email: "",
|
company: "",
|
contents: "",
|
},
|
rules: {
|
username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
phoneNum: [
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
],
|
verifyCode: [
|
{ required: true, message: "请输入验证码", trigger: "blur" },
|
],
|
email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
|
contents: [
|
{ required: true, message: "请输入您想了解什么", trigger: "blur" },
|
],
|
},
|
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() {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
this.codeDisabled = true;
|
this.getValidStr();
|
this.timer = setInterval(this.getValidStr, 1000);
|
getVerifyCode({
|
phoneNum: this.formData.phoneNum,
|
username: loginName,
|
}).then(() => {
|
this.gotCode = true;
|
});
|
},
|
|
submit() {
|
this.$refs["userForm"].validate(async (valid) => {
|
if (valid) {
|
const res = await saveConnectUs(this.formData);
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: "提交成功!",
|
});
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
},
|
};
|
</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>
|
