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