-
Notifications
You must be signed in to change notification settings - Fork 38
/
join.html
124 lines (122 loc) · 5.36 KB
/
join.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Join ECNU_ITers</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/view-design/dist/iview.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div id="app">
<Row>
<i-col span="12" offset="6">
<Card shadow>
<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<Form-Item label="出生门派" prop="dept">
<Radio-Group v-model="formValidate.dept">
<Radio border label="CS">CS</Radio>
<Radio border label="SEI">SEI</Radio>
<Radio border label="DASE">DASE</Radio>
</Radio-Group>
</Form-Item>
<Form-Item label="入学年份" prop="year">
<Date-Picker type="date" placeholder="选择你的入学年份" v-model="formValidate.year"></Date-Picker>
</Form-Item>
<Form-Item label="如何称呼" prop="name">
<i-input v-model="formValidate.name" placeholder="你想要我们怎么称呼你"></i-input>
</Form-Item>
<Form-Item label="GitHub" prop="github">
<i-input v-model="formValidate.github" placeholder="GitHub用户名（用户名，不是昵称）">
<span slot="prepend">https://github.com/</span>
</i-input>
</Form-Item>
<Form-Item label="联系方式" prop="contact">
<i-input v-model="formValidate.contact" placeholder="如果你想的话，留下QQ/微信/邮箱，但最多只能留一个"></i-input>
</Form-Item>
<Form-Item label="甩个链接" prop="url">
<i-input v-model="formValidate.url" placeholder="如果你想的话，留下个人主页/知乎/博客等，但最多只能留一个"></i-input>
</Form-Item>
<Form-Item label="想说的话" prop="notes">
<i-input v-model="formValidate.notes" type="textarea" :autosize="{minRows: 2, maxRows: 5}" show-word-limit maxlength=255 placeholder="任何想说的话（自我介绍/内推广告/交友宣言……）"></i-input>
</Form-Item>
<Form-Item>
<i-button type="primary" long @click="handleSubmit('formValidate')">提交</i-button>
</Form-Item>
</i-form>
</Card>
</i-col>
<Row>
</div>
<script>
new Vue({
el: '#app',
data: {
formValidate: {
dept: '',
year: '',
name: '',
github: '',
contact: '',
url: '',
notes: ''
},
ruleValidate: {
dept: [
{ required: true, message: '这是必填项', trigger: 'blur' }
],
year: [
{ required: true, message: '这是必填项', trigger: 'blur', pattern: /.+/},
],
name: [
{ required: true, message: '这是必填项，你可以写任何你喜欢的昵称', trigger: 'change' }
],
github: [
{ required: true, message: '这是必填项（用户名，不是昵称）', trigger: 'change' }
]
}
},
methods: {
clear() {
this.formValidate = {
dept: '',
year: '',
name: '',
github: '',
contact: '',
url: '',
notes: ''
}
},
handleSubmit (name) {
this.$refs[name].validate((valid) => {
const yearPossible = (new Date(this.formValidate.year).getFullYear()) <= (new Date().getFullYear())
if (valid && yearPossible) {
this.$Spin.show();
$.ajax({
type: 'POST',
url: 'https://ecnu-iters-automation.herokuapp.com/join',
contentType: 'application/json',
data: JSON.stringify(this.formValidate),
})
.then((res) => {
if (res === 'OK') {
this.$Message.success('提交成功')
this.$Spin.hide();
window.location = 'https://github.com/ECNUCSE/ECNU_ITers/'
} else {
this.$Message.error('提交失败')
}
})
} else {
this.$Message.error('数据校验未通过')
}
})
},
}
});
</script>
</body>
</html>