<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>订单提交</title> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../assets/css/weui.min.css" /> <link rel="stylesheet" type="text/css" href="../css/myweui.min.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/swiper-3.4.2.min.css" /> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_3se1rq7vwl5.css" /> <script type="text/javascript" src="../assets/font/iconfont.js"></script> <script type="text/javascript" src="../js/base.js"></script> <link rel="stylesheet" href="../css/orders_submitted.css" /> <style> .weui-picker__group { font-size: 0.3rem; } .mold { display: none; } .weui-picker__action:first-child { text-align: left; color: #888; } .sss { display: none; } /*.move3 { display: none; }*/ .move { display: none; } .move_main { animation: move 0.18s; } @keyframes move { 0% { height: 1rem; } 50% { height: 4rem; } 100% { height: 4.55rem; } } .move_main3 { animation: move 0.18s; } .mold_out { display: none; } </style> </head> <body> <div class="taocan"> 套餐信息 </div> <div class="information"> <ul> <li class="mingcheng"> <span> 套餐名称 </span > <span class="liang"> 8/13~8/15 两天攀岩活动 </span> </li> <li class="mingcheng ming pelpe"> <div class='li_span'> <span> 出行时间 </span> <span class="liang lian "> <span class="showcang">2018/07/03 至 2018/07/07</span> </span> </div> <span> <i class="iconfont icon-common-jinru-copy"></i> </span> </li> <li class="mingcheng shuliang" id="shuliang"> <span> 购买数量 </span> <div class="suan"> <span class="reduce" id="del">-</span> <span class="val" id="quantity">1</span> <span class="add" id="add">+</span> </div> </li> <li class="mingcheng chu"> <span class="chuxing"> 出行信息 </span> </li> </ul> </div> <a href="Pedestrian_choice.html"> <div class="chengke"> <span>乘客信息</span> <div class="xuan"> <span class="xuanze"> 请选则出行人 </span> <i class="iconfont icon-common-jinru-copy"></i> </div> </div> </a> <div class="qita"> 其他信息 </div> <ul class="youhui"> <a href="discountCoupon.html"> <li class="you"> <span> 优惠券 </span > <div class="wu"> <span class="liang lian waitmoney" > ¥5代金券 </span> <span> <i class="iconfont icon-common-jinru-copy"></i> </span> </div> </li> </a> <li class="shang titles"> <div> 商家备注 <span>(限十字以内)</span> </div> <input type="text" placeholder="点击可给商家留言" class="liang lian1"/> </li> <li class="dan jus"> <span> 单房差(一人一房) </span > <div class='dan_box'> <span class="liang lian2" > 请选择 </span> <span> <i class="iconfont icon-common-jinru-copy"></i> </span> </div> </li> <li class="dan1 me"> <div class="danxuan"> <i class="iconfont icon-duigou"></i> </div> <div class="wo">我已同意 <a href="agreement.html" class="phurse">购买协议和合同协议</a> </div> </li> </ul> <div class="zhezhao"> </div> <footer> <span>定金:¥600</span> <span>总价:¥1185</span> <!--<a href="orderPay.html">--> <input type="button" value="提交订单" class="sub" id="sub" /> <!--</a>--> </footer> <div class='mold'> <div class='mold_main'> <span class="fon30"> 是否允许绑定手机号码? </span> <span> <span class="fon30" id="no">否</span> <span class="fon30 green" id="yes">允许</span> </span> <span class="fon26"> 注:绑定后可获得¥10代金券一张 </span> </div> </div> <div class='move'> <div class='move_main'> <div class="change"> <div class="fang"> <span class="call"> 取消 </span> <span class="single1"> 单人间 (一人一房) </span> <span class="confirm"> 确定 </span> </div> </div> <div class="required"> <span class="yes">需要</span> <span>不需要</span> </div> </div> </div> <div class='move1'> <div class='move_main1'> <div class="shang2"> <div class="shang1"> <span class="choose"> 选择支付方式 </span> </div> <div class="shang1 shan1 shang_list"> <div class="shang1_inner"> <div class="img_out"> <img src="../images/yue.png" alt="" class="yue" /> </div> <div> 余额支付 </div> </div> <div> <i class='iconfont icon-xuanzhong2'></i> </div> </div> <div class="shang1 shan1"> <div class="shang1_inner"> <div class="img_out"> <img src="../images/wei.png" alt="" class="yue" /> </div> <div> 微信支付 </div> </div> <div> <i class='iconfont'></i> </div> </div> <div class="shang1 shan1"> <div class="shang1_inner"> <div class="img_out"> <img src="../images/zhi.png" alt="" class="yue" /> </div> <div> 支付宝支付 </div> </div> <div> <i class='iconfont'></i> </div> </div> <div class="agreepay"> 确认支付 </div> </div> </div> </div> <div class='mold_out'> <div class='mold_center'> <div class="scroll_out"> <div class="scroll"> <div class="money"> <div class="year_change"> <img src="../images/circle1.png"/> <span>2018/07/03 至 2018/07/06</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/07</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/08</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/09</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/09</span> </div> <div class="price">¥1190</div> </div> <div class="money"> <div class="year_change"> <img src="../images/circle.png"/> <span>2018/07/03 至 2018/07/09</span> </div> <div class="price">¥1190</div> </div> </div> <button class="bottom_button" value="">确定</button> </div> </div> </div> <!--点击输入要绑定的手机号--> <div class='move3'> <div class='move_main3'> <span class="tie_phone">输入绑定的手机号:</span> <input type="text" class="phone_input" placeholder="请输入手机号" /> <span class="phone_btn"><span class="agreed">确认</span></span> </div> </div> </div> <script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script> <script type="text/javascript" src="../assets/js/swiper-3.4.2.min.js"></script> <script type="text/javascript" src="../assets/js/weui.js"></script> <script type="text/javascript" src="../assets/js/myweui.js"></script> <script type="text/javascript" src="../index.js"></script> <script> $(function() { //获取选择出行人页面的数据 var name = decodeURI(getQueryString('name')).replace(/,/g, ' '); if(!name) { $('.xuanze').html('请选择出行人'); } else { $('.xuanze').html(name); } function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r) return unescape(r[2]); //return null; return '请选择出行人'; } $('.money img').click(function(event) { $(this).attr("src", "../images/circle1.png"); $(this).parents('.money').siblings().find('img').attr("src", "../images/circle.png"); }); //获取选择选择代金券的数据 var price = decodeURI(getQueryString_money('price')).replace(/,/g); if(!price) { $('.waitmoney').html('请选择代金券'); } else { $('.waitmoney').html('代金券¥' + price); } function getQueryString_money(price) { var reg = new RegExp("(^|&)" + price + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r) return unescape(r[2]); return ''; } var mold = $('.mold'); $('.mold').click(function() { $(this).hide(); }) $('.mold_main').click(function(e) { e.stopPropagation(); }) $('.move_main3').click(function(e) { e.stopPropagation(); }) $('.move3').click(function() { $(this).hide(); }) //点击增加 $("#add").click(function() { console.log(1); numAdd(); }); $("#del").click(function() { numDec(); }); /*商品数量+1*/ function numAdd() { var num_add = parseInt($("#quantity").html()) + 1; $("#quantity").html(num_add); } /*商品数量-1*/ function numDec() { if($("#quantity").html() <= 1) { return false; } var num_dec = parseInt($("#quantity").html()) - 1; $("#quantity").html(num_dec); } //我已同意购买协议和合同协议 $(".danxuan").click(function() { if($('.icon-duigou').css('display') == 'none') { $('.icon-duigou').css('display', 'block'); } else { $('.icon-duigou').css('display', 'none'); } }); $('.sub').click(function() { $('.mold').css('display', 'block'); }) $('.dan').click(function() { $('.move').css('display', 'block'); }) $('#yes').click(function() { $('.mold').css('display', 'none'); if($('.mold').css('display') == 'none') { $('.move3').css('display', 'block'); } }) $('#no').click(function() { $('.mold').css('display', 'none'); if($('.mold').css('display') == 'none') { $('.move1').css('display', 'block'); } }) $('.move_main').click(function(e) { e.stopPropagation(); }) $('.move_main1').click(function(e) { e.stopPropagation(); }) $('#sub').click(function() { }) var liangVal = $('.lian2').html(); var tem = ''; $('.required span').click(function(e) { tem = $(this).html(); $(this).css('color', 'red'); $(this).siblings().css('color', '#000'); }); $('.call').click(function() { $('.lian2').html(liangVal); }) $('.confirm').click(function(e) { $('.lian2').html(tem); liangVal = tem; $('.move').css('display', 'none'); }) $('.call').click(function(e) { $('.move').css('display', 'none'); }) $('.move').click(function(e) { $('.move').css('display', 'none'); }) }) $('.pelpe').click(function() { $('.mold_out').css('display', 'block'); }) var index = 0; var num = 0; $('.bottom_button').click(function() { var inputLength = $('.mold_center').find('i').length; for(var i = 0; i < inputLength; i++) { if($('.mold_center').find('i').eq(i).attr("class") == "iconfont icon-radiobox") { num = num + 1; index = i; } } if(num == 0) { $('.mold_out').css('display', 'none'); } else { $('.showcang').html($('.mold_center').find('span').eq(index).html()); $('.mold_out').css('display', 'none'); } }) $('.shan1').click(function() { $(this).find('i').attr('class', 'iconfont icon-xuanzhong2'); $(this).siblings().find('i').attr('class', 'iconfont'); }) $('.move1').click(function() { $(this).css('display', 'none'); }) $('.phone_btn').click(function() { $('.move3').css('display', 'none'); }) $('.dainji').click(function(){ $('.dainji').css('display', 'none'); $('.texteare1').focus(); }) </script> </body> </html>