153 lines
6.1 KiB
HTML
153 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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%" />
|
|
</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 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.isAgree) {
|
|
this.$message({ message: "请先阅读并同意隐私条款", type: "info" });
|
|
return;
|
|
}
|
|
if (!this.userdata.name || !this.userdata.mobile) {
|
|
this.$message({ message: "请填写姓名和电话", type: "info" });
|
|
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>
|