liebao-web/src/components/orderSearch.vue

<template>
  <div class="mainContent">
    <el-row class="order_tab">
      <el-col :span="12" class="search">
        <div class="header_serch">
          <div class="search_inp">
            <el-input size="medium" class="inp" clearable v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
            <!-- <el-button size="medium" @click="search" type="primary" slot="append" icon="el-icon-search"></el-button> -->
          </div>
          <!-- 1.0.0版本暂不开发该功能 -->
          <!-- <div class="Manual">手动发单</div> -->
        </div>
      </el-col>
      <el-col :span="24">
        <div class="order_list_sel">
          <div class="sel_item">
            <span class="name">门店：</span>
            <el-select size="small" class="item1" v-model="params.shopId" placeholder="请选择门店">
              <el-option v-for="(v,i) in shopList" :key="i" :label="v.name" :value="v.shopId"></el-option>
            </el-select>
          </div>
          <div class="sel_item">
            <span class="name">订单来源：</span>
            <el-select size="small" class="item1" v-model="params.orderType" placeholder="请选择订单来源">
              <el-option v-for="(v,i) in originList" :key="i" :label="v.name" :value="v.status"></el-option>
            </el-select>
          </div>
          <div class="sel_item">
            <span class="name">订单状态：</span>
            <el-select size="small" class="item2" v-model="params.status" placeholder="请选择订单状态">
              <el-option v-for="(v,i) in tabList" :key="i" :label="v.name" :value="v.status"></el-option>
            </el-select>
          </div>
          <div class="sel_item sel_item2">
            <span class="name">日期：</span>
            <el-date-picker size="small" v-model="value1" class="item3" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <el-button size='small' @click="search" style="background: #0D1E40;color:#fff">查询</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row class="order_list">
      <el-col :span="24" v-loading="isLoading">
        <order-list :list='orderList' :tabNum='tabNum'></order-list>
        <div style="text-align: center;">
          <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import bus from "../common/bus.js";
import sendOrderPopup from "./orderComponents/sendOrderPopup.vue";
import OrderList from "./orderComponents/orderList.vue";
import { getOrderList } from "../api/order.js";
import { getShopList } from "../api/shop.js";
export default {
  data() {
    return {
      input: "",
      value1: "",
      params: {
        status: 99,
        orderType: 0,
        searchType: 1,
        searchKey: "",
        shopId: "",
        startDate: "",
        endDate: "",
        pageNum: 1,
        pageSize: 10,
      },
      shopList: [],
      originList: [
        {
          name: "全部",
          status: 0,
        },
        {
          name: "美团",
          status: 1,
        },
        {
          name: "饿了么",
          status: 2,
        },
        {
          name: "饿百",
          status: 3,
        },
        {
          name: "手动发单",
          status: 99,
        },
      ],
      tabList: [
        {
          name: "全部",
          status: 99,
        },
        {
          name: "进行中",
          status: 96,
        },
        {
          name: "已完成",
          status: 97,
        },
        {
          name: "已取消",
          status: -1,
        },
        {
          name: "其他平台完成",
          status: 98,
        },
      ],
      tabNum: -1,
      isLoading: false,
      total: 0,
      orderList: [],
      needTrack: false,
      orderDetailStutus: 1,
      markerNum: "",
      clickBool: false,
    };
  },
  components: {
    sendOrderPopup,
    OrderList,
  },
  created() {
    let searchKey = this.$route.query.searchKey;
    if (searchKey) {
      this.params.searchKey = searchKey;
    }
    this.getShopList();
    this.init();
    this.getOrder();
  },
  destroyed() {
    bus.$off("pullData");
    bus.$off("refreshData");
  },
  methods: {
    init() {
      bus.$on("pullData", (index) => {
        this.tabNum = index;
        this.params.status = this.tab_list[index].status;
        this.params.pageNum = 1;
        this.orderList = [];
        Promise.all([this.getOrder(), this.getMarker()]);
      });
      bus.$on("refreshData", () => {
        console.log("执行refreshData");
        this.params.pageNum = 1;
        this.orderList = [];
        Promise.all([this.getOrder(), this.getMarker()]);
      });
    },
    search() {
      if (this.value1 && this.value1.length) {
        this.params.startDate = this.$tool.formatDateTime(this.value1[0]);
        this.params.endtDate = this.$tool.formatDateTime(this.value1[1]);
      } else {
        this.params.startDate = "";
        this.params.endDate = "";
      }

      this.params.pageNum = 1;
      this.orderList = [];
      this.getOrder();
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.orderList = [];
      this.getOrder();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.orderList = [];
      this.getOrder();
    },
    getOrder() {
      let _this = this;
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      this.isLoading = true;
      getOrderList(this.params).then((res) => {
        this.isLoading = false;
        if (res.code == 200) {
          this.total = res.data.totalNums || 0;
          this.params.pageNum = res.data.pageNum;
          res.data.data.forEach((element) => {
            element.takeTimeTxt = this.$tool.timeago(
              new Date(element.takeTime).getTime()
            );
            if (_this.tabNum == 1) {
              if (element.exceptTime) {
                element.timeTxt = _this.$tool.eosFormatTime2(
                  element.exceptTime,
                  element.delayTime
                );
              } else {
                element.timeTxt = "";
              }
            }
            this.orderList.push(element);
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    getShopList() {
      getShopList().then((res) => {
        if (res.code === 200) {
          this.shopList = res.data.map((v) => {
            return { name: v.name, shopId: v.id };
          });
          this.shopList.unshift({ name: "全部", shopId: "" });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
/deep/ .el-input__inner {
  padding-right: 30px;
}
.mainContent {
  width: 100%;
  .order_tab {
    width: 100%;
    background: #fff;
    .search {
      display: flex;
      margin-left: 20px;
      .header_serch {
        width: 80%;
        height: 74px;
        padding-right: 25px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .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: 100%;
            // height: 44px;
            border: none;
          }

          .btn {
            font-size: 22px;
            position: absolute;
            right: 15px;
          }
        }
      }
    }
    .order_list_sel {
      display: flex;
      align-items: center;
      margin: 0 0 10px 20px;
      .sel_item {
        display: flex;
        align-items: center;
        margin-right: 10px;
        .name {
          font-size: 14px;
          flex-shrink: 0;
          color: #999;
        }
      }
    }
  }

  .order_list {
    width: 100%;
    margin-top: 10px;
  }
}
</style>