<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, uesr-scalable=no" />
<title>留资表单</title>
<script src="libs/sweetalert2/sweetalert2.min.js"></script>
<link rel="stylesheet" href="libs/element-ui/lib/theme-chalk/index.css" />
<script src="libs/vue/dist/vue.min.js"></script>
<script src="libs/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="libs/sweetalert2/sweetalert2.min.css" />
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background: url("./1731484241.jpg") no-repeat center center;
background-size: cover;
background-color: #58629a;
}
.formcard {
width: 84vw;
max-width: 500px;
margin: 0 auto;
padding: 15px;
margin-bottom: 30px;
}
.formcard-title {
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div id="app">
<el-card class="formcard">
<div slot="header">
<div class="formcard-title">预约试驾</div>
</div>
<el-form @submit.prevent="submitFn" @submit.native.prevent>
<el-form-item>
<el-input v-model="userdata.name" placeholder="姓名" style="width: 100%" />
</el-form-item>
<el-form-item>
<el-input v-model="userdata.mobile" placeholder="联系电话" style="width: 100%" type="tel" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="isAgree">
<span>我已经阅读并同意</span>
<a href="javascript:;">隐私条款</a>
</el-checkbox>
</el-form-item>
<el-form-item>
<el-button :loading="isLoading" type="primary" native-type="submit" @click="submitFn" style="display: block; width: 100%">
提交
</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</body>
<script>
const api = "/pkg/bydauto";
const http = async (url, method = "GET", data = null) => {
if (method === "POST") {
const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) });
return await res.json();
}
const res = await fetch(url);
return await res.json();
};
const vm = new Vue({
el: "#app",
data() {
return {
isLoading: false,
isAgree: true,
userdata: { name: "", mobile: "" },
vehicles: [],
provinces: [],
cities: [],
dealers: [],
};
},
methods: {
async init() {
this.vehicles = await http(`${api}/vehicle`);
},
async getProvince({ vehicle }) {
this.provinces = await http(`${api}/province?vehicle=${vehicle}`);
},
async getCity({ vehicle, province }) {
this.cities = await http(`${api}/city?vehicle=${vehicle}&province=${province}`);
},
async getDealer({ vehicle, province, city }) {
this.dealers = await http(`${api}/dealer?vehicle=${vehicle}&province=${province}&city=${city}`);
},
async vehicleFn() {
Object.assign(this.userdata, { province: "", city: "", dealer: "" });
this.provinces = [];
this.cities = [];
this.dealers = [];
await this.getProvince(this.userdata);
},
async provinceFn() {
Object.assign(this.userdata, { city: "", dealer: "" });
this.cities = [];
this.dealers = [];
await this.getCity(this.userdata);
},
async cityFn() {
Object.assign(this.userdata, { dealer: "" });
await this.getDealer(this.userdata);
},
async submitFn() {
if (this.isLoading) return;
if (!this.isAgree) {
this.$message({ message: "请先阅读并同意隐私条款", type: "warning" });
return;
}
if (!this.userdata.name || !this.userdata.mobile) {
this.$message({ message: "请填写姓名和电话", type: "warning" });
return;
}
if (/^1[3456789]\d{9}$/.test(this.userdata.mobile) === false) {
this.$message({ message: "请填写正确的手机号", type: "warning" });
return;
}
this.isLoading = true;
const resp = await http(`${api}/testdrive`, "POST", { ...this.userdata }).catch((err) => null);
this.isLoading = false;
if (resp === null) {
this.$message({ message: "网络错误", type: "error" });
return;
}
const { code, message } = resp;
if (code === 0) {
this.userdata = { name: "", mobile: "", vehicle: "", province: "", city: "", dealer: "" };
this.$message({ message, type: "success" });
} else {
this.$message({ message, type: "warning" });
}
},
},
mounted() {
// this.init();
},
});
</script>
</html>