liebao-web/src/components/orderSearch.vue

<template>
  <div class="mainContent">
    <el-row class="order_tab">
      <!-- <el-col :span="8" class="search">
        <el-input size="small" @keydown.enter.native="seachEnterFun" class="inp" clearable v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
      </el-col> -->
      <el-col :span="24">
        <div class="order_list_sel">
          <div class="sel_item">
            <el-input size="small" class="item1" v-model="params.searchKey" placeholder="请输入关键字" @keydown.enter.native="seachEnterFun" clearable>
              <el-select v-model="params.searchKeyType" slot="prepend" placeholder="请选择关键字">
                <el-option label="流水号" value="1"></el-option>
                <el-option label="手机号" value="2"></el-option>
                <el-option label="姓名" value="3"></el-option>
                <el-option label="地址" value="4"></el-option>
                <!-- <el-option label="订单号" value="5"></el-option> -->
                <el-option label="外卖订单号" value="6"></el-option>
              </el-select>
            </el-input>
          </div>
          <div class="sel_item" v-if="memberType !== 1">
            <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="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <el-button size='small' @click="search" style="background: #0D1E40;color:#fff">查询</el-button>
          <!-- <el-button size='small' @click="$router.push({path:'/manualCreate'})" class="btn">手动发单</el-button> -->
        </div>
      </el-col>
    </el-row>

    <el-row class="order_list">
      <el-col :span="24" v-if="orderList.length" v-loading="isLoading">
        <order-list class="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-col class="empty-data" v-else>
        <img src="../../static/image/empty-data.png" />
        <div class="no-data">暂无订单数据</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: "",
        searchKeyType: '1',
        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: 95,
        },
        {
          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,
      memberType: this.$store.state.userInfo.memberType,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  components: {
    sendOrderPopup,
    OrderList,
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
  },
  created() {
    let searchKey = this.$route.query.searchKey;
    if (searchKey) {
      this.params.searchKey = searchKey;
    }

    this.init();
    if (this.memberType !== 1) {
      this.getShopList();
    }
    this.search();
  },
  mounted() {},
  destroyed() {
    bus.$off("refreshData2");
  },
  methods: {
    seachEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.search();
      }
    },
    init() {
      const start = new Date().getTime() - 3600 * 1000 * 24 * 7;
      this.params.startDate = start;
      this.params.endDate = new Date();
      this.value1 = [this.params.startDate, this.params.endDate];

      bus.$on("refreshData2", () => {
        console.log("执行refreshData2");
        this.params.pageNum = 1;
        this.orderList = [];
        this.getOrder();
      });
    },
    search() {
      if (this.value1 && this.value1.length) {
        this.params.startDate = this.$tool.getFormatDate(
          this.value1[0],
          "yyyy-MM-dd"
        );
        this.params.endDate = this.$tool.getFormatDate(
          this.value1[1],
          "yyyy-MM-dd"
        );
      } 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.sendTime).getTime()
            );
            if (element.exceptTime && element.delayTime) {
              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 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    background: #fff;
    height: 74px;
    .search {
      margin-left: 20px;
    }
    .order_list_sel {
      display: flex;
      align-items: center;
      margin: 0 0 0 20px;
      .btn {
        background: #fc7200;
        border-color: #fc7200;
        color: #fff !important;
      }
      .sel_item {
        display: flex;
        align-items: center;
        margin-right: 10px;
        /deep/ .el-input-group__prepend {
          background: #fff;
          .el-input__inner {
            width: 114px;
          }
        }
        .name {
          font-size: 14px;
          flex-shrink: 0;
          color: #999;
        }
      }
    }
  }

  .order_list {
    width: 100%;
    height: calc(100vh - 180px);
    margin-top: 10px;
    .list {
      position: relative;
      height: calc(100vh - 210px);
      overflow: hidden;
    }
    .empty-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      height: 100%;

      img {
        width: 349px;
        height: 222px;
      }
      .no-data {
        color: #9ea7b7;
      }
    }
  }
}
</style>