<!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" /> <script type="text/javascript" src="../js/base.js"></script> <link rel="stylesheet" type="text/css" href="../assets/css/weui.min.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/swiper-3.4.2.min.css" /> <!--<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />--> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_6y9erxzbkn2.css" /> <link rel="stylesheet" href="../css/common.css" /> <script type="text/javascript" src="../assets/font/iconfont.js"> </script> <link rel="stylesheet" href="../css/myOrder.css" /> <style type="text/css"> .inputStyle { width: 6.86rem; height: 0.8rem; font-size: 0.32rem; border: 1px solid rgba(235, 235, 235, 1); border-radius: 0.4rem; margin: 0.2rem auto; display: flex; align-items: center; justify-content: center; text-align: center; color: #999; background: #fff; z-index: 99; } .icon-sousuo { font-size: 0.3rem; /*color: #ccc;*/ margin-right: 0.2rem; margin-top: -0.09rem; font-size: 0.4rem; } .inputItem { padding-top: 0.06rem; outline: none; border: none; color: #777; width: 73%; height: 100%; /* padding-left: 2rem; */ text-align: left; overflow: hidden; } .head { padding-bottom: 0.2rem; position: fixed; top: 0; background: #fff; justify-content: center; display: flex; width: 100%; z-index: 100; height: 1rem; } </style> </head> <body> <div class="head"> <div id="" class="inputStyle" onclick=""> <i class="iconfont icon-sousuo"></i> <input class="inputItem" type="text" value="" placeholder="搜索订单号" /> <span class="sou_right">搜索</span> </div> </div> <!-- 待付定金--> <div class="choice" id="topNav"> <div class="swiper-wrapper"> <div class="swiper-slide active_top"> <span>全部</span> </div> <div class="swiper-slide "> 待付定金 </div> <div class="swiper-slide"> 已付定金 </div> <div class="swiper-slide"> 待付尾款 </div> <div class="swiper-slide"> 待完成 </div> <div class="swiper-slide"> 待评价 </div> <div class="swiper-slide"> 已完成 </div> </div> </div> <!--待付定金--> <div class="good_out_stay" data-id="1111"> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">待付定金</span> </div> <div class="goods"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> <div class="btnlist"> <div class="btnleft can">取消</div> <div class="btnright ">付款</div> </div> </div> <!--已付定金--> <div class="good_out_payed"> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">已付定金</span> </div> <div class="goods yifu"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> </div> <div class="good_out_paybalance"> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">待付尾款</span> </div> <div class="goods"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> <div class="btnlist"> <div class="btnright ">付款</div> </div> </div> <div class="good_out_tocomplete"> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">待完成</span> </div> <div class="goods yifu"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> </div> <!--待评价--> <div class="ping"> <div class="good_out_evaluate"> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">待评价</span> </div> <div class="goods"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> <div class="btnlist"> <div class="pingjia">评价</div> </div> </div> </div> <div class="complated"> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">已完成</span> </div> <div class="goods"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> <div class="btnlist"> <!--<div class="btnleft">取消</div>--> <div class="btnright ">删除</div> </div> </div> <div class="cancels"> <div> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">已取消</span> </div> </div> <div class="goods"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> <div class="btnlist"> <!--<div class="btnleft">取消</div>--> <div class="btnright ">删除</div> </div> </div> <!--已退款--> <div class="good_out_refundmoney"> <div class="good"> <span>订单号:20180808001</span> <span class="confirmed">已退款</span> </div> <div class="goods yifu"> <div class="pic_row"> <span class="rock"> <span class="pic"> <img src="../images/banner1.jpg" alt="" /> </span> <span class="two"> <span>两天攀岩活动</span> <span class="price"> <span>定金 ¥600</span> <span>价格 ¥1190</span> </span> </span> </span> </div> <span class="five"> x5 </span> </div> </div> <!--确认取消弹出框--> <div class="confirm_cancel"> <div class="confirm_main"> <div class="hint"> 确认取消? </div> <div class="true">确定取消订单吗?</div> <div class="choose"> <span class="confirm_yes">取消</span> <span class="confirm_no">确定</span> </div> </div> </div> <!--toast--> <div id="toast" style='display: none;'> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <!--<i class="weui-icon-success-no-circle weui-icon_toast"></i>--> <p class="weui-toast__content">已完成</p> </div> </div> <script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script> <script type="text/javascript" src="../js/swiper-3.4.2.jquery.min.js"></script> <script> //初始化 var mySwiper = new Swiper('#topNav', { freeMode: true, freeModeMomentumRatio: 0.5, slidesPerView: 'auto', // loop:true, slideToClickedSlide: true, observer: true, observeParents: true, }); </script> </body> </html> <script type="text/javascript" src="../assets/js/common.js"></script> <script type="text/javascript" src="../assets/js/jquery-2.1.0.js"></script> <script type="text/javascript" src="../js/swiper-3.4.2.jquery.min.js"></script> <script> //确认取消弹出框 $('.can').click(function() { var id = $(this).parents('.good_out').data("id"); console.log(id); $('.confirm_cancel').css('display', 'block'); $('.confirm_yes').click(function() { console.log("点击确定按钮获取整个li的id为:" + id); $('.confirm_cancel').css('display', 'none'); }) $('.confirm_no').click(function() { $('.confirm_cancel').css('display', 'none'); }) $('.confirm_main').click(function() { event.stopPropagation(); // $(this).css('display','none'); }) }) //确认取消弹出框 $('.btnright').click(function() { var id = $(this).parents('.good_out').data("id"); console.log(id); $('.confirm_cancel').css('display', 'block'); $('.confirm_yes').click(function() { console.log("点击确定按钮获取整个li的id为:" + id); $('.confirm_cancel').css('display', 'none'); }) $('.confirm_no').click(function() { $('.confirm_cancel').css('display', 'none'); }) $('.confirm_main').click(function() { event.stopPropagation(); // $(this).css('display','none'); }) }) //阻止按钮的点击冒泡 $('.btnlist').click(function(event) { event.stopPropagation(); }); $('.choice .swiper-slide').click(function() { $(this).addClass("active_top").siblings().removeClass("active_top");; }) //点击跳转到待付定金页面 $('.good_out_stay').click(function() { window.location.href = 'refund.html'; }) //点击跳转到已付定金页面 $('.good_out_payed').click(function() { window.location.href = 'payed.html'; }) $('.pingjia').click(function() { window.location.href = 'evaluate.html'; }) $('.complated').click(function() { window.location.href = 'complated.html'; }) $('.cancels').click(function() { window.location.href = 'cancel.html'; }) $('.ping').click(function() { window.location.href = 'speak.html'; }) //点击跳转到待付尾款页面 $('.good_out_paybalance').click(function() { window.location.href = 'paybalance.html'; }) //点击跳转到待完成页面 $('.good_out_tocomplete').click(function() { window.location.href = 'tocomplete.html'; }) //点击跳转到待完成页面 $('.good_out_evaluate').click(function() { window.location.href = 'evaluate.html'; }) //点击跳转到已退款页面 $('.good_out_refundmoney').click(function() { window.location.href = 'refundmoney.html'; }) </script> <script> $('.sou_right').click(function() { var val = $('.inputItem').val(); var patrn = /^[0-9]*$/; if(!patrn.test(val)) { toast('请输入数字'); } }) </script>