zjnbshifox
4 days ago
parent
71258e224b
commit
ef2045078e
@ -0,0 +1,371 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
|
||||||
|
<title>夏令营报名</title>
|
||||||
|
<script src="/vue.min.js"></script>
|
||||||
|
<script src="/axios.min.js"></script>
|
||||||
|
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/index.css?640523">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" class='summer' >
|
||||||
|
<!-- <div class="title center">夏令营报名</div> -->
|
||||||
|
<!-- 选择课程 -->
|
||||||
|
<el-row class="titleRow align-center" style="margin-top: 50px;">
|
||||||
|
<span class="text right">
|
||||||
|
选择课程：
|
||||||
|
</span>
|
||||||
|
<el-col :span='20'>
|
||||||
|
<el-select v-model="curriculum" placeholder="请选择" @change='selectCurriculum'>
|
||||||
|
<el-option
|
||||||
|
v-for="item in curriculumOpts"
|
||||||
|
:key="item.name"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.name">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- 选择课程 几期 -->
|
||||||
|
<el-row class="titleRow">
|
||||||
|
<span class="text right" style="line-height: 28px;">
|
||||||
|
选择课程：
|
||||||
|
</span>
|
||||||
|
<el-col :span='20' class="flex flex-wrap">
|
||||||
|
<div v-for='(item, index) in stage' :key='index' @click='select(item)' class="stage" :class="item.id === selectStage ? 'activeStage' : '' ">
|
||||||
|
{{item.name}}
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- 活动时间 -->
|
||||||
|
<el-row class="titleRow align-center">
|
||||||
|
<span class="text right">
|
||||||
|
活动时间：
|
||||||
|
</span>
|
||||||
|
<el-col :span='20'>
|
||||||
|
{{activeTime}}
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- 报名截止： -->
|
||||||
|
<el-row class="titleRow align-center">
|
||||||
|
<span class="text right">
|
||||||
|
报名截止：
|
||||||
|
</span>
|
||||||
|
<el-col :span='20'>
|
||||||
|
{{endTime}}
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<div class="flex align-center" style="margin: 40px 0px 20px">
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div style="margin: 0px 15px">信息填写</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 姓名 -->
|
||||||
|
<div class="infoRow align-center">
|
||||||
|
<span class="text right">
|
||||||
|
<span class="red " >*</span>
|
||||||
|
姓名
|
||||||
|
</span>
|
||||||
|
<el-col :span='16'>
|
||||||
|
<el-input v-model='name' placeholder='请输入学生姓名'></el-input>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
<!-- 性别 -->
|
||||||
|
<div class="infoRow align-center">
|
||||||
|
<span class="text right" >
|
||||||
|
<span class="red " >*</span>
|
||||||
|
性别
|
||||||
|
|
||||||
|
</span>
|
||||||
|
<el-col :span='16'>
|
||||||
|
<el-radio v-model="sex" label="1">男</el-radio>
|
||||||
|
<el-radio v-model="sex" label="2">女</el-radio>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
<!-- 手机 -->
|
||||||
|
<div class="infoRow align-center">
|
||||||
|
<span class="text right">
|
||||||
|
<span class="red " >*</span>
|
||||||
|
手机
|
||||||
|
</span>
|
||||||
|
<el-col :span='16'>
|
||||||
|
<el-input v-model='phone' placeholder='请填写手机号'></el-input>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
<!-- 学校 -->
|
||||||
|
<div class="infoRow align-center">
|
||||||
|
<span class="text right">
|
||||||
|
学校
|
||||||
|
</span>
|
||||||
|
<el-col :span='16'>
|
||||||
|
<el-input v-model='school' placeholder='请填写学校名称'></el-input>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
<!-- 班级 -->
|
||||||
|
<div class="infoRow align-center">
|
||||||
|
<span class="text right">
|
||||||
|
班级
|
||||||
|
</span>
|
||||||
|
<el-col :span='16'>
|
||||||
|
<el-input v-model='studentClass' placeholder='请填写班级'></el-input>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-row class="flex btnBox" v-if='btnStatus'>
|
||||||
|
已截止报名
|
||||||
|
</el-row>
|
||||||
|
<el-row class="flex btnBox" v-else>
|
||||||
|
<el-button class="btn" @click='submit' >提交信息</el-button>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
newDate: '',
|
||||||
|
dataList: [],
|
||||||
|
curriculum: '',
|
||||||
|
curriculumOpts: [],
|
||||||
|
selectStage: '',
|
||||||
|
stage: [],
|
||||||
|
activeTime: '',
|
||||||
|
endTime: '',
|
||||||
|
name: null,
|
||||||
|
sex: '1',
|
||||||
|
phone: '',
|
||||||
|
school: '',
|
||||||
|
studentClass: '',
|
||||||
|
btnStatus: false
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
let data = new Date()
|
||||||
|
this.newDate = data.getFullYear() + '-' + this.buling(data.getMonth() + 1) + '-' + this.buling(data.getDate())
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
endTime(val) {
|
||||||
|
console.log(val)
|
||||||
|
if (val <= this.newDate) {
|
||||||
|
this.btnStatus = true
|
||||||
|
} else {
|
||||||
|
this.btnStatus = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
buling (val) {
|
||||||
|
if (Number(val) < 10) {
|
||||||
|
return '0' + val
|
||||||
|
}
|
||||||
|
return val
|
||||||
|
},
|
||||||
|
getData () {
|
||||||
|
axios.post('/index.php/index/index/orderList',{type:1}).then(res=>{
|
||||||
|
console.log(res)
|
||||||
|
this.dataList = res.data
|
||||||
|
this.curriculumOpts = []
|
||||||
|
this.stage = []
|
||||||
|
if (res.data) {
|
||||||
|
res.data.forEach(item => {
|
||||||
|
let obj = {
|
||||||
|
name: item.title
|
||||||
|
}
|
||||||
|
this.curriculumOpts.push(obj)
|
||||||
|
})
|
||||||
|
this.curriculum = res.data[0].title
|
||||||
|
res.data[0].son.forEach(item => {
|
||||||
|
let obj = {
|
||||||
|
id: item.id,
|
||||||
|
name: item.title,
|
||||||
|
start_time_temp: item.start_time_temp,
|
||||||
|
end_time: item.start_time
|
||||||
|
}
|
||||||
|
this.stage.push(obj)
|
||||||
|
})
|
||||||
|
this.selectStage = res.data[0].son[0].id
|
||||||
|
this.activeTime = res.data[0].son[0].start_time_temp
|
||||||
|
this.endTime = res.data[0].son[0].start_time + ' 00:00'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submitData(){
|
||||||
|
if(!this.name){
|
||||||
|
alert('请填写姓名')
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(!this.phone){
|
||||||
|
alert('请填写手机')
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(!this.sex){
|
||||||
|
alert('请选择性别')
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
selectCurriculum (val) {
|
||||||
|
this.dataList.forEach(item => {
|
||||||
|
if (val === item.title) {
|
||||||
|
this.stage = []
|
||||||
|
this.selectStage = item.son[0].id
|
||||||
|
item.son.forEach(items => {
|
||||||
|
let obj = {
|
||||||
|
id: items.id,
|
||||||
|
name: items.title,
|
||||||
|
start_time_temp: items.start_time_temp,
|
||||||
|
end_time: items.start_time
|
||||||
|
}
|
||||||
|
this.stage.push(obj)
|
||||||
|
})
|
||||||
|
this.activeTime = this.stage[0].start_time_temp
|
||||||
|
this.endTime = this.stage[0].end_time + ' 00:00'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 选择第几期
|
||||||
|
select (val) {
|
||||||
|
console.log(val)
|
||||||
|
this.selectStage = val.id
|
||||||
|
this.activeTime = val.start_time_temp
|
||||||
|
this.endTime = val.end_time + ' 00:00'
|
||||||
|
},
|
||||||
|
submit () {
|
||||||
|
let pass = this.submitData()
|
||||||
|
if (pass) {
|
||||||
|
let params = {
|
||||||
|
id: this.selectStage,
|
||||||
|
grade: this.studentClass,
|
||||||
|
name: this.name,
|
||||||
|
school: this.school,
|
||||||
|
sex: this.sex,
|
||||||
|
phone: this.phone,
|
||||||
|
type: 2
|
||||||
|
}
|
||||||
|
axios.post('/index.php/index/index/insertOrder',params).then(res=>{
|
||||||
|
console.log(res)
|
||||||
|
if(res.data.code=='SUCCESS'){
|
||||||
|
//调用支付
|
||||||
|
// location.href = "{:HTTP}{:SITE_URL}/index.php/index/index/summerpay/"+res.data.id
|
||||||
|
location.href = "{:HTTP}{:SITE_URL}/index.php/index/index/dopay/id/"+res.data.id;
|
||||||
|
}else{
|
||||||
|
alert(res.data.msg)
|
||||||
|
}
|
||||||
|
}).catch(function (error) { // 请求失败处理
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.align-center{
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.summer{
|
||||||
|
position: relative;
|
||||||
|
padding: 0px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
width: 100%;
|
||||||
|
height: 25px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
.titleRow{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.summer .text{
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.el-select .el-input__inner{
|
||||||
|
border-radius: 30px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
.el-select .el-input__icon{
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.infoRow .el-input {
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
.stage{
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background: #F8F8F8;
|
||||||
|
padding: 4px 20px;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.activeStage{
|
||||||
|
background: #5FD19B;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider{
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 1px;
|
||||||
|
background: #E6E6E6;
|
||||||
|
}
|
||||||
|
.infoRow{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.infoRow .text{
|
||||||
|
width: 80px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.btnBox{
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.el-button{
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 17px;
|
||||||
|
background: linear-gradient(#5FD19B, #31A462);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 832 KiB |
|
After Width: | Height: | Size: 17 KiB |
Loading…
Reference in new issue