123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346 |
- <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" @keydown.enter.native="seachEnterFun" class="inp" clearable v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></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="search" 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" />
- </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: 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,
- },
- created() {
- let searchKey = this.$route.query.searchKey;
- if (searchKey) {
- this.params.searchKey = searchKey;
- }
- this.init();
- if (this.memberType !== 1) {
- this.getShopList();
- }
- this.getOrder();
- },
- 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 = this.$tool.formatDateTime(start, "yyyy-MM-dd");
- this.params.endDate = this.$tool.formatDateTime(new Date(), "yyyy-MM-dd");
- 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.formatDateTime(this.value1[0]);
- this.params.endDate = 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.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;
- .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;
- align-items: center;
- justify-content: center;
- background-color: #fff;
- height: 100%;
- img {
- width: 349px;
- height: 222px;
- }
- }
- }
- }
- </style>
|