|
|
<!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?645203">
|
|
|
</head>
|
|
|
<body><div id="app" :class="bodyOver?'van-over':''" >
|
|
|
<div class="header">
|
|
|
<div :class="active===0?'item isselect':'item'" @click="selectThis(0)"><a href="#activity1">城市探索</a></div>
|
|
|
<!--<div :class="active===1?'item isselect':'item'" @click="selectThis(1)"><a href="#activity2">烘焙探索</a></div>-->
|
|
|
<div :class="active===2?'item isselect':'item'" @click="selectThis(2)"><a href="#activity3">桥梁探索</a></div>
|
|
|
<div :class="active===3?'item isselect':'item'" @click="selectThis(3)"><a href="#activity4">运河探索</a></div>
|
|
|
</div>
|
|
|
<div style="height: 44px;"></div>
|
|
|
<img src="__IMG__/img1.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
<div class="bottomDiv">
|
|
|
<div class="beforeCon">
|
|
|
<div class="title"><img src="__IMG__/icon2.png" />前言<img src="__IMG__/icon1.png" /></div>
|
|
|
<div class="content">
|
|
|
宁波市青少年绿色学校2020暑期研学夏令营火热开启 2020年，不同寻常的一年。诸多事件引发我们对社会、经济、文化与教育的不同思考，未来社会对教育提出了不同要求，暑期不该成为“第三学期”，更应该是学生认识世界、发展素养与自我生长的时机。宁波市青少年绿色学校综合多年研学夏令营实践经验，借鉴项目制、跨学科、体验式等教育思想，针对不同年龄学生身心特点，整合资源精心设计研学课程。
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--活动1开始-->
|
|
|
<div style="height: 44px;" id="activity1"></div>
|
|
|
<div>
|
|
|
<img src="__IMG__/tansuo/img1.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img2.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img3.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img4.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img5.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img6.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img7.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img8.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img9.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img10.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img11.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img12.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img13.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img14.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img15.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/tansuo/img16.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongTitle">
|
|
|
报名联系
|
|
|
</div>
|
|
|
|
|
|
<div class="tongContent">
|
|
|
陈老师：13008902078<br />
|
|
|
董老师：13065835527<br />
|
|
|
</div>
|
|
|
<div class="tongTitle">
|
|
|
选择营期
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
{volist name="one['son']" id="vo" }
|
|
|
{if condition="$one['max_num'] eq $vo['buy_num']"}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$vo['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']}-{$vo['end_time']}</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
已满营
|
|
|
</div>
|
|
|
</div>
|
|
|
{else /}
|
|
|
{if condition="$one['end_time'].' 16' < date('Y-m-d H')"}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$vo['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']|strtotime|date='n月j日',###}-{$vo['end_time']|strtotime|date='n月j日',###}</div>
|
|
|
</div>
|
|
|
<div class="right">已截止</div>
|
|
|
</div>
|
|
|
{else /}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$one['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']}-{$vo['end_time']}</div>
|
|
|
</div>
|
|
|
<div class="right" data-title="{$two['title']}" data-start_time="{$vo['start_time']}-{$vo['end_time']}" data-style="{$vo['style']}" data-id="{$vo['id']}" @click="enroll($event)">马上报名</div>
|
|
|
</div>
|
|
|
{/if}
|
|
|
{/if}
|
|
|
{/volist}
|
|
|
</div>
|
|
|
<!--活动1结束-->
|
|
|
<!--活动2 的烘焙被删除了-->
|
|
|
<!--活动3开始-->
|
|
|
<div style="height: 44px;" id="activity3"></div>
|
|
|
<!--<div class="middle">-->
|
|
|
<!--<div class="title">-->
|
|
|
<!--<img src="__IMG__/icon5.png" />{$two['title']}-->
|
|
|
<!--</div>-->
|
|
|
<!--<div class="content">-->
|
|
|
<!--<img src="__IMG__/img5.png" style="width:100%;margin-top:2px;display: block" />-->
|
|
|
<!--</div>-->
|
|
|
<!--</div>-->
|
|
|
<div>
|
|
|
<img src="__IMG__/qiao/img1.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img2.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img3.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img4.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img5.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img6.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img7.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img8.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img9.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img10.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img11.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img12.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
<img src="__IMG__/qiao/img13.png" style="width:100%;margin-top:0px;display: block" />
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!--<div class="tongTitle">-->
|
|
|
<!--报名须知-->
|
|
|
<!--</div>-->
|
|
|
<!--<div class="tongContent">-->
|
|
|
<!--人数：{$two['min_num']}-{$two['max_num']}人<br />-->
|
|
|
<!--费用：{$two['price']}元<br />-->
|
|
|
<!--形式：{$two['style']}<br />-->
|
|
|
<!--</div>-->
|
|
|
|
|
|
|
|
|
<div class="tongTitle">
|
|
|
报名联系
|
|
|
</div>
|
|
|
|
|
|
<div class="tongContent">
|
|
|
王老师13685734780 <br />
|
|
|
董老师 13065835527<br />
|
|
|
</div>
|
|
|
|
|
|
<div class="tongTitle">
|
|
|
选择营期
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
{volist name="two['son']" id="vo" }
|
|
|
{if condition="$one['max_num'] eq $vo['buy_num']"}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$vo['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']}-{$vo['end_time']}</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
已满营
|
|
|
</div>
|
|
|
</div>
|
|
|
{else /}
|
|
|
{if condition="$vo['end_time'].' 16' < date('Y-m-d H')"}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$vo['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']|strtotime|date='n月j日',###}-{$vo['end_time']|strtotime|date='n月j日',###}</div>
|
|
|
</div>
|
|
|
<div class="right">已截止</div>
|
|
|
</div>
|
|
|
{else /}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$one['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']}-{$vo['end_time']}</div>
|
|
|
</div>
|
|
|
<div class="right" data-title="{$two['title']}" data-start_time="{$vo['start_time']}-{$vo['end_time']}" data-style="{$vo['style']}" data-id="{$vo['id']}" @click="enroll($event)">马上报名</div>
|
|
|
</div>
|
|
|
{/if}
|
|
|
{/if}
|
|
|
{/volist}
|
|
|
</div>
|
|
|
<!--活动3结束-->
|
|
|
<!--活动4开始-->
|
|
|
<div style="height: 44px;" id="activity4"></div>
|
|
|
<div class="middle">
|
|
|
<div class="title">
|
|
|
<!--<img src="__IMG__/icon6.png" />-->
|
|
|
{$three['title']}
|
|
|
|
|
|
</div>
|
|
|
<div style="font-size: 10px;color: #999999;text-align: center;">山川湖海间 | 兴衰浮沉里</div>
|
|
|
<div class="content">
|
|
|
<img src="__IMG__/yunhe/img1.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--<div class="tongTitle">-->
|
|
|
<!--浙东运河探索营-->
|
|
|
<!--</div>-->
|
|
|
|
|
|
<div class="tongContent">
|
|
|
这是一条活了2500年的“生命线”，沟通了宁绍地区与钱塘江流域，连接着星罗棋布的河流湖泊，贯穿了人口稠密的水网平原，通江达海，联内畅外，至今依然发挥作用，浙东社会的经济文化，因之发生持续、深入地变化。 </div>
|
|
|
<div class="tongContent" style="display: flex;align-items: center">
|
|
|
<img src="__IMG__/yunhe/img2.png" style="width:50%;margin-top:2px;display: block" />
|
|
|
<img src="__IMG__/yunhe/img3.png" style="width:50%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
历经千年持续的开凿、使用和改造，这条运河保存了一系列堰坝、水闸、纤道、桥梁和渡口等水利交通遗产，同时也串联起一个个河巷交织、条理有序的大城小镇，众多衙署、寺庙、会馆、官仓、驿站、商铺、民居、石宕以及名人史迹散落其中，舜禹传说，曹娥故事，东山再起，唐诗之路，海丝之路，宁波商帮，白玉长提，乌篷画船……
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
<img src="__IMG__/yunhe/img4.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
我们将运河分成“通江达海”、“余虞北线”、“山阴故道”、“西兴运河”四段，历时五天半穿梭于田野、农舍、城镇、景点，设计开发成研学探索活动，从细节入手，与资料印证，用脚步去丈量，用心灵去探索，经历山川湖海，感受浮沉兴衰，去窥见运河背后历史、地理、社会、经济、科技和文化的发展变迁，从中沟通历史、现在与未来，磨砺身心发展综合素养。
|
|
|
</div>
|
|
|
<div class="tongContent" style="display: flex;align-items: center">
|
|
|
<div> <img src="__IMG__/yunhe/img5.png" style="width:100%;margin-top:2px;display: block" /></div>
|
|
|
<div> <img src="__IMG__/yunhe/img6.png" style="width:100%;margin-top:2px;display: block" /></div>
|
|
|
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
课程针对不同年龄学生，有不同侧重，分为初高版与小初版。<br />
|
|
|
小初版：更多神话故事、诗词文学、名人传奇、美食特产与游乐项目，以参观游览、任务驱动与问题解决的形式打开旅途，强调亲身体验与丰富感受，重视即时、限时的信息整理与观点输出，训练思维品质发展综合素养。
|
|
|
</div>
|
|
|
<div class="tongContent" style="display: flex;align-items: center">
|
|
|
<div> <img src="__IMG__/yunhe/img7.png" style="width:100%;margin-top:2px;display: block" /></div>
|
|
|
<div> <img src="__IMG__/yunhe/img8.png" style="width:100%;margin-top:2px;display: block" /></div>
|
|
|
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
初高版：对历史、地理、文化的宏观与一定深度的理解（历史感），适当安排专家对话与资料了解，强调与运河的亲密接触（骑行、徒步、划行），在真实情境中感悟世事变迁，保持一定运动强度从中磨砺身心。
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
<img src="__IMG__/yunhe/img9.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
<img src="__IMG__/yunhe/img10.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
<img src="__IMG__/yunhe/img11.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
<img src="__IMG__/yunhe/img12.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
<img src="__IMG__/yunhe/img13.png" style="width:100%;margin-top:2px;display: block" />
|
|
|
</div>
|
|
|
<div class="tongTitle">
|
|
|
报名优惠
|
|
|
</div>
|
|
|
|
|
|
<div class="tongContent">
|
|
|
（1）转发朋友圈集赞50个，优惠100元/人；<br />
|
|
|
（2）两人同行各得100元/人，四人同行各得200元/人；<br />
|
|
|
（3）医护人员子女、老师子女，凭相关证明优惠100元/人；<br />
|
|
|
</div>
|
|
|
<div class="tongContent" style="display: flex;align-items: center">
|
|
|
<div> <img src="__IMG__/yunhe/img14.png" style="width:100%;margin-top:2px;display: block" /></div>
|
|
|
<div> <img src="__IMG__/yunhe/img15.png" style="width:100%;margin-top:2px;display: block" /></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tongTitle">
|
|
|
其他事项
|
|
|
</div>
|
|
|
|
|
|
<div class="tongContent">
|
|
|
1、 报到、出营地点。江北三B酒店大堂报到集合；<br />
|
|
|
2、 携带物品。身份证，手机（下载支付宝完成健康码登记），口罩；<br />
|
|
|
3、 衣物穿戴。可穿短裤，运动鞋或徒步鞋，戴帽子，2到3套衣物；<br />
|
|
|
4、 防晒防暑。水杯，防晒霜，护袖，围脖，清凉油等防暑防蚊用品；<br />
|
|
|
5、 学习用品。水笔，水彩笔，手机（有使用规则）。<br />
|
|
|
</div>
|
|
|
|
|
|
<div class="tongTitle">
|
|
|
报名联系
|
|
|
</div>
|
|
|
|
|
|
<div class="tongContent">
|
|
|
|
|
|
何老师:15967814079<br />
|
|
|
廖老师:13777018554<br />
|
|
|
董老师:13065835527<br />
|
|
|
</div>
|
|
|
|
|
|
<div class="tongTitle">
|
|
|
报名须知
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
人数：{$three['min_num']}-{$three['max_num']}人<br />
|
|
|
<!--费用：{$three['price']}元<br />-->
|
|
|
形式：{$three['style']}<br />
|
|
|
</div>
|
|
|
<div class="tongTitle">
|
|
|
选择营期
|
|
|
</div>
|
|
|
<div class="tongContent">
|
|
|
{volist name="three['son']" id="vo" }
|
|
|
{if condition="$one['max_num'] eq $vo['buy_num']"}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$vo['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']}-{$vo['end_time']}</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
已满营
|
|
|
</div>
|
|
|
</div>
|
|
|
{else /}
|
|
|
{if condition="$vo['end_time'].' 16' < date('Y-m-d H')"}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$vo['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']|strtotime|date='n月j日',###}-{$vo['end_time']|strtotime|date='n月j日',###}</div>
|
|
|
</div>
|
|
|
<div class="right">已截止</div>
|
|
|
</div>
|
|
|
{else /}
|
|
|
<div class="enroll">
|
|
|
<div class="left">{$vo['title']}</div>
|
|
|
<div class="middle">
|
|
|
<div>报名进度{$vo['buy_num']}/{$one['max_num']}</div>
|
|
|
<div class="progress">
|
|
|
<div class="progressSon" style="width: {$vo['buy_num']/$vo['max_num']*100}%"></div>
|
|
|
</div>
|
|
|
<div>{$vo['start_time']}-{$vo['end_time']}</div>
|
|
|
</div>
|
|
|
<div class="right" data-title="{$two['title']}" data-start_time="{$vo['start_time']}-{$vo['end_time']}" data-style="{$vo['style']}" data-id="{$vo['id']}" @click="enroll($event)">马上报名</div>
|
|
|
</div>
|
|
|
{/if}
|
|
|
{/if}
|
|
|
{/volist}
|
|
|
</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}}-{$vo['end_time']}</div> -->
|
|
|
<div class="list">活动时间：{{start_time}}</div>
|
|
|
<div class="list">活动形式：{{style}}</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' 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.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,
|
|
|
active:0,
|
|
|
title:'',
|
|
|
start_time:'',
|
|
|
style:'',
|
|
|
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.addForm.id=e.target.dataset.id;
|
|
|
console.log(this.title,this.start_time,this.style,this.addForm.id)
|
|
|
this.popShow=true
|
|
|
this.bodyOver=true
|
|
|
},
|
|
|
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);
|
|
|
});
|
|
|
},
|
|
|
//滚动条监听
|
|
|
handleScroll(){
|
|
|
let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
|
|
|
let offsetTop = document.querySelector('#activity1').offsetTop
|
|
|
// console.log(scrollTop,offsetTop)
|
|
|
if(scrollTop > offsetTop-10){
|
|
|
this.active = 0
|
|
|
}
|
|
|
// offsetTop = document.querySelector('#activity2').offsetTop
|
|
|
// if(scrollTop > offsetTop-10){
|
|
|
// this.active = 1
|
|
|
// }
|
|
|
offsetTop = document.querySelector('#activity3').offsetTop
|
|
|
if(scrollTop > offsetTop-10){
|
|
|
this.active = 2
|
|
|
}
|
|
|
offsetTop = document.querySelector('#activity4').offsetTop
|
|
|
if(scrollTop > offsetTop-10){
|
|
|
this.active = 3
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
window.addEventListener('scroll', this.handleScroll,true)
|
|
|
},
|
|
|
|
|
|
})
|
|
|
$('.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> |
