charles
/
h5pay.green.akuhome
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实践的活动

Browse Source
master
zhoujian 5 years ago
parent ed86d32544
commit b9c2fcb7b1
3 changed files with 344 additions and 0 deletions
Show Stats Download Patch File Download Diff File

7
application/index/controller/Index.php
Unescape View File

@ -25,6 +25,13 @@ class Index extends Controller
$this->assign('data',$data);
return $this->fetch();
}
//社会实践教育
public function practice(){
$data=db('activity')->where('id',28)->find();
$data['son']=db('activity')->where('parentid',$data['id'])->order('sonid asc')->select();
$this->assign('data',$data);
return $this->fetch();
}
//获取班级页面
public function getClass(){

337
application/index/view/index/practice.html
Unescape View File

@ -0,0 +1,337 @@
<!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="https://cdn.staticfile.org/vue/2.2.2/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>
<link rel="stylesheet" type="text/css" href="/index.css?640523">
</head>
<body><div id="app" :class="bodyOver?'van-over':''" >
<div class="toptitle">社会实践教育活动</div>
<img src="__IMG__/jimg1.png" style="width:100%;display: block" />
<div class="bottomDiv" style="padding-top: 20px;">
<div class="beforeCon">
<div class="title"><img src="__IMG__/icon2.png" />前言<img src="__IMG__/icon1.png" /></div>
<div class="content">
社会实践教育是新时代党对教育的新要求，是中国特色社会主义教育制度的重要内容，是全面发展教育体系的重要组成部分，是大中小学必须开展的教育活动。实践教育是发挥劳动的育人功能，对学生进行热爱劳动和热爱劳动人民的教育活动。当前实施劳动实践教育的重点是在系统的文化知识学习之外，有目的、有计划地组织学生参加日常生活劳动、生产劳动和服务性劳动，让学生动手实践、出力流汗，接受锻炼、磨炼意志，培养学生正确劳动价值观和良好劳动品质。
</div>
</div>
<div style="font-weight: bold;text-align: center">
<div style="display: inline;position:relative;text-align: center;">
<img src="__IMG__/praicon.png" style="position: absolute;left:-30px;"/>
在这里你将会<br />得到</div>
<div style="clear: both;"></div>
</div>
<div style="display: flex;margin-top: 30px;">
<div style="flex: 1;margin:10px 5px 10px 10px;background: #F5F1F4;">
<div style="color:#298A52;font-size: 14px;text-align: center">
<div style="margin: 0 auto;margin-top:-20px;"><img src="__IMG__/jicon1.png" /></div>
树立正确的观念</div>
<div style="color:#666666;font-size: 12px;padding: 5px;">正确理解劳动是人类发展和社会进步的根本力量，认识劳动创造人、劳动创造价值、创造财富、创造美好生活的道理，尊重劳动，尊重普通劳动者，牢固树立劳动最光荣、劳动最崇高、劳动最伟大、劳动最美丽的思想观念。</div>
</div>
<div style="flex: 1;margin:10px 10px 10px 5px;background: #F5F1F4;">
<div style="color:#298A52;font-size: 14px;text-align: center">
<div style="margin: 0 auto;margin-top:-20px;"><img src="__IMG__/jicon2.png" /></div>
具有必备的能力</div>
<div style="color:#666666;font-size: 12px;padding: 5px;">掌握基本的劳动知识和技能，正确使用常见劳动工具，增强体力、智力和创造力，具备完成一定劳动任务所需要的设计、操作能力及团队合作能力。 </div>
</div>
</div>
<div style="display: flex;margin-top: 30px;" >
<div style="flex: 1;margin:10px 5px 10px 10px;background: #F5F1F4;">
<div style="color:#298A52;font-size: 14px;text-align: center">
<div style="margin: 0 auto;margin-top:-20px;"><img src="__IMG__/jicon3.png" /></div>
培育积极的精神</div>
<div style="color:#666666;font-size: 12px;padding: 5px;">领会“幸福是奋斗出来的”内涵与意义，继承中华民族勤俭节约、敬业奉献的优良传统，弘扬开拓创新、砥砺奋进的时代精神。</div>
</div>
<div style="flex: 1;margin:10px 10px 10px 5px;background: #F5F1F4;">
<div style="color:#298A52;font-size: 14px;text-align: center">
<div style="margin: 0 auto;margin-top:-20px;"><img src="__IMG__/jicon4.png" /></div>
培养良好的习惯和品质</div>
<div style="color:#666666;font-size: 12px;padding: 5px;">能够自觉自愿、认真负责、安全规范、坚持不懈地参与劳动，形成诚实守信、吃苦耐劳的品质。珍惜劳动成果，养成良好的消费习惯，杜绝浪费。 </div>
</div>
</div>
<div style="display: flex;margin-top: 30px;">
<div style="flex: 1;margin:10px;background: #F5F1F4;">
<div style="color:#298A52;font-size: 14px;text-align: center">
<div style="margin: 0 auto;margin-top:-20px;"><img src="__IMG__/jicon5.png" /></div>
提升有效的安全技能和意识</div>
<div style="color:#666666;font-size: 12px;padding: 5px;">通过心肺复苏、交通、创伤救护、地震等等安全技能的教学，提升学生的自救互救技能，拓宽学生的自我保护意识。</div>
</div>
</div>
<div class="tongTitle">
报名须知
</div>
<div class="tongContent">
①缴费报名前请先确认社会实践教育活动时间及学校，再点击“马上报名”，进入页面后按照栏目信息提示填写学生缴费信息，确认无误后点击“提交信息”，进入页面后再次确认报名信息无误后点击“确认提交”，最后进入页面确认无误后点击“确认支付”。<br/>
②如若系统无法进入或操作失误，请立即联系系统工程师。朱先生：18906611076
</div>
<div class="tongTitle">
实践时间及学校报名
</div>
<div class="tongContent">
<!--1-1-->
{volist name="$data['son']" id="vo"}
<div class="enroll">
<div class="left" style="font-size: 12px;">{$vo['title']}</div>
<div class="middle">
<div>报名人数{$vo['buy_num']}</div>
<div class="progress">
<div class="progressSon" style="width:100%"></div>
</div>
<div>
{$vo['start_time']}
</div>
</div>
<div class="right" data-title="{$data['title']}" data-start_time=" {$vo['start_time']}" data-style="{$data['style']}" data-id="{$vo['id']}" data-price="{$vo['price']}" data-school="{$vo['title']}" @click="enroll($event)">马上报名</div>
</div>
{/volist}
<!--活动1结束-->
</div>
<!--弹窗显示-->
<div class="pop_bg" v-show="popShow" @click="enrollClose">
</div>
<div class="pop_con" v-show="popShow">
<div class="close" @click="enrollClose"><img src="__IMG__/iconClose.png" /></div>
<div style="margin:0 20px;">
<!--<div class="list">活动主题：{{title}}</div>-->
<div class="list">活动时间：{{start_time}}</div>
<!--<div class="list">活动价格：{{price}}</div>-->
<div style="align-items:center; display: -webkit-flex;justify-content:center; display: -webkit-flex;margin:20px 0px;">
<div style="height: 1px;border-top:1px solid #E6E6E6;flex: 1;"></div>
<div style="margin:0 10px;font-size: 12px;color: #666666">信息填写</div>
<div style="height: 1px;border-top:1px solid #E6E6E6;flex: 1;"></div>
</div>
<div :class="canSub===false?'myInput':'myInput inputDis'" style="display:flex;align-items: center;">性别<span>*</span>
<div style="width:20px;"></div> 男<input style='width: 16px;height:16px;' value="1" v-model='addForm.sex' type="radio" />
<div style="width:20px;"></div>女<input style='width: 16px;height:16px;' value="2" v-model='addForm.sex' type="radio" />
</div>
<div :class="canSub===false?'myInput':'myInput inputDis'">
姓名<span>*</span><input @blur="handleInput" class='inputText' v-model='addForm.name' type="text" :readonly="canSub===false ? false : 'readonly'"/></div>
<div :class="canSub===false?'myInput':'myInput inputDis'">学校<span>*</span><input @blur="handleInput" class='inputText' v-model='addForm.school' type="text" :readonly="canSub===false ? false : 'readonly'"/></div>
<div :class="canSub===false?'myInput':'myInput inputDis'">班级<span>*</span>
<!--<input @blur="handleInput" class='inputText' v-model='addForm.grade' placeholder="例如:高一（2）班" type="text" :readonly="canSub===false ? false : 'readonly'"/>-->
<select @blur="handleInput" class='inputText' v-model='addForm.grade' :readonly="canSub===false ? false : 'readonly'">
<option value="">请选择班级</option>
<option v-for="item in acClass" :value="item.name">{{item.name}}</option></select>
</div>
<div :class="canSub===false?'myInput':'myInput inputDis'">手机<span>*</span><input @blur="handleInput" class='inputText' v-model='addForm.phone' type="text" :readonly="canSub===false ? false : 'readonly'"/></div>
<!--<div :class="canSub===false?'myInput':'myInput inputDis'">身份证<span>*</span><input @blur="handleInput" class='inputText' v-model='addForm.sfz' type="text" :readonly="canSub===false ? false : 'readonly'"/></div>-->
</div>
<div class="myBottom">
<div v-if="!canSub" :class="canSubBg===true?'myInputSub shiColor':'myInputSub'" @click="submitData">提交信息</div>
<div v-if="canSub" class="myInputSub kongColor" @click="canSub=false">修改信息</div>
<div v-if="canSub" class="myInputSub shiColor" @click.once="submitPay">确认提交</div>
</div>
</div>
</div></body>
<script>
new Vue({
el: '#app',
data: {
popShow:false,
title:'',
start_time:'',
style:'',
price:'',
acClass:[],
addForm:{
'name':'',
'sex':0,//1男2女
'school':'',
'grade':'',
'phone':'',
'sfz':'',
'id':''
},
canSub:false,//是否能提交
canSubBg:false,//改变背景颜色
bodyOver:false,//不允许body滚动
},
methods:{
handleInput(){
//判断是否可以提交
if(!this.addForm.name){
return false;
}
if(!this.addForm.sex){
return false;
}
if(!this.addForm.school){
return false;
}
if(!this.addForm.grade){
return false;
}
if(!this.addForm.phone){
return false;
}
// if(!this.addForm.sfz){
// return false;
// }
//改变背景
this.canSubBg=true
},
selectThis(active){
this.active=active
},
enroll(e){
this.title=e.target.dataset.title;
this.start_time=e.target.dataset.start_time;
this.style=e.target.dataset.style;
this.price=e.target.dataset.price;
this.addForm.id=e.target.dataset.id;
this.addForm.school=e.target.dataset.school;
console.log(this.title,this.start_time,this.style,this.addForm.id)
this.popShow=true
this.bodyOver=true
//去获取班级
axios.post('/index.php/index/index/getClass',{aid:this.addForm.id}).then(res=>{
this.acClass=res.data
}).catch(function (error) { // 请求失败处理
// console.log(error);
});
},
enrollClose(){
this.popShow=false
this.bodyOver=false
},
submitData(){
if(!this.addForm.name){
alert('请填写姓名')
return false;
}
if(!this.addForm.school){
alert('请填写学校')
return false;
}
if(!this.addForm.grade){
alert('请填写班级')
return false;
}
if(!this.addForm.grade){
alert('请填写手机')
return false;
}
if(!this.addForm.sex){
alert('请选择性别')
return false;
}
// if(!this.addForm.sfz){
// alert('请填写身份证')
// return false;
// }
this.canSub=true
},
submitPay(){
axios.post('/index.php/index/index/insertOrder',this.addForm).then(res=>{
console.log(res)
if(res.data.code=='SUCCESS'){
//调用支付
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);
});
}
},
})
$('.pop_bg').css('height',$(window).height())
// $('#app').css('height',$(window).height())
// $('#app').css('overflow','auto')
// 判断设备类型
var judgeDeviceType = function() {
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIOS = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
return {
isIOS: isIOS,
isAndroid: isAndroid
}
}()
// 监听输入框的软键盘弹起和收起事件
function listenKeybord($input) {
if (judgeDeviceType.isIOS) {
// IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
$input.addEventListener('focus', function() {
console.log('IOS 键盘弹起啦！');
// IOS 键盘弹起后操作
}, false)
// IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
$input.addEventListener('blur', () => {
console.log('IOS 键盘收起啦！');
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
// IOS 键盘收起后操作
})
}
// Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
if (judgeDeviceType.isAndroid) {
var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', function() {
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (originHeight < resizeHeight) {
console.log('Android 键盘收起啦！');
// Android 键盘收起后操作
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
} else {
console.log('Android 键盘弹起啦！');
// Android 键盘弹起后操作
}
originHeight = resizeHeight;
}, false)
}
}
var $inputs = document.querySelectorAll('.inputText');
for (var i = 0; i < $inputs.length; i++) {
listenKeybord($inputs[i]);
}
</script>
</html>

BIN
public/images/praicon1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

Write Preview
Loading…
Cancel
Save