<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>积分中心</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" type="text/css" href="css/mui.min.css" /> <link rel="stylesheet" type="text/css" href="css/iconfont.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <style> .jifen-top{position: relative;border-bottom: 10px solid #f2f2f2;} .jifen-top img{ display: block; width: 100%; } .jifen-middle{position: absolute;top: 50%;left: 40px;right: 40px;height: 24px;margin-top: -12px;color: #fff;} .jifen-middle .mui-table-cell{vertical-align: middle;} .jifen-middle strong{font-size: 26px;} .jifen-middle .mui-btn{border-radius: 25px;border: 0;padding: 3px 12px 3px 12px;color: #727171;font-size: 12px;} .jifen-title{color: #333;font-size: 18px;font-weight: bold;margin-bottom: 20px;} .jifen-box{padding:28px 16px;border-bottom: 10px solid #f2f2f2;} .btn-go-shop{border-radius: 25px;padding:3px 16px 3px 16px;color: #727171;border: 1px solid rgba(0,0,0,.3);font-size: 12px;} .date-yuan{width: 39px;border: 1px solid rgba(0,0,0,.1);border-radius: 40px;text-align: center;padding: 8px 0;font-size: 12px;color: #666;} .table-yuan{border-radius: 25px;border: 1px solid rgba(0,0,0,.1);padding: 7px 16px;} .jifen-list>li{margin: 15px 0;} .jifen-list>li>.mui-table{ margin: 10px 0; } .jifen-list .mui-h5{color: #999;} .mui-col-xs-10{vertical-align: middle;} .mui-pull-bottom-pocket{height: 0px;} </style> <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> <script> //屏蔽分享 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); }); </script> </head> <body style="background: #fff;"> <div class="loading-bg"> <div class="mui-loading"> <div class="mui-spinner"> </div> 加载中... </div> </div> <div class="mui-content"> <div class="jifen-top"> <img src="images/jifen-bg.jpg" /> <div class="jifen-middle"> <div class="mui-table"> <div class="mui-table-cell"> <strong class="user-integeal">0</strong> 积分 </div> <div class="mui-table-cell mui-text-right"> <button type="button" class="mui-btn go-integral-rule">积分规则</button> </div> </div> </div> </div> <div class="jifen-box"> <div class="jifen-title">积分商城</div> <img width="65%" src="images/jifen-next.jpg" /> </div> <div class="jifen-box"> <div class="jifen-title">领积分</div> <div> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-2" style="vertical-align: middle;"> <i class="iconfont icon-A-jifengouwuche" style="font-size: 40px;margin-left: 5px;"></i> </div> <div class="mui-table-cell mui-col-xs-7" style="padding-left: 5px;vertical-align: middle;"> <div>消费领积分</div> <p class="mui-h6 mui-ellipsis">消费10元,可获得1积分</p> </div> <div class="mui-table-cell mui-col-xs-3 mui-text-right" style="vertical-align: middle;"> <button type="button" class="mui-btn btn-go-shop">去下单</button> </div> </div> </div> </div> <div class="jifen-box" style="border: 0;padding-bottom: 50px;"> <div class="jifen-title">积分明细</div> <ul class="jifen-list"> <li id="pullrefresh_yhq_list" > <div></div> </li> <!-- <li> <div>2019年</div> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-2"> <div class="date-yuan"> 11.14 </div> </div> <div class="mui-table-cell mui-col-xs-10"> <div class="mui-table table-yuan"> <div class="mui-table-cell"> 购买滤芯 </div> <div class="mui-table-cell mui-text-right"> <i>+2699</i> </div> </div> </div> </div> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-2"> <div class="date-yuan"> 11.14 </div> </div> <div class="mui-table-cell mui-col-xs-10"> <div class="mui-table table-yuan"> <div class="mui-table-cell"> 购买滤芯 </div> <div class="mui-table-cell mui-text-right"> <i class="mui-h5">-2699</i> </div> </div> </div> </div> </li> <li> <div>2018年</div> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-2"> <div class="date-yuan"> 11.14 </div> </div> <div class="mui-table-cell mui-col-xs-10"> <div class="mui-table table-yuan"> <div class="mui-table-cell"> 购买滤芯 </div> <div class="mui-table-cell mui-text-right"> <i>+2699</i> </div> </div> </div> </div> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-2"> <div class="date-yuan"> 11.14 </div> </div> <div class="mui-table-cell mui-col-xs-10"> <div class="mui-table table-yuan"> <div class="mui-table-cell"> 购买滤芯 </div> <div class="mui-table-cell mui-text-right"> <i class="mui-h5">-2699</i> </div> </div> </div> </div> </li> --> </ul> </div> </div> <script type="text/javascript" src="js/mui.min.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript"> window.addEventListener('pageshow', function(e) { // 通过persisted属性判断是否存在 BF Cache if(e.persisted) { location.reload(); } }); var pageNO = 0, pageSize = 10; mui.init({ pullRefresh: { container: '#pullrefresh_yhq_list', down: { height: 0, //callback: pulldownRefresh }, up: { contentdown: '', contentrefresh: '正在加载...', contentnomore: '', callback: pullupRefresh } // down: { // height: 75, // callback: false, // }, // up: { // auto: false, // offset: 100, //距离底部高度(到达该高度即触发) // show: true, // contentdown: '', // contentrefresh: '正在加载...', // contentnomore: '', // callback: pullupRefresh // }, } }); /** * 上拉加载具体业务实现 */ function pullupRefresh() { ++pageNO; //每次上拉页数+1 $.ajax(base_path + '/wechat/integralLog/getIntegral?dates=' + new Date().getTime(), { data: { pageSize:pageSize, pageNO:pageNO }, dataType: 'json', type: 'post', timeout: 15000, xhrFields: { withCredentials: true }, crossDomain: true, success: function(dt) { console.log(dt); if(dt.isRedirect) { location.href = dt.redirectURL; }else{ mui('#pullrefresh_yhq_list').pullRefresh().endPullupToRefresh(dt.data.list.length < pageSize); //endPullupToRefresh(ture)表示没有更多数据了,停止上拉加载 var html=''; for(var i=0;i<dt.data.list.length;i++){ var item = dt.data.list[i]; var newDate = new Date(item.inteLogCreateTime); var year = newDate.getFullYear(); var month = newDate.getMonth() + 1; var date = newDate.getDate(); html+='<div class="mui-table integral-li" year="'+ year +'">' html+='<div class="mui-table-cell mui-col-xs-2"><div class="date-yuan">'+ month +'.'+ date +'</div></div>' html+='<div class="mui-table-cell mui-col-xs-10">' html+='<div class="mui-table table-yuan">' html+='<div class="mui-table-cell">'+ item.inteConfName +'</div>' if(item.inteLogType == 1){ html+='<div class="mui-table-cell mui-text-right"><i>+'+ item.inteLogChangeNum +'</i></div>' }else if(item.inteLogType == 2){ html+='<div class="mui-table-cell mui-text-right"><i>-'+ item.inteLogChangeNum +'</i></div>' } html+='</div>' html+='</div>' html+='</div>' } $('#pullrefresh_yhq_list').append(html); setYear(); } }, error: function(xhr, type, errorThrown) { errorfn(xhr) } }); } mui.ready(function() { document.querySelector('.loading-bg').style.display = 'none'; mui('#pullrefresh_yhq_list').pullRefresh().pullupLoading(); //首次加载 $.ajax(base_path + '/wechat/agent/member?dates=' + new Date().getTime(), { dataType: 'json', type: 'post', timeout: 15000, xhrFields: { withCredentials: true }, crossDomain: true, success: function(dt) { if(dt.isRedirect) { location.href = dt.redirectURL; } else { var data = dt.data; if(dt.status) { $(".user-integeal").html(data.userSurplusIntegral); } } }, error: function(xhr, type, errorThrown) { console.log(xhr) } }); }); $(document).on('tap', '.go-integral-rule', function() { location.href='integral-rule.html'; }); $(document).on('tap', '.btn-go-shop', function() { location.href='pro-list.html'; }); function setYear(){ var oldyear = ''; $("#pullrefresh_yhq_list").find(".integral-li").each(function(){ var year = $(this).attr('year')+'年'; if(oldyear != year){ oldyear = year; var $prevNode = $(this).prev() //返回上一个兄弟节点 var yearVal = ''; if($prevNode != null){ yearVal = $prevNode.html(); } if(yearVal != year){ $(this).before("<div>"+ year +"</div>"); } } }) } </script> </body> </html>