|
|
@@ -1,35 +1,43 @@
|
|
|
<template>
|
|
|
<div class="mainContent">
|
|
|
<el-row class="order_tab">
|
|
|
- <el-col :span="15">
|
|
|
- <div class="tab_list">
|
|
|
- <div class="tab_item" @click="change_tab(i,item.status)" :class="{'tab_item_ac':tab_ac==i?true:false}" v-for="(item,i) in tab_list" :key="i">
|
|
|
- <div class="point" v-show="item.num">{{item.num}}</div>
|
|
|
- <span>{{item.name}}</span>
|
|
|
- <div class="tab_line"></div>
|
|
|
- </div>
|
|
|
+ <el-col :span="15">
|
|
|
+ <div class="tab_list">
|
|
|
+ <div class="tab_item" @click="change_tab(i,item.status)" :class="{'tab_item_ac':tab_ac==i?true:false}"
|
|
|
+ v-for="(item,i) in tab_list" :key="i">
|
|
|
+ <div class="point" v-show="item.num">{{item.num}}</div>
|
|
|
+ <span>{{item.name}}</span>
|
|
|
+ <div class="tab_line"></div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9">
|
|
|
- <div class="header_serch">
|
|
|
- <div class="search_inp">
|
|
|
- <el-input class="inp" v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
|
|
|
- <div class="btn"><i class="el-icon-search"></i></div>
|
|
|
- </div>
|
|
|
- <div class="Manual">手动发单</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="header_serch">
|
|
|
+ <div class="search_inp">
|
|
|
+ <el-input class="inp" v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
|
|
|
+ <div class="btn"><i class="el-icon-search"></i></div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
+ <div class="Manual">手动发单</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
+
|
|
|
<el-row class="order_list">
|
|
|
<el-col :span="18">
|
|
|
<order-list :list='orderList' :tabNum='tab_ac'></order-list>
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <el-pagination :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="400" background>
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<el-col :span="6" v-if="orderList.length&&clickBool">
|
|
|
<div class="order_detail" v-if="needTrack">
|
|
|
<div class="detail_title">
|
|
|
- <div class="detail_txt" @click="orderDetailStutus=0" :class="{'detail_txt_ac':orderDetailStutus==0?true:false}">订单跟踪</div>
|
|
|
- <div class="detail_txt" @click="orderDetailStutus=1" :class="{'detail_txt_ac':orderDetailStutus==1?true:false}">订单详情</div>
|
|
|
+ <div class="detail_txt" @click="orderDetailStutus=0"
|
|
|
+ :class="{'detail_txt_ac':orderDetailStutus==0?true:false}">订单跟踪</div>
|
|
|
+ <div class="detail_txt" @click="orderDetailStutus=1"
|
|
|
+ :class="{'detail_txt_ac':orderDetailStutus==1?true:false}">订单详情</div>
|
|
|
</div>
|
|
|
<order-detail :tabNum='tab_ac' v-if="orderDetailStutus==1"></order-detail>
|
|
|
<order-track :tabNum='tab_ac' v-if="orderDetailStutus==0"></order-track>
|
|
|
@@ -53,32 +61,62 @@
|
|
|
import orderMap from './orderComponents/orderAMap.vue';
|
|
|
import OrderList from './orderComponents/orderList.vue';
|
|
|
import orderTrack from './orderComponents/orderTrack.vue'
|
|
|
- import { getOrderList,getOrderMarker } from '../api/order.js';
|
|
|
+ import {
|
|
|
+ getOrderList,
|
|
|
+ getOrderMarker
|
|
|
+ } from '../api/order.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- orderList:[],
|
|
|
- tab_list:[
|
|
|
- {name:'新订单',num:6,status:0},
|
|
|
- {name:'预约单',num:0,status:10},
|
|
|
- {name:'待接单',num:0,status:1},
|
|
|
- {name:'取货中',num:0,status:2},
|
|
|
- {name:'配送中',num:0,status:3},
|
|
|
- {name:'异常单',num:0,status:-2},
|
|
|
- {name:'已取消',num:0,status:-1}
|
|
|
+ orderList: [],
|
|
|
+ tab_list: [{
|
|
|
+ name: '新订单',
|
|
|
+ num: 6,
|
|
|
+ status: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '预约单',
|
|
|
+ num: 0,
|
|
|
+ status: 10
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待接单',
|
|
|
+ num: 0,
|
|
|
+ status: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '取货中',
|
|
|
+ num: 0,
|
|
|
+ status: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配送中',
|
|
|
+ num: 0,
|
|
|
+ status: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '异常单',
|
|
|
+ num: 0,
|
|
|
+ status: -2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已取消',
|
|
|
+ num: 0,
|
|
|
+ status: -1
|
|
|
+ }
|
|
|
],
|
|
|
- tab_ac:0,
|
|
|
- orderDetailStutus:1,
|
|
|
- params:{
|
|
|
+ tab_ac: 0,
|
|
|
+ orderDetailStutus: 1,
|
|
|
+ params: {
|
|
|
status: 0,
|
|
|
searchType: 0,
|
|
|
- searchKey:'',
|
|
|
+ searchKey: '',
|
|
|
pageNum: 1,
|
|
|
pageSize: 10
|
|
|
},
|
|
|
- needTrack:false,
|
|
|
- markerNum:'',
|
|
|
- clickBool:false
|
|
|
+ needTrack: false,
|
|
|
+ markerNum: '',
|
|
|
+ clickBool: false
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -91,10 +129,10 @@
|
|
|
mounted() {
|
|
|
this.getOrder();
|
|
|
this.getMarker();
|
|
|
- console.log(this.$tool.eosFormatTime2("2017-07-10 16:00:00",2.5))
|
|
|
+ console.log(this.$tool.eosFormatTime2("2017-07-10 16:00:00", 2.5))
|
|
|
},
|
|
|
methods: {
|
|
|
- getMarker(){
|
|
|
+ getMarker() {
|
|
|
getOrderMarker().then(res => {
|
|
|
this.markerNum = res.data;
|
|
|
this.tab_list[0].num = res.data.toBeBillNum;
|
|
|
@@ -110,10 +148,10 @@
|
|
|
sendOrder() {
|
|
|
this.$refs.sendOrderPopup.init();
|
|
|
},
|
|
|
- change_tab(i,status){
|
|
|
- if(i==2||i==3||i==4||i==5||i==6){
|
|
|
+ change_tab(i, status) {
|
|
|
+ if (i == 2 || i == 3 || i == 4 || i == 5 || i == 6) {
|
|
|
this.needTrack = true;
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.needTrack = false;
|
|
|
}
|
|
|
this.tab_ac = i;
|
|
|
@@ -128,18 +166,21 @@
|
|
|
var hour = minute * 60;
|
|
|
var day = hour * 24;
|
|
|
getOrderList(this.params).then(res => {
|
|
|
- res.data.data.forEach(element => {
|
|
|
- element.takeTimeTxt = this.$tool.timeago((new Date(element.takeTime)).getTime());
|
|
|
- if(_this.tab_ac == 1){
|
|
|
- if(element.exceptTime){
|
|
|
- element.timeTxt = _this.$tool.eosFormatTime2(element.exceptTime,element.delayTime);
|
|
|
- }else{
|
|
|
- element.timeTxt = '';
|
|
|
+ if (res.code == 200) {
|
|
|
+ res.data.data.forEach(element => {
|
|
|
+ element.takeTimeTxt = this.$tool.timeago((new Date(element.takeTime)).getTime());
|
|
|
+ if (_this.tab_ac == 1) {
|
|
|
+ if (element.exceptTime) {
|
|
|
+ element.timeTxt = _this.$tool.eosFormatTime2(element.exceptTime, element.delayTime);
|
|
|
+ } else {
|
|
|
+ element.timeTxt = '';
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- this.orderList.push(element)
|
|
|
- });
|
|
|
+ this.orderList.push(element)
|
|
|
+ });
|
|
|
+ console.log('---------', this.orderList)
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
@@ -147,214 +188,247 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
|
- /deep/ .el-input__inner{
|
|
|
- padding-right: 50px;
|
|
|
- height: 44px;
|
|
|
- }
|
|
|
- .mainContent{
|
|
|
- width: 100%;
|
|
|
- .order_tab{
|
|
|
+ // /deep/ .el-input__inner {
|
|
|
+ // padding-right: 50px;
|
|
|
+ // height: 44px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .mainContent {
|
|
|
width: 100%;
|
|
|
- height: 74px;
|
|
|
- background: #FFF;
|
|
|
- .tab_list{
|
|
|
+
|
|
|
+ .order_tab {
|
|
|
width: 100%;
|
|
|
height: 74px;
|
|
|
- padding-top: 20px;
|
|
|
- padding-left: 36px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- .tab_item{
|
|
|
- width: 58px;
|
|
|
- margin-right: 56px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #B1B1B1;
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- .tab_line{
|
|
|
- width: 58px;
|
|
|
- height: 6px;
|
|
|
- background: #FFF;
|
|
|
- border-radius: 3px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
+ background: #FFF;
|
|
|
|
|
|
- .point{
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #F74141;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- position: absolute;
|
|
|
- top: -5px;
|
|
|
- right: -10px;
|
|
|
+ .tab_list {
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-left: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tab_item {
|
|
|
+ width: 58px;
|
|
|
+ margin-right: 56px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #B1B1B1;
|
|
|
+ position: relative;
|
|
|
text-align: center;
|
|
|
- line-height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .tab_line {
|
|
|
+ width: 58px;
|
|
|
+ height: 6px;
|
|
|
+ background: #FFF;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .point {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #F74141;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: -10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .tab_item_ac{
|
|
|
- color: #FC7200;
|
|
|
- .tab_line{
|
|
|
- background: #FC7200;
|
|
|
+
|
|
|
+ .tab_item_ac {
|
|
|
+ color: #FC7200;
|
|
|
+
|
|
|
+ .tab_line {
|
|
|
+ background: #FC7200;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .header_serch{
|
|
|
- width: 100%;
|
|
|
- height: 74px;
|
|
|
- padding-right: 25px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- .Manual{
|
|
|
- width: 118px;
|
|
|
- height: 44px;
|
|
|
- background: #FC7200;
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- line-height: 44px;
|
|
|
- margin-left: 18px;
|
|
|
- }
|
|
|
- .search_inp{
|
|
|
- width: 380px;
|
|
|
- height: 44px;
|
|
|
+
|
|
|
+ .header_serch {
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ padding-right: 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- position: relative;
|
|
|
- .inp{
|
|
|
- width: 380px;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .Manual {
|
|
|
+ width: 118px;
|
|
|
height: 44px;
|
|
|
- border: none;
|
|
|
+ background: #FC7200;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44px;
|
|
|
+ margin-left: 18px;
|
|
|
}
|
|
|
- .btn{
|
|
|
- margin-left: 15px;
|
|
|
- font-size: 22px;
|
|
|
- position: absolute;
|
|
|
- right: 15px;
|
|
|
+
|
|
|
+ .search_inp {
|
|
|
+ width: 380px;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .inp {
|
|
|
+ width: 380px;
|
|
|
+ height: 44px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin-left: 15px;
|
|
|
+ font-size: 22px;
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .order_list{
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- .order_detail{
|
|
|
+
|
|
|
+ .order_list {
|
|
|
width: 100%;
|
|
|
- border-left: 10px solid #F1F2F5;
|
|
|
- background: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- border-left: 10px solid #F1F2F5;
|
|
|
- .detail_title{
|
|
|
- width: 100%;
|
|
|
- height: 44px;
|
|
|
- background: #FAFAFA;
|
|
|
- padding-left: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- .detail_txt{
|
|
|
- color: #B1B1B1;
|
|
|
- padding-bottom: 13px;
|
|
|
- border-bottom: 2px solid #FAFAFA;
|
|
|
- margin-right: 28px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .detail_txt_ac{
|
|
|
- color: #00152A;
|
|
|
- border-color: #00152A;
|
|
|
- }
|
|
|
- }
|
|
|
- .detail_cont{
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .order_detail {
|
|
|
width: 100%;
|
|
|
- padding: 16px;
|
|
|
+ border-left: 10px solid #F1F2F5;
|
|
|
+ background: #fff;
|
|
|
box-sizing: border-box;
|
|
|
- .detail_title2{
|
|
|
+ border-left: 10px solid #F1F2F5;
|
|
|
+
|
|
|
+ .detail_title {
|
|
|
width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ background: #FAFAFA;
|
|
|
+ padding-left: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
font-size: 12px;
|
|
|
font-weight: 600;
|
|
|
- color: #777777;
|
|
|
- margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .detail_txt {
|
|
|
+ color: #B1B1B1;
|
|
|
+ padding-bottom: 13px;
|
|
|
+ border-bottom: 2px solid #FAFAFA;
|
|
|
+ margin-right: 28px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail_txt_ac {
|
|
|
+ color: #00152A;
|
|
|
+ border-color: #00152A;
|
|
|
+ }
|
|
|
}
|
|
|
- .shop_detail{
|
|
|
+
|
|
|
+ .detail_cont {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- margin-bottom: 10px;
|
|
|
- img{
|
|
|
- width: 47px;
|
|
|
- height: 47px;
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
- margin-right: 12px;
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .detail_title2 {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #777777;
|
|
|
+ margin-bottom: 15px;
|
|
|
}
|
|
|
- .info{
|
|
|
- flex-grow: 1;
|
|
|
+
|
|
|
+ .shop_detail {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .shop_title{
|
|
|
- width: 70%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 47px;
|
|
|
+ height: 47px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .shop_title {
|
|
|
+ width: 70%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop_num {
|
|
|
+ color: #B1B1B1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail_ine {
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ border-top: 2px dotted #F0F0F0;
|
|
|
+ margin: 16px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info2 {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ width: 80px;
|
|
|
+ color: #B1B1B1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cont {
|
|
|
font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
+ font-weight: 400;
|
|
|
color: #333333;
|
|
|
- line-height: 18px;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
- .shop_num{
|
|
|
- color: #B1B1B1;
|
|
|
+
|
|
|
+ .cont2 {
|
|
|
+ color: #FC7200;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .detail_ine{
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- border-top: 2px dotted #F0F0F0;
|
|
|
- margin: 16px 0;
|
|
|
- }
|
|
|
- .info2{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- .title{
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- width: 80px;
|
|
|
- color: #B1B1B1;
|
|
|
- }
|
|
|
- .cont{
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- line-height: 20px;
|
|
|
+
|
|
|
+ .info3 {
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
- .cont2{
|
|
|
- color: #FC7200;
|
|
|
+
|
|
|
+ .info4 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
- }
|
|
|
- .info3{
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .info4{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .btns{
|
|
|
- margin-top: 30px;
|
|
|
- .btn{
|
|
|
- background: #FC7200;
|
|
|
- border-color: #FC7200;
|
|
|
- color: #FFF;
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ margin-top: 30px;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ background: #FC7200;
|
|
|
+ border-color: #FC7200;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zhaolianxi
