liebao-web/src/components/Home.vue

<template>
  <div class="mainContent">
    <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="point" v-show="item.num">{{item.num}}</div>
              <span>{{item.name}}</span>
              <div class="tab_line"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="header_serch">
            <div class="search_inp">
              <el-input class="inp" v-model="input" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
              <div class="btn"><i class="el-icon-search"></i></div>
            </div>
            <div class="Manual">手动发单</div>
          </div>
        </el-col>
    </el-row>
     
    <el-row class="order_list">
      <el-col :span="18">
        <order-list></order-list>
      </el-col>
      <el-col :span="6">
        <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=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>
        </div>
      </el-col>
    </el-row>
    <order-map></order-map>
  </div>
</template>

<script>
  import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
  import OrderDetail from './orderComponents/orderDetail.vue';
  import orderMap from './orderComponents/orderAMap.vue';
  import OrderList from './orderComponents/orderList.vue';
  import orderTrack from './orderComponents/orderTrack'
  import orderMap from './orderComponents/orderAMap.vue';
  export default {
    data() {
      return {
        tab_list:[
          {name:'新订单',num:6},
          {name:'预约单',num:0},
          {name:'待接单',num:0},
          {name:'取货中',num:0},
          {name:'配送中',num:0},
          {name:'异常单',num:0},
          {name:'已取消',num:0}
        ],
        tab_ac:0,
        orderDetailStutus:0,
        input:''
      }
    },
    components: {
      sendOrderPopup,
      OrderDetail,
      OrderList,
      orderMap,
      orderTrack
    },
    methods: {
      sendOrder() {
        this.$refs.sendOrderPopup.init();
      },
      
      saveRule(t, i) {
        let obj = {
          id: i + 2,
          rule: t,
          content: ''
        }
        this.ruleList.push( obj )
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  /deep/ .el-input__inner{
    padding-right: 50px;
    height: 44px;
  }
  .mainContent{
    width: 100%;
   .order_tab{
    width: 100%;
    height: 74px;
    background: #FFF;
    .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;
        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;
        }
      }
    }
    .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;
        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{
      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{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        .detail_title2{
          width: 100%;
          font-size: 12px;
          font-weight: 600;
          color: #777777;
          margin-bottom: 15px;
        }
        .shop_detail{
          width: 100%;
          display: flex;
          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: 400;
            color: #333333;
            line-height: 20px;
          }
          .cont2{
            color: #FC7200;
          }
        }
        .info3{
          margin-top: 10px;
        }
        .info4{
          display: flex;
          justify-content: space-between;
        }
        .btns{
          margin-top: 30px;
          .btn{
            background: #FC7200;
            border-color: #FC7200;
            color: #FFF;
          }
        }
      }
     }
   }
  }
</style>