<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>订单大厅</title> <link href="../../css/mui.min.css" rel="stylesheet" /> <link href="../../fonts/iconfont.css" rel="stylesheet" /> <link href="../../css/lm_reset.css" rel="stylesheet" /> <link href="../../css/lm_pages.css" rel="stylesheet" /> </head> <body class="lm_graybg"> <!--头部开始--> <header class="mui-bar mui-bar-nav bg_fff lm_head_zb"> <h1 class="mui-title lm_head_zb_title">订单大厅</h1> </header> <!--头部结束--> <!--正文-主要内容--> <div class="mui-content lm_graybg"> <div class="lm_w94 lm_mar_top15"> <div> <!--一个订单--> <div class="lm_task_list_li lm_task_ListC2 bg_fff lm_mar_bot15 lm_smallyj" v-for="(order,index) in order_list" :key="order.order_id"> <!--01--> <div class="lm_task_list_num lm_li_pad04 lm_flex lm_flex_justBT lm_bor_bottom lm_f12" :data-order_id="order.order_id" @click="orderDetail"> <div class="lm_task_list_l lm_c_666"> 订单号：{{order.order_sn}} </div> <div class="lm_task_list_r lm_c_999"> {{order.add_time}} </div> </div> <!--01--> <!--02--> <div class="lm_task_listC lm_flex lm_flex_col_c lm_bor_bottom" :data-order_id="order.order_id" @click="orderDetail"> <!-- <div class="lm_task_date lm_c_666"> <div>12:00</div> <div>前送达</div> </div> --> <div class="lm_task_con lm_bor_l" style="100%;"> <div class="lm_task_con_top "> <div class="lm_task_con_top_r"> <div class="lm_task_con_li" v-for="(store,index) in order.store_list" :key="store.store_id+''+index"> <span class="lm_c_fff lm_task_con_top_l">取</span><i>{{store.store_name}}</i> </div> </div> </div> <div class="lm_task_con_top " style="margin-top: 5px;"> <div class="lm_task_con_top_r"> <div class="lm_task_con_li"> <span class="lm_c_fff lm_task_con_top_l">送</span><i class="lm_song">{{order.city}}{{order.district}}{{order.twon}}{{order.address}}</i> </div> </div> </div> </div> <!-- <div class="lm_task_money lm_mainc lm_f15 "> ¥<span class="lm_f15">66.00</span> </div> --> </div> <!--02--> <!--03--> <div class="lm_task_jiedan lm_mar10_top lm_mar10_bot lm_juzhong"> <button type="button" class="lm_w100 lm_c_fff lm_mainbg" :data-order_id="order.order_id" @click="I_DO">接单</button> </div> <!--03--> </div> <!--一个订单--> </div> </div> </div> <script src="../../js/mui.js"></script> <script src="../../js/vue.js"></script> <script src="../../js/domain.js"></script> <!--正文-主要内容--> <script type="text/javascript" charset="utf-8"> mui.init({ pullRefresh: { container: ".lm_w94", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 down: { style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式 color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色 height: '50px', //可选,默认50px.下拉刷新控件的高度, range: '100px', //可选 默认100px,控件可下拉拖拽的范围 offset: '0px', //可选 默认0px,下拉刷新控件的起始位置 auto: false, //可选,默认false.首次加载自动上拉刷新一次 callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据 //重置下拉加载 mui('.lm_w94').pullRefresh().refresh(true); //初始化列表 mainContainer.page = 1; mainContainer.getOrderList(); } }, up: { height: 50, //可选.默认50.触发上拉加载拖动距离 auto: false, //可选,默认false.自动上拉加载一次 contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容； callback: function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； mainContainer.page++; mainContainer.getOrderList(); } } } }); //实例化vue对象 var mainContainer = new Vue({ el: ".mui-content", created: function() { var that = this; mui.plusReady(function() { that.getOrderList(); }); }, data: { order_list: [], page: 1 }, methods: { //获取订单列表 getOrderList: function() { var that = this; mui.ajax(domain + '/Home/Rider/getOrderList', { data: { token: plus.storage.getItem("token"), page:this.page }, dataType: 'json', //服务器返回json格式数据 type: 'post', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒； success: function(data) { if (data.status == 1) { if(that.page == 1){ that.order_list = data.data; //结束下拉刷新 mui(".lm_w94").pullRefresh().endPulldown(); } else{ that.order_list = that.order_list.concat(data.data); } //上拉加载样式 if(data.data.length < 10){ //结束上拉加载 mui(".lm_w94").pullRefresh().endPullupToRefresh(true); }else{ //结束上拉加载 mui(".lm_w94").pullRefresh().endPullupToRefresh(false); } } else { that.order_list = []; //结束下拉刷新 mui(".lm_w94").pullRefresh().endPulldown(); //结束上拉加载 mui(".lm_w94").pullRefresh().endPullupToRefresh(true); classifyStatus(data.status); } }, error: function(xhr, type, errorThrown) { mui.toast("网络异常，请重新尝试", { type: "div" }); //结束下拉刷新 mui(".lm_w94").pullRefresh().endPulldown(); //结束上拉加载 mui(".lm_w94").pullRefresh().endPullupToRefresh(true); } }); }, //订单详情页 orderDetail(event) { mui.openWindow({ id: 'task_detail.html', url: './task_detail.html', extras: { order_id: event.currentTarget.dataset.order_id } }); }, //接单 I_DO(event) { var that = this; //尝试接单 mui.ajax(domain + '/Home/Rider/riderAccepOrder', { data: { token: plus.storage.getItem("token"), order_id: event.currentTarget.dataset.order_id }, dataType: 'json', //服务器返回json格式数据 type: 'post', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒； success: function(data) { if (data.status == 1) { mui.toast(data.msg, { type: "div" }); that.getOrderList(); } else { mui.toast(data.msg, { type: "div" }); that.getOrderList(); } }, error: function(xhr, type, errorThrown) { mui.toast("网络异常，请重新尝试", { type: "div" }); } }); } } }); //添加刷新列表的自定义事件,切换tap页时使用 window.addEventListener("refresh_page", function() { mainContainer.getOrderList(); }); </script> </body> </html>