前端 vue 静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0"
/>
<title>星火云鸽线上测试申请通道</title>
<style>
* {
margin: 0;
}
#app {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url("./img/backdrop.jpg");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow-y: auto;
}
.header {
position: absolute;
top: 0;
left: 32px;
width: calc(100% - 64px);
height: 120px;
}
.conter {
position: absolute;
left: 16px;
bottom: 16px;
width: calc(100% - 32px);
height: calc(100% - 150px);
">white;
border-radius: 12px;
overflow-y: auto;
}
.conter_top {
display: block;
width: calc(100% - 160px);
height: 40px;
margin: 0 auto;
}
.form {
padding: 10px 30px 0 30px;
}
.formname {
line-height: 26px;
font-size: 16px;
font-family: Microsoft YaHei; Microsoft YaHei;
color: rgba(51, 51, 51, 1);
padding-left: 12px;
position: relative;
}
.formname .red {
color: rgba(255, 0, 30, 1);
}
.formname .xx {
position: absolute;
top: 8px;
left: 0;
width: 8px;
height: 8px;
}
.input{
min-height: 28px;
width: calc(100% - 8px);
margin-bottom: 20px;
}
.footer{
padding-bottom: 10px;
}
.footer .btn{
margin-bottom: 10px;
position: relative;
}
.btn .sub{
margin:0 auto;
width: 70%;
height: 50px;
color: white;
font-size: 18px;
text-align: center;
line-height: 50px;
background-image: url("./img/submit.png");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.footer .comm{
color: #999999;
text-align: center;
font-size: 14px;
}
.list{
position: relative;
}
.err{
position: absolute;
bottom: 0;
left: 0;
color: rgba(255, 0, 30, 1);
font-size: 14px;
}
</style>
</head>
<body>
<div id="app" class="app">
<img class="header" src="./img/banner.png" />
<div class="conter">
<img class="conter_top" src="./img/entering.png" />
<div class="form">
<div class="list">
<div class="formname">
<img class="xx" src="./img/xx.png" />学校名称
<span class="red">（必填）</span>
</div>
<input
class="input"
v-model="applyinfo.schoolname"
type="text"
maxlength="32"
/>
<div v-if="errobj.schoolname" class="err">学校名称不能为空</div>
</div>
<div class="list">
<div class="formname">
<img class="xx" src="./img/xx.png" />联系人
<span class="red">（必填）</span>
</div>
<input
class="input"
v-model="applyinfo.account"
type="text"
maxlength="32"
/>
<div v-if="errobj.account" class="err">联系人不能为空</div>
</div>
<div class="list">
<div class="formname">
<img class="xx" src="./img/xx.png" />联系电话
<span class="red">（必填）</span>
</div>
<input
class="input"
v-model="applyinfo.phone"
type="text"
max="16"
/>
<div v-if="errobj.phone" class="err">联系电话不能为空</div>
</div>
<div class="list">
<div class="formname" style="padding-left: 0">
应用学生数量
<span style="color: #999999">（选填）</span>
</div>
<input
class="input"
v-model="applyinfo.stunum"
type="number"
max="8"
/>
</div>
<div class="list">
<div class="formname" style="padding-left: 0">
学校地址
<span style="color: #999999">（选填）</span>
</div>
<input
class="input"
v-model="applyinfo.schooladdr"
type="text"
maxlength="64"
/>
</div>
<div class="list">
<div class="formname" style="padding-left: 0">
其它
<span style="color: #999999">（选填）</span>
</div>
<textarea
class="input"
v-model="applyinfo.comm"
type="text"
rows="4"
maxlength="512"
>
</textarea>
</div>
<div class="footer">
<div class="btn">
<div class="sub" @click="submit">提交申请</div>
</div>
<div class="comm">温馨提示：此活动最终解释权河南星火燎原所有</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
applyinfo: {
schoolname: "",
account: "",
phone: "",
stunum: "",
schooladdr: "",
comm: ""
},
errobj: {
schoolname: false,
account: false,
phone: false
}
},
computed: {},
watch: {
"applyinfo.schoolname": {
handler(val) {
if (val) {
this.errobj.schoolname = false;
}
}
},
"applyinfo.account": {
handler(val) {
if (val) {
this.errobj.account = false;
}
}
},
"applyinfo.phone": {
handler(val) {
if (val) {
if (val.length > 16) {
this.applyinfo.phone = val.slice(0, 16);
}
this.errobj.phone = false;
}
}
},
"applyinfo.stunum": {
handler(val) {
if (val) {
if (val.length > 8) {
this.applyinfo.stunum = val.slice(0, 8);
}
this.errobj.phone = false;
}
}
}
},
created() {
this.init();
},
mounted() {},
methods: {
init() {},
submit() {
if (!this.applyinfo.schoolname) {
this.errobj.schoolname = true;
this.to_top();
return;
}
if (!this.applyinfo.account) {
this.errobj.account = true;
this.to_top();
return;
}
if (!this.applyinfo.phone) {
this.errobj.phone = true;
this.to_top();
return;
}
//访问本地json文件
// var xhr = new XMLHttpRequest();
// xhr.open("get", `./export.json`, true);
// xhr.send();
// xhr.onreadystatechange = () => {
// if (xhr.readyState == 4 && xhr.status == 200) {
// let res = JSON.parse(xhr.responseText);
// this.list = res;
// }
// };
this.applyinfo.stunum = parseInt(this.applyinfo.stunum);
let form = JSON.parse(JSON.stringify(this.applyinfo));
var xhr = new XMLHttpRequest();
xhr.open("post", `https://scapi.xhkjedu.com/fc/add`);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(form));
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let res = JSON.parse(xhr.responseText);
if (res.code == 0) {
window.location.href = ["./success.html"];
} else {
alert(res.msg);
}
}
};
},
to_top() {
this.$nextTick(() => {
let conter = document.querySelector(".conter");
if (conter) {
conter.scrollTop = 0;
}
});
}
}
});
</script>
</html>
