bydauto/web-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init
All checks were successful
Deploy to Production / deploy (push) Successful in 15s
Details

Browse Source
This commit is contained in:
梁朝伟 2024-11-13 19:43:51 +08:00
parent 4d2f449c87
commit 6ef3007852
2 changed files with 151 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -12,7 +12,7 @@ max_line_length = 150
[*.md] [*.md]
trim_trailing_whitespace = false trim_trailing_whitespace = false
[*.{yml,yaml}] [*.{yml,yaml,js,html,css,scss}]
indent_size = 2 indent_size = 2
[docker-compose.yml] [docker-compose.yml]

298
public/static/testdrive.html
View File

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