<!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>