no message

src/api/http.js

@@ -13,9 +13,9 @@ const service = axios.create({
 service.interceptors.request.use(config => {
     config.headers = {
      // 设置全局请求头
-     'token': 'a2557a7b2e94197ff767970b67041697',
+     'token': 'cedebb6e872f539bef8c3f919874e9d7',
      'aliasId': '',
-     'platformType': 'iOS',
+     'platformType': 'pc',
      // 'content-type': params.method == "GET" ? 'application/x-www-form-urlencoded' : 'application/json;charset=utf-8',
      'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
     }

src/api/order.js

@@ -1,5 +1,5 @@
 import { get, post, postJson } from './http.js';
 
 export const getOrderList = ( params ) => {
-  return get( 'app/order/newList', params )
+  return get( 'app/order/listNew', params )
 }

src/api/tool.js

@@ -0,0 +1,12 @@
+export default{
+    eosFormatTime2(oldTimes1,disparityTime) {
+        let time1 = oldTimes1.split(' ');
+        let time2 = time1[1].split(':');
+        let time3 = time1[0].split('-')
+        if(disparityTime%1 === 0){
+          return `${time3[1]}/${time3[2]} ${time2[0]-disparityTime}:00`
+        }else{
+          return `${time3[1]}/${time3[2]} ${time2[0]-Math.ceil(disparityTime)}:30`
+        }
+    },
+}

src/components/Home.vue

@@ -3,7 +3,7 @@
     <el-row class="order_tab">
         <el-col :span="15">
           <div class="tab_list">
-            <div class="tab_item" @click="tab_ac=i" :class="{'tab_item_ac':tab_ac==i?true:false}" v-for="(item,i) in tab_list" :key="i">
+            <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>
@@ -13,7 +13,7 @@
         <el-col :span="9">
           <div class="header_serch">
             <div class="search_inp">
-              <el-input class="inp" v-model="input" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
+              <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>
@@ -23,12 +23,12 @@
      
     <el-row class="order_list">
       <el-col :span="18">
-        <order-list></order-list>
+        <order-list :list='orderList' :tabNum='tab_ac'></order-list>
       </el-col>
-      <el-col :span="6">
+      <el-col :span="6" v-if="orderList.length">
         <div class="order_detail">
           <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=0" v-if="needTrack" :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>
@@ -46,21 +46,30 @@
   import orderMap from './orderComponents/orderAMap.vue';
   import OrderList from './orderComponents/orderList.vue';
   import orderTrack from './orderComponents/orderTrack.vue'
+  import { getOrderList} from '../api/order.js';
   export default {
     data() {
       return {
+        orderList:[],
         tab_list:[
-          {name:'新订单',num:6},
-          {name:'预约单',num:0},
-          {name:'待接单',num:0},
-          {name:'取货中',num:0},
-          {name:'配送中',num:0},
-          {name:'异常单',num:0},
-          {name:'已取消',num:0}
+          {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:0,
-        input:''
+        orderDetailStutus:1,
+        params:{
+          status: 0,
+          searchType: 0,
+          searchKey:'',
+          pageNum: 1,
+          pageSize: 10
+        },
+        needTrack:false
       }
     },
     components: {
@@ -70,19 +79,39 @@
       orderMap,
       orderTrack
     },
+    mounted() {
+      this.getOrder();
+      console.log(this.$tool.eosFormatTime2("2017-07-10 16:00:00",2.5))
+    },
     methods: {
       sendOrder() {
         this.$refs.sendOrderPopup.init();
       },
-      
-      saveRule(t, i) {
-        let obj = {
-          id: i + 2,
-          rule: t,
-          content: ''
+      change_tab(i,status){
+        if(i==2||i==3||i==4||i==5||i==6){
+          this.needTrack = true;
+        }else{
+          this.needTrack = false;
         }
-        this.ruleList.push( obj )
-      }
+        this.tab_ac = i;
+        this.params.status = status;
+        this.orderList = [];
+        this.params.pageNum = 1;
+        this.getOrder();
+      },
+      getOrder() {
+        let _this = this;
+        getOrderList(this.params).then(res => {
+          res.data.data.forEach(element => {
+            if(_this.tab_ac = 1){
+              element.timeTxt = _this.$tool.eosFormatTime2(element.exceptTime,element.delayTime);
+              
+            }
+            this.orderList.push(element)
+          });
+          console.log(this.orderList);
+        })
+      },
     }
   }
 </script>

src/components/orderComponents/orderList.vue

@@ -1,200 +1,200 @@
-<template>
-  <div>
-    <div class="order_item" v-for="(item,i) in 5" :key="i">
-      <div class="order_item_header">
-        <div class="order_item_header_l">
-          <div class="Serial_number">#005</div>
-          <img src="" class="logo">
-          <span class="name">礼颂至品（娄葑店）</span>
-          <div class="sign_time">17:30前送达</div>
-          <div class="sign_txt">立即送达</div>
-          <div class="sign_d">预约 09/10 17:30自动发起配送</div>
-        </div>
-        <div class="order_item_header_r">
-          <span class="header_r">已发单1分钟</span>
-          <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
-        </div>
-
-      </div>
-      <div class="order_item_cont">
-        <div class="itme_l">
-          <div class="content">王女士<span>18015468888-1157</span></div>
-          <div class="address">苏州市工业园区娄葑街道通园路80号（56文创园）C栋1楼 <span><i class="el-icon-location"></i>1.3km</span></div>
-        </div>
-        <div class="itme_r">备注：蜡烛需要20岁，要个王冠的帽子</div>
-      </div>
-    </div>
-    <!-- 发起配送 -->
-    <send-order-popup ref="sendOrderPopup"></send-order-popup>
-  </div>
-
-</template>
-
-<script>
-  import sendOrderPopup from './sendOrderPopup.vue';
-
-  export default {
-    name: 'OrderList',
-    data() {
-      return {}
-    },
-    props: {
-      tabNum: Number,
-    },
-    components: {
-      sendOrderPopup
-    },
-
-    methods: {
-      deleteItem(index) {
-        this.$refs.sendOrderPopup.init();
-      },
-    },
-  }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped="scoped">
-  .order_item {
-    width: 100%;
-    height: 140px;
-    background: #fff;
-    margin-bottom: 10px;
-
-    .order_item_header {
-      width: 100%;
-      height: 49px;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px solid #F0F0F0;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-right: 10px;
-      box-sizing: border-box;
-
-      .order_item_header_l, .order_item_header_r {
-        display: flex;
-        align-items: center;
-      }
-
-      .Serial_number {
-        width: 60px;
-        height: 26px;
-        background: #FC7200;
-        border-radius: 0 30px 30px 0;
-        font-size: 10px;
-        font-weight: 500;
-        color: #FFFFFF;
-        text-align: center;
-        line-height: 26px;
-      }
-
-      .logo {
-        width: 21px;
-        height: 21px;
-        border-radius: 50%;
-        background: crimson;
-        margin-left: 23px;
-      }
-
-      .name {
-        font-size: 14px;
-        font-weight: 500;
-        color: #333333;
-        margin-left: 5px;
-      }
-
-      .sign_time {
-        width: 84px;
-        height: 20px;
-        border: 1px solid #009CFF;
-        background: #F2FAFF;
-        border-radius: 2px;
-        text-align: center;
-        line-height: 20px;
-        font-size: 12px;
-        font-weight: 600;
-        color: #009CFF;
-        margin-left: 15px;
-      }
-
-      .sign_txt {
-        width: 64px;
-        height: 20px;
-        border: 1px solid #009CFF;
-        background: #F2FAFF;
-        border-radius: 2px;
-        text-align: center;
-        line-height: 20px;
-        font-size: 12px;
-        font-weight: 600;
-        color: #009CFF;
-        margin-left: 10px;
-      }
-
-      .sign_d {
-        height: 20px;
-        border: 1px solid #F74141;
-        background: #FFF5F5;
-        border-radius: 2px;
-        text-align: center;
-        line-height: 20px;
-        font-size: 12px;
-        font-weight: 600;
-        color: #F74141;
-        margin-left: 10px;
-        padding: 0 7px;
-      }
-
-      .header_r {
-        font-size: 14px;
-        font-weight: 400;
-        color: #333333;
-        margin-right: 22px;
-      }
-
-      .btn {
-        background: #FC7200;
-        border-color: #FC7200;
-        color: #FFF;
-        //  position: absolute;
-        //  right: 10px;
-      }
-    }
-
-    .order_item_cont {
-      width: 100%;
-      height: 90px;
-      padding: 0 11px 0 19px;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .itme_l {
-        font-size: 14px;
-        font-weight: 600;
-        color: #333333;
-        line-height: 26px;
-
-        .content span {
-          margin-left: 15px;
-        }
-
-        .address span {
-          font-size: 12px;
-          color: #B1B1B1;
-          margin-left: 15px;
-        }
-      }
-
-      .itme_r {
-        font-size: 14px;
-        font-weight: 400;
-        color: #B1B1B1;
-      }
-    }
-  }
-</style>
+<template>
+  <div>
+    <div class="order_item" v-for="(item,i) in 5" :key="i">
+      <div class="order_item_header">
+        <div class="order_item_header_l">
+          <div class="Serial_number">#005</div>
+          <img src="" class="logo">
+          <span class="name">礼颂至品（娄葑店）</span>
+          <div class="sign_time">17:30前送达</div>
+          <div class="sign_txt">立即送达</div>
+          <div class="sign_d">预约 09/10 17:30自动发起配送</div>
+        </div>
+        <div class="order_item_header_r">
+          <span class="header_r">已发单1分钟</span>
+          <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
+        </div>
+
+      </div>
+      <div class="order_item_cont">
+        <div class="itme_l">
+          <div class="content">王女士<span>18015468888-1157</span></div>
+          <div class="address">苏州市工业园区娄葑街道通园路80号（56文创园）C栋1楼 <span><i class="el-icon-location"></i>1.3km</span></div>
+        </div>
+        <div class="itme_r">备注：蜡烛需要20岁，要个王冠的帽子</div>
+      </div>
+    </div>
+    <!-- 发起配送 -->
+    <send-order-popup ref="sendOrderPopup"></send-order-popup>
+  </div>
+
+</template>
+
+<script>
+  import sendOrderPopup from './sendOrderPopup.vue';
+
+  export default {
+    name: 'OrderList',
+    data() {
+      return {}
+    },
+    props: {
+      tabNum: Number,
+    },
+    components: {
+      sendOrderPopup
+    },
+
+    methods: {
+      deleteItem(index) {
+        this.$refs.sendOrderPopup.init();
+      },
+    },
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped="scoped">
+  .order_item {
+    width: 100%;
+    height: 140px;
+    background: #fff;
+    margin-bottom: 10px;
+
+    .order_item_header {
+      width: 100%;
+      height: 49px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #F0F0F0;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 10px;
+      box-sizing: border-box;
+
+      .order_item_header_l, .order_item_header_r {
+        display: flex;
+        align-items: center;
+      }
+
+      .Serial_number {
+        width: 60px;
+        height: 26px;
+        background: #FC7200;
+        border-radius: 0 30px 30px 0;
+        font-size: 10px;
+        font-weight: 500;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 26px;
+      }
+
+      .logo {
+        width: 21px;
+        height: 21px;
+        border-radius: 50%;
+        background: crimson;
+        margin-left: 23px;
+      }
+
+      .name {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333333;
+        margin-left: 5px;
+      }
+
+      .sign_time {
+        width: 84px;
+        height: 20px;
+        border: 1px solid #009CFF;
+        background: #F2FAFF;
+        border-radius: 2px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #009CFF;
+        margin-left: 15px;
+      }
+
+      .sign_txt {
+        width: 64px;
+        height: 20px;
+        border: 1px solid #009CFF;
+        background: #F2FAFF;
+        border-radius: 2px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #009CFF;
+        margin-left: 10px;
+      }
+
+      .sign_d {
+        height: 20px;
+        border: 1px solid #F74141;
+        background: #FFF5F5;
+        border-radius: 2px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #F74141;
+        margin-left: 10px;
+        padding: 0 7px;
+      }
+
+      .header_r {
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        margin-right: 22px;
+      }
+
+      .btn {
+        background: #FC7200;
+        border-color: #FC7200;
+        color: #FFF;
+        //  position: absolute;
+        //  right: 10px;
+      }
+    }
+
+    .order_item_cont {
+      width: 100%;
+      height: 90px;
+      padding: 0 11px 0 19px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .itme_l {
+        font-size: 14px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 26px;
+
+        .content span {
+          margin-left: 15px;
+        }
+
+        .address span {
+          font-size: 12px;
+          color: #B1B1B1;
+          margin-left: 15px;
+        }
+      }
+
+      .itme_r {
+        font-size: 14px;
+        font-weight: 400;
+        color: #B1B1B1;
+      }
+    }
+  }
+</style>

src/views/home.vue

@@ -25,9 +25,6 @@
 <script>
   import sidebar from '../common/sider.vue';
   import headerVue from '../common/header.vue';
-  import {
-    getOrderList
-  } from '../api/order.js';
   export default {
     data() {
       return {
@@ -39,21 +36,9 @@
       headerVue
     },
     created() {
-      this.getOrder();
     },
     methods: {
-      getOrder() {
-        let params = {
-          status: 97,
-          pageNum: 1,
-          pageSize: 10,
-          isNew: 1,
-          searchType: 1
-        }
-        getOrderList(params).then(res => {
-          console.log(res)
-        })
-      }
+      
     }
   }
 </script>