<!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="http://at.alicdn.com/t/font_773803_k1lcewwscuf.css" /> <script type="text/javascript" src="../assets/font/iconfont.js"> </script> <link rel="stylesheet" href="../css/discountCoupon.css" /> <style type="text/css"> .swiper-container { height: 3.6rem; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { left: 44%; } #wai2 { display: none; } #wai3 { display: none; } .icon-xuanzhong { display: none; } </style> </head> <body> <div class="out"> <div class="use"> <span id="nouse" class="active">待使用</span> <span id="outdata">已过期</span> <span id="used">已使用</span> </div> </div> <!--待使用优惠券--> <div class="wai1" id="wai1"> <div class="wai"> <div class="youhui"> <div class="circle"> <i class="iconfont icon-duigou"></i> </div> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <div class="money">¥<span class="money_five">5</span></div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> <div class="wai"> <div> <div class="youhui"> <div class="circle"> <i class="iconfont icon-duigou"></i> </div> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <div class="money">¥<span class="money_five">6</span></div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> <div> </div> </div> </div> </div> <!--已过期代金券--> <div id="wai2"> <div class="wai"> <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/outdate.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> <div> <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/outdate.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> </div> <!--已使用代金券--> <div id="wai3"> <div class="wai"> <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/use.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> <div> <div class="youhui"> <div class="quan"> <img src="../images/f2.png" alt="" /> <div class="dai"> <span class="outdate"><img src="../images/use.png" alt="" /></span> <div class="money">¥5</div> <div class="date"> <span>代金券</span> <span class="you">有效期:2018.08.06-2018.08.08</span> </div> </div> </div> </div> </div> </div> <div class="agree ok" onclick="agreeFun()">确定使用</div> </body> <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="index.js"></script> <script> var wai1 = $('#wai1'); var wai2 = $('#wai2'); var wai3 = $('#wai3'); var nouse = $('#nouse'); var outdata = $('#outdata'); var used = $('#used'); $('#nouse').click(function() { wai1.css('display', 'block'); wai2.css('display', 'none'); wai3.css('display', 'none'); nouse.css('color', '#FE0A01'); outdata.css('color', '#252729'); used.css('color', '#252729'); }) $('#outdata').click(function() { wai1.css('display', 'none'); wai2.css('display', 'block'); wai3.css('display', 'none'); nouse.css('color', '#252729'); outdata.css('color', '#FE0A01'); used.css('color', '#252729'); }) $('#used').click(function() { wai1.css('display', 'none'); wai2.css('display', 'none'); wai3.css('display', 'block'); nouse.css('color', '#252729'); outdata.css('color', '#252729'); used.css('color', '#FE0A01'); }) var circle = $('.wai1 .youhui .circle'); circle.click(function() { if($(this).find('.icon-duigou').css('color') == 'rgb(255, 255, 255)') { // alert(1) $(this).find('.icon-duigou').css('color', 'rgb(254, 10, 1)'); $(this).css('border', '0.02rem solid rgb(254, 10, 1)'); $(this).parents('.wai').siblings().find('.icon-duigou').css('color', 'rgb(255, 255, 255)'); $(this).parents('.wai').siblings().find('.circle').css('border', '0.02rem solid #999'); } else { // alert(2) $(this).find('.icon-duigou').css('color', 'rgb(255, 255, 255)'); $(this).css('border', '0.02rem solid #999'); } }) // 点击确定时,出行人名字添加到数组,回显到订单提交页面; function agreeFun() { var arr = [] for(var i = 0; i < $(".wai1 .wai").length; i++) { if($(".wai1 .wai").eq(i).find('.icon-duigou').css('color') == 'rgb(254, 10, 1)') { var price = $(".wai1 .wai").eq(i).find('.money_five').html(); arr.push(price); } } var price = encodeURI(encodeURI(arr)); var url = "orders_submitted.html?price=" + price; window.location.href = url; } </script> </html>