<!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">
<!---->
<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>
<!---->
<!---->
<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="width: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>
<!---->
<!---->
<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>
<!---->
</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>
