新外卖商家端主页订单大厅页面
使用mui双webview,实现下拉刷新上拉加载
主页面：
order_index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <title>直播生活商家端-订单大厅</title> <script src="../../js/flexible.js"></script> <script src="../../js/mui.min.js"></script> <link rel="stylesheet" href="../../fonts/iconfont.css" /> <link rel="stylesheet" href="../../css/mui.min.css" /> <link rel="stylesheet" href="../../css/init.css" /> <link rel="stylesheet" type="text/css" href="../../css/gz_css.css" /> </head> <body style="background-color: #f7f7f7"> <header class="mui-bar mui-bar-nav gz_bar"> <h1 class="mui-title">订单大厅</h1> </header> <div class="mui-content gz_order_index"> </div> <div class="gz_button_box_show"></div> <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="../../js/Vue.js"></script> <script src="../../js/common.js"></script> <script type="text/javascript"> //启用双击监听 mui.init({ gestureConfig:{ doubletap:true }, subpages:[{ url:'./order_index_sub.html', id:'order_index_sub.html', styles:{ top: '45px', bottom: '0px', } }] }); var contentWebview = null; document.querySelector('header').addEventListener('doubletap',function () { if(contentWebview==null){ contentWebview = plus.webview.currentWebview().children()[0]; } contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)"); }); </script> </body> </html>
order_index_sub.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <title>直播生活商家端-订单大厅</title> <script src="../../js/flexible.js"></script> <script src="../../js/mui.min.js"></script> <link rel="stylesheet" href="../../fonts/iconfont.css" /> <link rel="stylesheet" href="../../css/mui.min.css" /> <link rel="stylesheet" href="../../css/init.css" /> <link rel="stylesheet" type="text/css" href="../../css/gz_css.css" /> </head> <style> .btn-block { margin: 0 auto; width: 4rem; height: 1.5rem; /*line-height:2rem;*/ /*background-color: #00BF70;*/ text-align: center; position: relative; z-index: 99; } .gz_jiedan { display: inline-block; } .no-content{ width:2rem; height: 2rem; } .no-con-box{ text-align: center; padding-top: 50%; } .no-con-box p{ padding-top: 0.5rem; } .mui-content { background-color: #f7f7f7 !important; } </style> <body style="background-color: #f7f7f7"> <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll gz_order_index" id="order_index"> <!--数据列表--> <div class="gz_box"> <div v-if="!ishave"> <div class="no-con-box"> <img src="../../img/no_content.png" class="no-content"/> <p>暂无内容</p> </div> </div> <div v-if="ishave"> <ul class="mui-table-view gz_order_ul"> <li class="mui-table-view-cell mui-media gz_order_li gz_xiangqing" v-for="val in order"> <a href="javascript:;" class="gz_order_li_a"> <div class="gz_order_top"> <span class="gz_order_top_left">订单号：<em>{{val.order_sn}}</em></span> <span class="gz_order_top_right">{{val.add_time}}</span> </div> <div class="gz_order_index_li_body"> <div class="gz_order_body_1" :data-id="val.order_id"> <h1><em>{{val.order_id}} {{val.consignee}}</em>{{val.mobile}}</h1> </div> <div class="gz_order_body_2" :data-id="val.order_id"> <h1><span>12:00</span><span>前送达</span></h1> <ul> <li v-for="val2 in val.goods_list"> <h3>{{val2.goods_name}}</h3> <h4>x{{val2.goods_num}}</h4> <h5>￥{{val2.goods_price}}</h5> </li> </ul> </div> <div class="gz_order_body_3"> <div class="btn-block" :data-order_id="val.order_id"> <button type="button" class="mui-btn mui-btn-block mui-btn-primary gz_jiedan">接单</button> </div> </div> </div> </a> </li> </ul> </div> </div> </div> </div> <div class="gz_button_box_show"></div> <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="../../js/Vue.js"></script> <script src="../../js/common.js"></script> <script> //下拉刷新 mui.init({ pullRefresh: { container: "#pullrefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 swipeBack: false, keyEventBind: { backbutton: false //关闭back按键监听 }, up: { contentrefresh: '正在加载...', callback: pullupRefresh }, down: { height: 50, //可选,默认50.触发下拉刷新拖动距离, auto: true, //可选,默认false.首次加载自动下拉刷新一次 contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容 callback: pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } } }); var count = 0; //上拉加载 function pullupRefresh() { var _this = order_index_vue; mui.ajax(site_url + '/Home/Business/getOrderList', { data: { token: plus.storage.getItem('token'), type: _this.type, page: _this.page }, dataType: 'json', //服务器返回json格式数据 type: 'post', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒,超时报错； headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function(data) { //服务器返回响应，根据响应结果，分析是否登录成功； console.log(JSON.stringify(data)) if(data.data.length < _this.pageSize) { _this.order.push.apply(_this.order, data.data); mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。 } else { _this.order.push.apply(_this.order, data.data); mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); _this.pageNumber++; } }, error: function(xhr, type, errorThrown) { //异常处理； console.log(type); } }); } /** * 下拉刷新具体业务实现 */ function pulldownRefresh() { var _this = order_index_vue; mui.plusReady(function() { console.log(plus.storage.getItem('token')) console.log(_this.pageNumber) console.log(_this.pageSize) console.log(_this.type) if(plus.storage.getItem('token')) { mui.ajax(site_url + '/Home/Business/getOrderList', { data: { token: plus.storage.getItem('token'), type: _this.type, page: _this.page }, dataType: 'json', //服务器返回json格式数据 type: 'post', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒,超时报错； headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function(data) { console.log(JSON.stringify(data)) //服务器返回响应，根据响应结果，分析是否登录成功； if(JSON.stringify(data.data) == "[]") { console.log("没有数据了") _this.order = data.data; _this.pageNumber = 1; _this.ishave = false; } else { _this.order = data.data; _this.pageNumber = 2; _this.ishave = true; } }, error: function(xhr, type, errorThrown) { //异常处理； console.log(type); } }); } else { mui.toast('没有登录' + data.message, { duration: 'long', type: 'div' }) } }); setTimeout(function() { mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); }, 1500) } </script> <script type="text/javascript" charset="utf-8"> mui.init({}); var order_index_vue = new Vue({ el: '#order_index', data: { order: [], //order page: 1, ishave: true, pageSize: 10, type: 0 }, methods: { get_over_info: function(oid) { console.log("这是" + oid); //oid.stopPropagation(); //阻止冒泡 var that = this; mui.ajax(site_url + '/Home/Business/businessAcceptOrder', { data: { token: plus.storage.getItem('token'), order_id: oid }, dataType: 'json', //服务器返回json格式数据 type: 'post', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒,超时报错； headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function(data) { console.log("你哥哥" + JSON.stringify(data)); mui.toast(data.msg, { duration: '200', type: 'div' }) if(data.status == 1) { mui.toast(data.msg, { duration: '200', type: 'div' }) } else { mui.toast(data.msg, { duration: '200', type: 'div' }) } }, error: function(xhr, type, errorThrown) { console.log('网络错误'); } }); } } }) // 跳详情 $("body").on("tap", ".gz_order_body_1", function(e) { //console.log(111); e.stopPropagation(); console.log(this.getAttribute("data-id")); var id = this.getAttribute("data-id"); //获取产品的data-id // console.log(id); // alert(id); mui.openWindow({ url: "../order/order_details.html", id: "order_details", extras: { order_index_id: id } }) }) $("body").on("tap", ".gz_order_body_2", function(e) { console.log("详情" + 111); e.stopPropagation(); var id = this.getAttribute("data-id"); //获取产品的data-id // alert(id); mui.openWindow({ url: "../order/order_details.html", id: "order_details", extras: { order_index_id: id } }) }) // 执行ajax进我的订单 mui('body').on('tap', '.btn-block', function(e) { console.log(mui(this)[0].dataset.order_id); var order_id = mui(this)[0].dataset.order_id; //获取 ：data的值 console.log(order_id); e.stopPropagation(); //阻止冒泡 // var botton = plus.webview.getWebviewById(subid); order_index_vue.get_over_info(order_id); var botton = plus.webview.getLaunchWebview(); // var botton = plus.webview.getWebviewById("botton.html"); console.log(JSON.stringify(botton)) mui.fire(botton, "jiedan", ''); //自定义事件 }) </script> </body> </html>