This commit is contained in:
梁朝伟
parent
4d2f449c87
commit
6ef3007852
@ -12,7 +12,7 @@ max_line_length = 150
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.{yml,yaml}]
|
||||
[*.{yml,yaml,js,html,css,scss}]
|
||||
indent_size = 2
|
||||
|
||||
[docker-compose.yml]
|
||||
|
||||
@ -1,153 +1,155 @@
|
||||
<!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 :loading="isLoading" type="primary" native-type="submit" @click="submitFn" style="display: block; width: 100%">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<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>
|
||||
</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();
|
||||
|
||||
<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: [],
|
||||
};
|
||||
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: "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>
|
||||
},
|
||||
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: "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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user