liebao-cloud/web-ui/src/views/module/order/index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      class="clearFix"
    >
      <el-form-item label="订单编号" prop="orderSn">
        <el-input
          v-model="queryParams.orderSn"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="物品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入物品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="支付类型" prop="paymentType">
        <el-select v-model="queryParams.paymentType" placeholder="支付类型" clearable >
          <el-option v-for="item in paymentTypeOption" :key="item.value" :label="item.label"  :value="item.value" />
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="优惠券ID" prop="couponId">
        <el-input
          v-model="queryParams.couponId"
          placeholder="请输入优惠券ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="登录人" prop="memberName">
        <el-input
          v-model="queryParams.memberName"
          placeholder="请输入登录人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="登录人联系电话" prop="memberMobile">
        <el-input
          v-model="queryParams.memberMobile"
          placeholder="请输入登录人联系电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="发件联系人" prop="sendContactName">
        <el-input
          v-model="queryParams.sendContactName"
          placeholder="请输入发件联系人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发件人联系电话" prop="sendPhone">
        <el-input
          v-model="queryParams.sendPhone"
          placeholder="请输入发件人联系电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收件联系人" prop="receiptContactName">
        <el-input
          v-model="queryParams.receiptContactName"
          placeholder="请输入收件联系人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收件人联系电话" prop="receiptPhone">
        <el-input
          v-model="queryParams.receiptPhone"
          placeholder="请输入收件人联系电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="订单状态" prop="deliveryStatus">
        <el-select v-model="queryParams.deliveryStatus" placeholder="订单状态" clearable >
          <el-option v-for="item in deliveryStatusOption" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="接单时间" prop="deliveryTime">
        <el-date-picker v-model="deliveryDate" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="下单时间" prop="createTime">
        <el-date-picker
          v-model="createDate"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="完成时间" prop="completeTime">
        <el-date-picker
          v-model="completeDate"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> -->
        <el-button @click="show2 = !show2">
          <span v-if="show2 == true">隐藏</span>
          <span v-else>显示</span>
        </el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >导出</el-button>
      </el-form-item>
      <!-- <el-form-item label="商家名称" prop="merchantId" v-if="user.type == 2">
        <el-select v-model="queryParams.merchantId" placeholder="商家名称" clearable>
          <el-option v-for="item in merchantOption" :key="item.id" :label="item.merchantName" :value="item.id"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="商家名称" prop="merchantName">
        <el-input
          v-model="queryParams.merchantName"
          placeholder="请输入商家名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="代理商名称" prop="aId">
        <el-select v-model="queryParams.aId" filterable clearable placeholder="请选择 / 输入代理商">
          <el-option
            v-for="item in agentList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配送平台名称" prop="deliveryId">
        <el-select v-model="queryParams.deliveryId" placeholder="配送平台名称" clearable>
          <el-option v-for="item in dspDeliveryOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="收件地区">
          <OldReceipt :areaProp="areaProp" @changeArea="changeArea" ref="area"/>
      </el-form-item> -->

      <transition name="el-zoom-in-top">
        <div v-show="show2" class="clearFix">
          <el-form-item label="发件地区">
            <OldSend
              :sendAreaProp="sendAreaProp"
              @changeArea="changeSendArea"
              ref="sendArea"
            />
          </el-form-item>
          <el-form-item label="代理商名称" prop="aId">
            <el-select
              v-model="queryParams.aId"
              filterable
              clearable
              placeholder="请选择 / 输入代理商"
            >
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配送平台名称" prop="deliveryId">
            <el-select
              v-model="queryParams.deliveryId"
              placeholder="配送平台名称"
              clearable
            >
              <el-option
                v-for="item in dspDeliveryOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发件联系人" prop="sendContactName">
            <el-input
              v-model="queryParams.sendContactName"
              placeholder="请输入发件联系人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="发件人联系电话" prop="sendPhone">
            <el-input
              v-model="queryParams.sendPhone"
              placeholder="请输入发件人联系电话"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="收件联系人" prop="receiptContactName">
            <el-input
              v-model="queryParams.receiptContactName"
              placeholder="请输入收件联系人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="收件人联系电话" prop="receiptPhone">
            <el-input
              v-model="queryParams.receiptPhone"
              placeholder="请输入收件人联系电话"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="商家名称" prop="merchantName">
            <el-input
              v-model="queryParams.merchantName"
              placeholder="请输入商家名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="门店名称" prop="shopName">
            <el-input
              v-model="queryParams.shopName"
              placeholder="请输入门店名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="下单人" prop="memberName">
            <el-input
              v-model="queryParams.memberName"
              placeholder="请输入下单人"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="下单人联系电话" prop="memberMobile">
            <el-input
              v-model="queryParams.memberMobile"
              placeholder="请输入下单人联系电话"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="外卖平台" prop="waimaiOrderType">
            <el-select v-model="queryParams.waimaiOrderType" placeholder="请选择外卖平台" clearable>
              <el-option v-for="item in waimaiOrderTypeOption" :key="item.value" :label="item.label" :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工名称" prop="personnelName">
            <el-input
              v-model="queryParams.personnelName"
              placeholder="请输入员工名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="发件人联系电话" prop="sendPhone">
            <el-input
              v-model="queryParams.sendPhone"
              placeholder="请输入发件人联系电话"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </div>
      </transition>
    </el-form>

    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
      <el-tab-pane :label="lablZero" name="1"></el-tab-pane>
      <el-tab-pane :label="lableOne" name="2"></el-tab-pane>
      <el-tab-pane :label="lableTwo" name="3"></el-tab-pane>
      <el-tab-pane :label="lableThree" name="4"></el-tab-pane>
      <el-tab-pane label="已取消" name="-1"></el-tab-pane>
      <el-tab-pane :label="lableFive" name="-2"></el-tab-pane>
      <el-tab-pane :label="lableSix" name="0"></el-tab-pane>
      <el-tab-pane label="其它平台完成" name="100"></el-tab-pane>
      <el-tab-pane label="全部订单" name="all"></el-tab-pane>
      <el-tab-pane v-if="type != 2" label="撤回订单" name="6"></el-tab-pane>
    </el-tabs>

    <Pagination
      uri="/module/order/list"
      :request-params="queryParams"
      ref="pagination"
      :showIndex="false"
      class="update-css"
    >
      <el-table-column>
        <template slot-scope="scope">
          <div style="margin-bottom: 10px; padding: 3px">
            <el-row>
              <el-col :span="9">
                <el-tag type="success">
                  <span
                    v-if="
                      scope.row.waimaiOrderId != null &&
                      scope.row.waimaiOrderId != ''
                    "
                  >
                    {{ scope.row.dspWaimaiName }}
                  </span>
                  <span v-else> 猎豹 </span>
                </el-tag>
                <el-tag type="warning" style="margin-left: 20px">
                  <span
                    v-if="
                      scope.row.merchantId != null && scope.row.merchantId != ''
                    "
                  >
                    商戶
                  </span>
                  <span v-else> 个人 </span>
                </el-tag>
                <el-tag type="info" style="margin-left: 20px">
                  <span v-if="scope.row.takeType == 0"> 普通 </span>
                  <span v-if="scope.row.takeType == 1 || scope.row.takeType == 2"> 预约 </span>
                </el-tag>
                <span  style="margin-left: 20px">订单号：
                  <div class="serial" v-if="scope.row.daySeq != null">
                    <span class="serial_text">{{scope.row.daySeq}} &nbsp; #</span>
                  </div>
                  <el-button style="user-select: unset" type="text" @click="deliveryInfo(scope.row.orderSn)" v-if="type != 2">
                    {{ scope.row.orderSn }}
                  </el-button>
                  <span v-if="type == 2">{{ scope.row.orderSn }}</span>

                  <el-button style="user-select: unset;background-color:#F08080;height:27px" 
                      size="mini" type="danger" round icon="el-icon-close" @click="cancelOrder(scope.row.id)"
                      v-if="type != 2 && scope.row.deliveryStatus == 3 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">
                    取消
                  </el-button>

                  <el-button style="user-select: unset;background-color:#90EE90;height:27px" 
                      size="mini" type="success" round icon="el-icon-check" @click="finishOrder(scope.row.id)"
                      v-if="type != 2 && scope.row.deliveryStatus == 3 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">
                    手动完成
                  </el-button>
                </span
                >
              </el-col>
              <el-col :span="4">
                 <div style="margin-bottom: 10px; text-align: center">
                   <span v-if="scope.row.deleted == 1">
                    现订单号：
                    <span v-if="scope.row.originalOrderSn != null">{{ scope.row.originalOrderSn }}</span>
                    <span v-else> -- </span>
                  </span>
                  <div v-if="(scope.row.takeType == 1 || scope.row.takeType == 2)&& (scope.row.waimaiOrderId == null || scope.row.waimaiOrderId == '')">
                    预计取件时间：{{ scope.row.takeTime }}
                  </div>
                  <div v-if="scope.row.waimaiOrderId != null && scope.row.waimaiOrderId != '' && scope.row.deleted == 0">
                    <span v-if="scope.row.waimaiDeliveryTime == 0">预计送达时间：立即送达</span>
                    <span v-if="scope.row.waimaiDeliveryTime != 0">预计送达时间：{{ scope.row.waimaiDeliveryDate }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div style="margin-bottom: 10px; text-align: left" v-if="
                      scope.row.waimaiOrderId != null &&
                      scope.row.waimaiOrderId != ''
                    ">
                  <span>外卖下单时间：{{ scope.row.orderTime }}</span>
                  <span style="margin-left:39px" 
                    v-if="scope.row.deleted == 0 && !(scope.row.wmstatus == 4 && scope.row.deliveryStatus != 4) &&
                    !(scope.row.deliveryStatus == 0 && scope.row.waimaiOrderId != null &&
                          (scope.row.wmstatus == null || scope.row.wmstatus == 0))">
                          配送下单时间：{{ scope.row.createTime }}</span>
                </div>
                <div style="margin-bottom: 10px; text-align: left" v-else>
                  <span
                    v-if="scope.row.deleted == 0 && !(scope.row.wmstatus == 4 && scope.row.deliveryStatus != 4) &&
                    !(scope.row.deliveryStatus == 0 && scope.row.waimaiOrderId != null &&
                          (scope.row.wmstatus == null || scope.row.wmstatus == 0))">
                          配送下单时间：{{ scope.row.createTime }}</span>
                </div>
              </el-col>
              <el-col :span="2">
                <div style="margin-bottom: 10px; text-align: right" v-if="scope.row.deleted == 0">
                  <div
                    v-if="
                      scope.row.deliveryStatus == -1 &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)
                    "
                  >
                    已取消
                  </div>
                  <div
                    v-if="
                      scope.row.deliveryStatus == -2 &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)
                    "
                  >
                    异常
                  </div>
                  <div
                      v-if="
                          scope.row.deliveryStatus == 0 && scope.row.waimaiOrderId != null &&
                          (scope.row.wmstatus == null || scope.row.wmstatus != 4)
                        "
                      >
                        待发单
                  </div>
                  <div
                    v-if="
                      scope.row.deliveryStatus == 1 &&
                      scope.row.status == 1 &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)
                    "
                  >
                    待接单
                  </div>
                  <div
                    v-if="
                      scope.row.deliveryStatus == 1 &&
                      scope.row.status == 0 &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)
                    "
                  >
                    待支付
                  </div>
                  <div
                    v-if="
                      scope.row.deliveryStatus == 2 &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)
                    "
                  >
                    待配送
                  </div>
                  <div
                    v-if="
                      scope.row.deliveryStatus == 3 &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)
                    "
                  >
                    配送中
                  </div>
                  <div
                    v-if="
                      scope.row.wmstatus == 4 && scope.row.deliveryStatus != 4
                    "
                  >
                    其它平台完成
                  </div>
                  <div v-if="scope.row.deliveryStatus == 4">本平台完成</div>
                </div>
                <div style="margin-bottom: 10px; text-align: right" v-if="scope.row.deleted == 1">
                  <div>撤回</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-row class="border-line">
            <el-col :span="9">
              <div style="margin-top: 10px">
                <!-- 发 -->
                <div style="display: flex">
                  <!-- <img :src="item.thumb" style="width: 20px; height: 20px" /> -->
                  <div><i class="sendLogo"></i></div>
                  <div style="margin-left: 10px">
                    <span
                      >{{ scope.row.sendContactName }} &nbsp;&nbsp;
                      {{ scope.row.sendPhone }}</span
                    ><span
                      v-if="
                        scope.row.sendExtension != null &&
                        scope.row.sendExtension != ''
                      "
                      >#{{ scope.row.sendExtension }}</span
                    ><br />
                    <span
                      >{{ scope.row.sendProvinceName
                      }}{{ scope.row.sendCityName
                      }}{{ scope.row.sendDistrictName }}</span
                    ><br />
                    <span>{{ scope.row.sendAddress }}</span>
                  </div>
                </div>
                <!-- 收 -->
                <div style="margin-top: 10px; display: flex">
                  <!-- <img :src="item.thumb" style="width: 20px; height: 20px" /> -->
                  <div><i class="receiptLogo"></i></div>
                  <div style="margin-left: 10px">
                    <span
                      >{{ scope.row.receiptContactName }} &nbsp;&nbsp;
                      {{ scope.row.receiptPhone }}</span
                    >
                    <span
                      v-if="
                        scope.row.receiptExtension != null &&
                        scope.row.receiptExtension != ''
                      "
                      >#{{ scope.row.receiptExtension }}</span
                    ><br />
                    <span
                      >{{ scope.row.receiptProvinceName
                      }}{{ scope.row.receiptCityName
                      }}{{ scope.row.receiptDistrictName }}</span
                    ><br />
                    <span>{{ scope.row.receiptAddress }}</span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div style="margin-top: 10px">
                <span>
                  支付金额：￥{{ scope.row.payAmount }}
                  <i
                    class="el-icon-info"
                    @click="amountInfoOpen(scope.row)"
                  ></i> </span
                ><br />
                <span v-if="type != 2 && scope.row.bindFee > 0">
                  三方服务费: ￥{{ scope.row.bindFee }}<br />
                </span
                >
                <span>
                  支付类型：
                    <el-tag v-if="scope.row.paymentType == 1 && scope.row.status != 0">支付宝</el-tag>
                    <el-tag type="success" v-if="scope.row.paymentType == 2 && scope.row.status != 0">微信</el-tag>
                    <el-tag type="warning" v-if="scope.row.paymentType == 3 && scope.row.status != 0">银联</el-tag>
                    <el-tag type="danger" v-if="scope.row.paymentType == 4 && scope.row.status != 0">余额支付</el-tag>
                    <el-tag type="info" v-if="scope.row.paymentType == 5 && scope.row.status != 0">第三方平台支付</el-tag>
                </span
                ><br />
                <span>配送类型：{{ scope.row.productName }}</span
                ><br />
                <span
                  >物品信息：{{ scope.row.productName }}/{{
                    scope.row.weight
                  }}公斤</span
                ><br />
                <div>
                  <span v-if="
                    scope.row.waimaiOrderId != null &&
                    scope.row.waimaiOrderId != ''
                  ">商品金额：￥{{ scope.row.puductMoney }}</span
                  ><span v-else>商品金额：￥{{ scope.row.productAmount }}</span
                  ><br />
                </div>
                <div
                >
                  <span
                    >商品详情：
                    <el-button
                      type="text"
                      @click="productInfoOpen(scope.row.waimaiOrderId)"
                      >点击查看</el-button
                    > </span
                  ><br />
                </div>
                <div>
                  备注：
                  <span
                    v-if="
                      scope.row.waimaiOrderId != null &&
                      scope.row.waimaiOrderId != ''
                    "
                    ><span v-if="scope.row.takeRemark != null">【{{ scope.row.takeRemark }}】</span>{{ scope.row.wmCaution }}</span
                  >
                  <span v-else>{{ scope.row.takeRemark }}</span>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="margin-top: 10px;margin-left: 5px;">
              <div
                v-if="
                  scope.row.outTradeNo != null && scope.row.outTradeNo != ''
                "
              >
                <div>
                  接单平台：
                  <span v-if="scope.row.deliveryId != null">
                    <span v-text="getName(scope.row.deliveryId)"></span>
                    <!-- <span>{{ scope.row.deliveryName}}</span> -->
                  </span>
                  <span
                    v-if="
                      scope.row.deliveryId == null &&
                      scope.row.wmstatus == 4 &&
                      scope.row.deliveryStatus != 4
                    "
                  >
                    其它平台</span
                  >
                </div>
                <div>
                  骑手姓名：
                  <span v-if="scope.row.shipperName != null">{{
                    scope.row.shipperName
                  }}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  骑手电话：
                  <span v-if="scope.row.shipperPhone != null">{{
                    scope.row.shipperPhone
                  }}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  三方订单号：
                  <span v-if="scope.row.outTradeNo != null">{{
                    scope.row.outTradeNo
                  }}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  接单时间：
                  <span
                    v-if="
                      scope.row.deliveryTime != null
                    "
                    >{{ scope.row.deliveryTime }}</span
                  >
                  <span v-else>--</span>
                </div>
                <div>
                  取货时间：
                  <span v-if="scope.row.pickUpTime != null">{{
                    scope.row.pickUpTime
                  }}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  送到时间：
                  <span v-if="scope.row.finishTime != null">{{
                    scope.row.finishTime
                  }}</span>
                  <span v-else>--</span>
                </div>
              </div>
              <!-- <div
                style="margin-top: 10px; margin-left: 5px"
                v-if="
                  scope.row.outTradeNo == null || scope.row.outTradeNo == ''
                "
              >
                <span style="color: #778899">暂无信息</span>
              </div> -->
              <div>
                <div v-if="((scope.row.deliveryStatus == -1 || scope.row.deliveryStatus == -2) &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)) || scope.row.deleted == 1">
                  取消时间：
                  <span>{{
                    scope.row.cancelTime
                  }}</span>
                </div>
                <div  v-if="((scope.row.deliveryStatus == -1 || scope.row.deliveryStatus == -2) &&
                      (scope.row.wmstatus != 4 || scope.row.wmstatus == null)) || scope.row.deleted == 1">
                  取消原因：
                  <span v-if="scope.row.cancelReason != null">{{
                    scope.row.cancelReason
                  }}</span>
                  <span v-else> -- </span>
                </div>
              </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="margin-top: 10px; text-align: right">
                <span> 商户名称：{{ scope.row.merchantName == null ? ' -- ' : scope.row.merchantName }} </span><br />
                <span> 门店名称：{{ scope.row.shopName == null ? ' -- ' : scope.row.shopName }} </span><br />
                <span>代理商：{{ scope.row.agentName == null ? ' -- ' : scope.row.agentName }}</span
                ><br />
                <span>所属员工：{{ scope.row.personnelName == null ? ' -- ' : scope.row.personnelName }}</span
                ><br />
                <span>
                  佣金：
                  <span
                    v-if="
                      scope.row.getCommission != null &&
                      scope.row.getCommission != ''
                    "
                    >￥{{ scope.row.getCommission }}</span
                  >
                  <span v-else> -- </span> </span
                ><br />
                <span> 下单人：{{ scope.row.memberName }} </span><br />
                <span>手机号：{{ scope.row.memberMobile }}</span
                ><br />
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- <template slot-scope="scope">
            <div style="margin-bottom: 10px;">
              <span>下单时间：{{ scope.row.createTime }}</span>
            </div>

            <div style="margin-top: 10px;">
              <span>
                支付金额：￥{{scope.row.payAmount}}
                <i class="el-icon-info" @click="amountInfoOpen(scope.row)"></i>
              </span><br />
              <span>配送类型：{{scope.row.productName}}</span><br />
              <span>物品信息：{{scope.row.productName}}/{{scope.row.weight}}公斤</span><br />
              <div v-if="scope.row.waimaiOrderId != null && scope.row.waimaiOrderId != ''">
                <span>商品金额：￥{{scope.row.puductMoney}}</span><br />
                <span>商品详情：
                  <el-button type="text" @click="productInfoOpen(scope.row.waimaiOrderId)">点击查看</el-button>
                </span><br />
              </div>
              <div>
                备注：
                <span v-if="scope.row.waimaiOrderId != null && scope.row.waimaiOrderId != ''">{{scope.row.wmCaution}}</span>
                <span v-else>{{scope.row.takeRemark}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" width="400">
          <template slot-scope="scope">
            <div style="margin-top: 10px;">
                <div>
                  接单平台：
                  <span v-if="scope.row.deliveryId != null">
                    <span v-text="getName(scope.row.deliveryId)"></span>
                  </span>
                  <span v-if="scope.row.deliveryId == null && scope.row.wmstatus == 4 && scope.row.deliveryStatus != 4"> 其它平台</span>
                </div>
                <div>
                  骑手姓名：
                  <span v-if="scope.row.shipperName != null">{{scope.row.shipperName}}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  骑手电话：
                  <span v-if="scope.row.shipperPhone != null">{{scope.row.shipperPhone}}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  三方订单号：
                  <span v-if="scope.row.outTradeNo != null">{{scope.row.outTradeNo}}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  接单时间：
                  <span v-if="scope.row.deliveryStatus != 0 && scope.row.deliveryStatus != 1">{{scope.row.deliveryTime}}</span>
                  <span v-else>--</span>
                </div>
                <div>
                  取货时间：
                  <span v-if="scope.row.shipperName != null">{{scope.row.shipperName}}</span>
                  <span v-else> -- </span>
                </div>
                <div>
                  送到时间：
                  <span v-if="scope.row.deliveryStatus == 4">{{scope.row.updateTime}}</span>
                  <span v-else>--</span>
                </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column header-align="right" align="right">
          <template slot-scope="scope">
            <div style="display: flex; margin-bottom: 10px; padding: 3px;">
              <div v-if="scope.row.deliveryStatus == -1 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">已取消</div>
              <div v-if="scope.row.deliveryStatus == 0 && (scope.row.wmstatus == null || scope.row.wmstatus == 0)">待发单</div>
              <div v-if="scope.row.deliveryStatus == 1 && scope.row.status == 1  && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">待接单</div>
              <div v-if="scope.row.deliveryStatus == 1 && scope.row.status == 0 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">待支付</div>
              <div v-if="scope.row.deliveryStatus == 2 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">待配送</div>
              <div v-if="scope.row.deliveryStatus == 3 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">配送中</div>
              <div v-if="scope.row.wmstatus == 4 && scope.row.deliveryStatus != 4">其它平台完成</div>
              <div v-if="scope.row.deliveryStatus == 4">本平台完成</div>
            </div>


          </template>
        </el-table-column> -->
      <!-- <el-table-column label="订单编号" align="center" prop="orderSn" />
      <el-table-column label="订单流水号" align="center" prop="outTradeNo" />
      <el-table-column label="物品名称" align="center" prop="productName" />
      <el-table-column label="物品重量(kg)" align="center" prop="weight" /> -->
      <!-- <el-table-column label="取件时间" align="center" prop="takeTime" width="100">
        <template slot-scope="scope">
          <div>{{ parseTime(scope.row.takeDate, '{y}-{m}-{d}') }}</div>
          <div>{{ parseTime(scope.row.takeTime, '{h}:{i}:{s}') }}</div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="发单时间" align="center" prop="createTime"></el-table-column>
      <el-table-column label="接单时间" align="center" prop="deliveryTime">
        <template slot-scope="scope">
          <span v-if="scope.row.deliveryStatus != 0 && scope.row.deliveryStatus != 1 && scope.row.deliveryStatus != -1">{{scope.row.deliveryTime}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" align="center" prop="updateTime">
        <template slot-scope="scope">
          <span v-if="scope.row.deliveryStatus == 4">{{scope.row.updateTime}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="支付类型" align="center" prop="paymentType">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.paymentType == 1 && scope.row.status != 0">支付宝</el-tag>
          <el-tag type="success" v-if="scope.row.paymentType == 2 && scope.row.status != 0">微信</el-tag>
          <el-tag type="warning" v-if="scope.row.paymentType == 3 && scope.row.status != 0">银联</el-tag>
          <el-tag type="danger" v-if="scope.row.paymentType == 4 && scope.row.status != 0">余额支付</el-tag>
          <el-tag type="info" v-if="scope.row.paymentType == 5 && scope.row.status != 0">第三方平台支付</el-tag>
          <span v-if="scope.row.status == 0"> - </span>
        </template>
      </el-table-column>
      <el-table-column label="配送金额" align="center" prop="totalAmount">
        <template slot-scope="scope">
          {{ scope.row.totalAmount + scope.row.couponAmount }}
        </template>
      </el-table-column>
      <el-table-column label="优惠金额" align="center" prop="couponAmount" />
      <el-table-column label="配送实付" align="center" prop="payAmount" />
      <el-table-column label="小费金额" align="center" prop="tipAmount" />
      <el-table-column label="我的佣金" align="center" prop="getCommission">
        <template slot-scope="scope">
          <span v-if="scope.row.getCommission">￥{{scope.row.getCommission}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="登录人/电话" align="center" prop="contactName">
        <template slot-scope="scope">
          <div v-if="scope.row.memberName">{{scope.row.memberName}}</div>
          <div v-if="scope.row.memberMobile">{{scope.row.memberMobile}}</div>
        </template>
      </el-table-column>
      <el-table-column label="优惠券" align="center" prop="couponId">
        <template slot-scope="scope">
          <div v-if="scope.row.coupon">{{scope.row.coupon.couponName}}</div>
          <div v-else>- -</div>
        </template>
      </el-table-column>
      <el-table-column label="发件地区" align="center" prop="sendProvinceName">
        <template slot-scope="scope">
          <div>{{scope.row.sendProvinceName}} {{scope.row.sendCityName}} {{scope.row.sendDistrictName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="发件地址" align="center" prop="sendAddress" />
      <el-table-column label="发件联系人/联系电话" align="center" prop="sendContactName">
        <template slot-scope="scope">
          <div v-if="scope.row.sendContactName">{{scope.row.sendContactName}}</div>
          <div v-if="scope.row.sendPhone">{{scope.row.sendPhone}}</div>
        </template>
      </el-table-column>
      <el-table-column label="收件地区" align="center" prop="receiptProvinceName">
        <template slot-scope="scope">
          <div>{{scope.row.receiptProvinceName}} {{scope.row.receiptCityName}} {{scope.row.receiptDistrictName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="收件地址" align="center" prop="receiptAddress" />
      <el-table-column label="收件联系人/联系电话" align="center" prop="receiptContactName">
        <template slot-scope="scope">
          <div v-if="scope.row.receiptContactName">{{scope.row.receiptContactName}}</div>
          <div v-if="scope.row.receiptPhone">{{scope.row.receiptPhone}}</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="deliveryStatus">
        <template slot-scope="scope">
          <div v-if="scope.row.deliveryStatus == -1 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">已取消</div>
          <div v-if="scope.row.deliveryStatus == 0 && (scope.row.wmstatus == null || scope.row.wmstatus == 0)">待发单</div>
          <div v-if="scope.row.deliveryStatus == 1 && scope.row.status == 1  && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">待接单</div>
          <div v-if="scope.row.deliveryStatus == 1 && scope.row.status == 0 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">待支付</div>
          <div v-if="scope.row.deliveryStatus == 2 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">待配送</div>
          <div v-if="scope.row.deliveryStatus == 3 && (scope.row.wmstatus != 4 || scope.row.wmstatus == null)">配送中</div>
          <div v-if="scope.row.wmstatus == 4 && scope.row.deliveryStatus != 4">其它平台完成</div>
          <div v-if="scope.row.deliveryStatus == 4">本平台完成</div> -->
      <!-- <div v-if="(scope.row.wmstatus == 4 && scope.row.deliveryStatus == 4) || (scope.row.deliveryStatus == 4 && scope.row.wmstatus == null)">本平台完成</div> -->
      <!-- </template>
      </el-table-column>
      <el-table-column label="商家名称" align="center" prop="merchantName" />
      <el-table-column label="代理商名称" align="center" prop="agentName" />
      <el-table-column label="配送平台名称" align="center" prop="deliveryName">
        <template slot-scope="scope">
          <div v-if="scope.row.waimaiOrderId == null">
            <span v-text="getName(scope.row.deliveryId)"></span>
          </div>
          <div v-if="scope.row.waimaiOrderId != null && scope.row.wmstatus == 4 && scope.row.deliveryStatus != 4"> 其它平台 </div>
        </template>
      </el-table-column> -->
    </Pagination>

    <el-dialog
      title="金额详细信息"
      :visible.sync="amountInfoVisible"
      width="500"
    >
      <div style="font-size: 18px; font-weight: 400">
        <span>配送费：￥{{
            (amountInfo.totalAmount +
            amountInfo.couponAmount - amountInfo.tipAmount).toFixed(2)
          }}</span
        ><br /><br />
        <span v-if="amountInfo.deliveryId != 24 && amountInfo.deliveryId != 19" style="margin-top: 10px">小费：￥{{ amountInfo.tipAmount }}</span
        >
        <span v-if="amountInfo.deliveryId == 24 || amountInfo.deliveryId == 19" style="margin-top: 10px">小费：￥0</span
        ><br /><br />
        <span style="margin-top: 10px"
          >优惠券：-￥{{ amountInfo.couponAmount }}</span
        ><br /><br />
        <span style="margin-top: 10px"
          >其它优惠：-￥{{ amountInfo.firstCoupon != undefined ? amountInfo.firstCoupon: 0}}</span
        ><br /><br />
        <!-- <span  v-if="amountInfo.deliveryId != 24 && amountInfo.deliveryId != 19" style="margin-top: 10px"
          >支付金额：￥{{ amountInfo.payAmount }}</span
        >
        <span  v-if="amountInfo.deliveryId == 24 || amountInfo.deliveryId == 19" style="margin-top: 10px"
          >支付金额：￥{{ (amountInfo.payAmount - amountInfo.tipAmount).toFixed(2) }}</span
        > -->
        <span style="margin-top: 10px"
          >支付金额：￥{{ amountInfo.payAmount }}</span
        ><br /><br />
        <!-- <div>
          <span style="margin-top: 10px" v-if="this.type != 2 && amountInfo.commission != null"
          >参与分佣金额：￥{{ amountInfo.commission }}</span
        >
        <span style="margin-top: 10px" v-if="this.type != 2 && amountInfo.commission == null"
          >参与分佣金额：￥0</span
        >
        </div> -->
      </div>
    </el-dialog>

    <el-dialog title="选择取消订单原因" :visible.sync="cancelOrderVisible" wdith="700" append-to-body>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="150px">
        <el-form-item label="原因" prop="memberName">
          <el-select v-model="dataForm.cancelOrderId"  placeholder="请选择取消原因" clearable>
            <el-option v-for="item in orderReasonOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelOrderVisible = false">取 消</el-button>
        <el-button type="primary" @click="submite()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="productInfoVisible" width="700">
      <el-table :data="this.productInfoList">
        <el-table-column
          align="center"
          header-align="center"
          label="商品名称"
          prop="foodName"
        >
          <template slot-scope="scope">
            <span
            >
              {{ scope.row.foodName }}
            </span>
            <!-- <span v-if="this.productInfoWaimaiId == undefined"> 到店查看 </span> -->
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="数量">
          <template slot-scope="scope">
            <span
            >
              ×{{ scope.row.quantity }}
            </span>
            <!-- <span v-if="this.productInfoWaimaiId == undefined"> ×1 </span> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :visible.sync="deliveryInfoVisible" width="700">
      <el-table :data="this.deliveryInfoList">
        <el-table-column align="center" header-align="center" label="子订单号" prop="childOrderSn" />
        <el-table-column align="center" header-align="center" label="三方订单号" prop="outTradeNo" />
        <el-table-column align="center" header-align="center" label="配送平台" prop="deliveryName" />
        <el-table-column align="center" header-align="center" label="金额" prop="payAmount" />
        <el-table-column align="center" header-align="center" label="状态" prop="deliveryStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.deliveryStatus == 0">待发单</span>
            <span v-if="scope.row.deliveryStatus == 1">待接单</span>
            <span v-if="scope.row.deliveryStatus == 2">待配送</span>
            <span v-if="scope.row.deliveryStatus == -1">已取消</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="下单失败原因" prop="failMsg" />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import {
  exportOrder
} from "@/api/module/order";
import Pagination from "@/components/Paginations";
import moment from "moment";
import user from "@/store/modules/user";
import OldReceipt from "@/components/area/oldReceipt";
import OldSend from "@/components/area/oldSend";
import area from "@/api/oldCity";
import { constants } from "os";

export default {
  name: "Order",
  components: {
    OldReceipt,
    OldSend,
    Pagination
  },
  data() {
    return {
      orderReasonOption: [],
      msg: undefined,
      type: '',
      show2: false,
      cancelOrderVisible: false,
      amountInfo: {
        deliveryId: undefined,
        totalAmount: 0.0,
        couponAmount: 0.0,
        firstCoupon: 0.0,
        tipAmount: 0.0,
        payAmount: 0.0,
        commission: 0.0,
      },
      amountInfoVisible: false,
      productInfoVisible: false,
      deliveryInfoVisible: false,
      productInfoList: [],
      deliveryInfoList: [],
      productInfoWaimaiId: '',
      user: {},
      agentList: [],
      deliveryDate: [],
      createDate: [],
      completeDate: [],
      merchantOption: [],
      dspDeliveryOption: [],
      activeName: "all",
      lablZero: "待接单",
      lableOne: "取货中",
      lableTwo: "配送中",
      lableThree: "平台完成",
      lableFour: "已取消",
      lableFive: "异常",
      lableSix: "待发单",
      lableSeven: "其它平台完成",
      waimaiOrderTypeOption: [
        {
          value: 1,
          label: "美团",
        },
        {
          value: 2,
          label: "饿了么",
        },
        {
          value: 3,
          label: "饿百零售",
        },
        {
          value: 4,
          label: "猎豹",
        }
      ],
      paymentTypeOption: [
        {
          value: 1,
          label: "支付宝支付",
        },
        {
          value: 2,
          label: "微信支付",
        },
        {
          value: 3,
          label: "银联支付",
        },
        {
          value: 4,
          label: "余额支付",
        },
      ],
      deliveryStatusOption: [
        {
          value: 0,
          label: "待发单",
        },
        {
          value: 1,
          label: "待接单",
        },
        {
          value: 2,
          label: "待配送",
        },
        {
          value: 3,
          label: "配送中",
        },
        {
          value: 4,
          label: "已完成",
        },
        {
          value: -1,
          label: "已取消",
        },
        {
          value: -2,
          label: "异常",
        },
        {
          value: 100,
          label: "其它平台完成",
        },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 配送订单表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      areaProp: {},
      startArea: {
        province: "",
        city: "",
        district: "",
        provinceName: "",
        cityName: "",
        districtName: "",
        cityValues: [],
        districtValues: [],
        districtNames: [],
      },
      sendAreaProp: {},
      sendStartArea: {
        province: "",
        city: "",
        district: "",
        provinceName: "",
        cityName: "",
        districtName: "",
        cityValues: [],
        districtValues: [],
        districtNames: [],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        outTradeNo: undefined,
        productId: undefined,
        productName: undefined,
        weight: undefined,
        takeDate: undefined,
        takeTime: undefined,
        takeRemark: undefined,
        paymentType: undefined,
        totalAmount: undefined,
        couponAmount: undefined,
        payAmount: undefined,
        couponId: undefined,
        sendAddressId: undefined,
        sendProvinceName: undefined,
        sendCityName: undefined,
        sendDistrictName: undefined,
        sendAddress: undefined,
        sendContactName: undefined,
        sendPhone: undefined,
        receiptAddressId: undefined,
        receiptProvinceName: undefined,
        receiptCityName: undefined,
        receiptDistrictName: undefined,
        receiptAddress: undefined,
        receiptContactName: undefined,
        receiptPhone: undefined,
        deliveryType: undefined,
        preDeliveryIds: undefined,
        actualDeliveryId: undefined,
        useTip: undefined,
        tipAmount: undefined,
        status: undefined,
        deliveryStatus: undefined,
        merchantId: undefined,
        merchantName: undefined,
        shopName: undefined,
        aId: undefined,
        orderSn: undefined,
        memberName: undefined,
        memberMobile: undefined,
        waimaiOrderType: undefined,
        personnelName: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        outTradeNo: [
          {
            required: true,
            message: "外部订单流水号不能为空",
            trigger: "blur",
          },
        ],
        productId: [
          { required: true, message: "物品ID不能为空", trigger: "blur" },
        ],
        productName: [
          { required: true, message: "物品名称不能为空", trigger: "blur" },
        ],
        weight: [
          { required: true, message: "物品重量不能为空", trigger: "blur" },
        ],
        takeDate: [
          { required: true, message: "取件日期不能为空", trigger: "blur" },
        ],
        takeTime: [
          { required: true, message: "取件时间不能为空", trigger: "blur" },
        ],
        paymentType: [
          {
            required: true,
            message:
              "支付类型：1->支付宝支付 2->微信支付 3->银联支付 4->余额支付不能为空",
            trigger: "change",
          },
        ],
        totalAmount: [
          { required: true, message: "订单总金额不能为空", trigger: "blur" },
        ],
        couponAmount: [
          { required: true, message: "优惠金额不能为空", trigger: "blur" },
        ],
        payAmount: [
          { required: true, message: "实际支付金额不能为空", trigger: "blur" },
        ],
        sendAddressId: [
          { required: true, message: "发件地址ID不能为空", trigger: "blur" },
        ],
        sendProvinceName: [
          { required: true, message: "发件所在省不能为空", trigger: "blur" },
        ],
        sendCityName: [
          { required: true, message: "发件所在城市不能为空", trigger: "blur" },
        ],
        sendDistrictName: [
          { required: true, message: "发件所在区不能为空", trigger: "blur" },
        ],
        sendAddress: [
          { required: true, message: "发件详细地址不能为空", trigger: "blur" },
        ],
        sendContactName: [
          { required: true, message: "发件联系人不能为空", trigger: "blur" },
        ],
        sendPhone: [
          { required: true, message: "发件联系电话不能为空", trigger: "blur" },
        ],
        receiptAddressId: [
          { required: true, message: "收件地址ID不能为空", trigger: "blur" },
        ],
        receiptProvinceName: [
          { required: true, message: "收件所在省不能为空", trigger: "blur" },
        ],
        receiptCityName: [
          { required: true, message: "收件所在城市不能为空", trigger: "blur" },
        ],
        receiptDistrictName: [
          { required: true, message: "收件所在区不能为空", trigger: "blur" },
        ],
        receiptAddress: [
          { required: true, message: "收件地址不能为空", trigger: "blur" },
        ],
        receiptContactName: [
          { required: true, message: "收件联系人不能为空", trigger: "blur" },
        ],
        receiptPhone: [
          { required: true, message: "收件联系电话不能为空", trigger: "blur" },
        ],
        status: [
          {
            required: true,
            message:
              "订单状态：0-> 待支付，1->已支付, 2->派单中, 3->取件中，4->配送中，5->已完成，-1->已取消不能为空",
            trigger: "blur",
          },
        ],
      },
      dataForm: {
        id: '',
        cancelOrderId: ''
      },
      dataRule: {},
    };
  },
  created() {
    this.type = localStorage.getItem("SYS_USER_TYPE")

    this.queryParams.merchantId = this.$route.query.merchantId;
    this.queryParams.memberId = this.$route.query.memberId;
    // this.getList();
    this.user = user.actions.getSysUser();

    // 获取商户列表
    this.$http.get(`/module/agent/list/agent`).then(({ data }) => {
      if (data) {
        this.agentList = data.list.rows;
        // console.log("agentList", this.agentList);
      }
    });

    this.getMerchantOption();
    this.getDspDeliveryOption();

    this.createDate[0] =
      this.formatDate(new Date().getTime() - 2 * 24 * 60 * 60 * 1000) +
      " 00:00:00";
    this.createDate[1] = this.formatDate(new Date().getTime()) + " 23:59:59";
    // console.log(this.createDate);
    this.handleQuery();
    // this.getStatusNum();
  },
  methods: {
    deliveryInfo(orderSn) {
      console.log('orderSn', orderSn)
      if(orderSn != null && orderSn != '') {
        this.$http.get('/module/order/deliveryInfo?orderSn=' + orderSn).then(({ data }) => {
          this.deliveryInfoList = data
        })
        this.deliveryInfoVisible = true
      }
    },

    formatDate(time) {
      return moment(time).format("YYYY-MM-DD");
    },

    handleClick(tab, event) {
      // loading开始
      this.queryParams.deliveryStatus = this.activeName == 'all' ? null : Number(this.activeName)

      this.$nextTick(() => {
        this.getStatusNum();
        this.$refs.pagination.handleSearch(true);
      });
      // loading结束
    },

    getStatusNum() {
      this.$http({
        url: this.$http.adornUrl("/module/order/sumByStatus/1"),
        method: "get",
        params: this.$http.adornParams(this.queryParams)
      }).then(({ data }) => {
        if (data != null) {
          this.lablZero = "待接单 " + data;
        }
      });
      this.$http({
        url: this.$http.adornUrl("/module/order/sumByStatus/2"),
        method: "get",
        params: this.$http.adornParams(this.queryParams)
      }).then(({ data }) => {
        if (data != null) {
          this.lableOne = "取货中 " + data;
        }
      });
      this.$http({
        url: this.$http.adornUrl("/module/order/sumByStatus/3"),
        method: "get",
        params: this.$http.adornParams(this.queryParams)
      }).then(({ data }) => {
        if (data != null) {
          this.lableTwo = "配送中 " + data;
        }
      });
      // this.$http({
      //   url: this.$http.adornUrl("/module/order/sumByStatus/-1"),
      //   method: "get",
      //   params: this.$http.adornParams(this.queryParams)
      // }).then(({ data }) => {
      //   if (data != null) {
      //     this.lableFour = "已取消 " + data;
      //   }
      // });
      this.$http({
        url: this.$http.adornUrl("/module/order/sumByStatus/-2"),
        method: "get",
        params: this.$http.adornParams(this.queryParams)
      }).then(({ data }) => {
        if (data != null) {
          this.lableFive = "异常 " + data;
        }
      });
      this.$http({
        url: this.$http.adornUrl("/module/order/sumByStatus/0"),
        method: "get",
        params: this.$http.adornParams(this.queryParams)
      }).then(({ data }) => {
        if (data != null) {
          this.lableSix = "待发单 " + data;
        }
      });
      // this.$http({
      //   url: this.$http.adornUrl("/module/order/sumByStatus/100"),
      //   method: "get",
      //   params: this.$http.adornParams(this.queryParams)
      // }).then(({ data }) => {
      //   if (data != null) {
      //     this.lableSeven = "其它平台完成 " + data;
      //   }
      // });
      this.$http({
        url: this.$http.adornUrl("/module/order/sumByStatus/4"),
        method: "get",
        params: this.$http.adornParams(this.queryParams)
      }).then(({ data }) => {
        if (data != null) {
          this.lableThree = "平台完成 " + data;
        }
      });
      // console.log('deliveryStatusSum', this.queryParams.deliveryStatus)
    },

    amountInfoOpen(row) {
      // console.log('row', row)
      this.amountInfo.deliveryId = row.deliveryId
      this.amountInfo.totalAmount = row.totalAmount;
      this.amountInfo.couponAmount = row.couponAmount;
      this.amountInfo.firstCoupon = row.firstCoupon;
      this.amountInfo.tipAmount = row.tipAmount;
      this.amountInfo.payAmount = row.payAmount;
      this.amountInfo.commission = row.commission;
      this.amountInfoVisible = true;
    },

    productInfoOpen(waimaiOrderId) {
      this.productInfoWaimaiId = waimaiOrderId;
      if(waimaiOrderId != undefined) {
        this.productInfoList = []
        this.$http
        .get("/module/order/productInfo?waimaiOrderId=" + waimaiOrderId)
        .then(({ data }) => {
          if (data) {
            this.productInfoList = data;
          }
        });
      }else {
        this.productInfoList = [{'foodName':'到店查看','quantity':'1'}]
      }
      this.productInfoVisible = true;
    },

    // 选择区域
    changeArea(e) {
      this.startArea = e;
    },
    changeSendArea(e) {
      this.sendStartArea = e;
    },
    getName(deliveryId) {
      var t = this.dspDeliveryOption.filter(function (obj) {
        return obj.id === deliveryId;
      });
      if (t[0]) {
        return t[0].name;
      } else {
        return "--";
      }
    },
    getMerchantOption() {
      this.$http.get(`/module/merchant/getMerchantOption`).then(({ data }) => {
        if (data) {
          this.merchantOption = data.list.rows;
        }
      });
    },
    getDspDeliveryOption() {
      this.$http
        .get(`/module/dspDelivery/selectOrderDspDeliverys`)
        .then(({ data }) => {
          if (data) {
            this.dspDeliveryOption = data;
          }
        });
    },
    /** 查询配送订单列表 */
    // getList() {
    //   this.loading = true;
    //   listOrder(this.queryParams).then(response => {
    //     this.orderList = response.rows;
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    // 取消按钮
    // init(id) {
    //   this.queryParams.merchantId = id;
    //   this.getList()
    // },

    // 取消订单
    cancelOrder(orderId) {
      console.log('orderId', orderId)
      this.dataForm.id = orderId
      this.$http.get('/module/order/getOrderReason').then(({ data }) => {
        console.log('data', data)
        this.orderReasonOption = data.map(v => ({ value: Object.keys(v)[0], label: v[Object.keys(v)[0]] }))
        
        // 此方法效率更高，少一次Object.keys()方法执行和数组寻址
        // this.orderReasonOption = data.map(v => {
        //   // 获取数组每个对象的key
        //   const key = Object.keys(v)[0]
        //   // 返回新数组
        //   return ({value:key, label:v[key]});
        // })
        
        console.log('orderReason', this.orderReasonOption)
      })
      this.cancelOrderVisible = true
    },

    // 手动完成订单
    finishOrder(orderId) {
      console.log('orderId', orderId)
      this.dataForm.id = orderId
      this.$confirm('此操作将手动完成该订单，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.$http.post("/module/order/finishOrder", this.dataForm).then(({ data }) => {
            if (data) {
              setTimeout(() => {
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                });
                this.handleQuery();
              }, 1000)  
            } else {
              this.$message.error(data.msg);
            }
          });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
    },

    submite() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将取消该订单，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.post("/module/order/cancelOrder", this.dataForm).then(({ data }) => {
            if (data) {
              setTimeout(() => {
                this.cancelOrderVisible = false;
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                });
                this.handleQuery();
              }, 1000)  
            } else {
              this.$message.error(data.msg);
            }
          });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })      
        }
      });
    },
    
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        outTradeNo: undefined,
        productId: undefined,
        productName: undefined,
        weight: undefined,
        takeDate: undefined,
        takeTime: undefined,
        takeRemark: undefined,
        paymentType: undefined,
        totalAmount: undefined,
        couponAmount: undefined,
        payAmount: undefined,
        couponId: undefined,
        sendAddressId: undefined,
        sendProvinceName: undefined,
        sendCityName: undefined,
        sendDistrictName: undefined,
        sendAddress: undefined,
        sendContactName: undefined,
        sendPhone: undefined,
        receiptAddressId: undefined,
        receiptProvinceName: undefined,
        receiptCityName: undefined,
        receiptDistrictName: undefined,
        receiptAddress: undefined,
        receiptContactName: undefined,
        receiptPhone: undefined,
        deliveryType: undefined,
        preDeliveryIds: undefined,
        actualDeliveryId: undefined,
        useTip: undefined,
        tipAmount: undefined,
        status: 0,
        deliveryStatus: 0,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // console.log("createDate", this.createDate);
      if (this.createDate !== null && this.createDate !== "") {
        if (this.createDate[0] !== undefined) {
          this.queryParams.createStartTime = this.createDate[0];
          this.queryParams.createEndTime = this.createDate[1];
        }
      } else {
        this.queryParams.createStartTime = "";
        this.queryParams.createEndTime = "";
      }
      // console.log("createStartTime", this.queryParams.createStartTime);
      // console.log("createEndTime", this.queryParams.createEndTime);
      if (this.completeDate !== null && this.completeDate !== "") {
        if (this.completeDate[0] !== undefined) {
          this.queryParams.completeStartTime = this.completeDate[0];
          this.queryParams.completeEndTime = this.completeDate[1];
        }
      } else {
        this.queryParams.completeStartTime = "";
        this.queryParams.completeEndTime = "";
      }
      if (this.deliveryDate !== null && this.deliveryDate !== "") {
        if (this.deliveryDate[0] !== undefined) {
          this.queryParams.deliveryStartTime = this.deliveryDate[0];
          this.queryParams.deliveryEndTime = this.deliveryDate[1];
        }
      } else {
        this.queryParams.deliveryStartTime = "";
        this.queryParams.deliveryEndTime = "";
      }
      this.queryParams.sendProvinceName = this.sendStartArea.provinceName;
      this.queryParams.sendCityName = this.sendStartArea.cityName;
      this.queryParams.sendDistrictName = this.sendStartArea.districtName;

      this.queryParams.receiptProvinceName = this.startArea.provinceName;
      this.queryParams.receiptCityName = this.startArea.cityName;
      this.queryParams.receiptDistrictName = this.startArea.districtName;

      // console.log("startArea", this.startArea);
      // console.log("sendStartArea", this.sendStartArea);
      this.getStatusNum();
      this.$refs.pagination.handleSearch(true);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.startArea = {
        province: "",
        city: "",
        district: "",
        provinceName: "",
        cityName: "",
        districtName: "",
        cityValues: [],
        districtValues: [],
        districtNames: [],
      };
      this.areaProp = {};
      this.sendStartArea = {
        province: "",
        city: "",
        district: "",
        provinceName: "",
        cityName: "",
        districtName: "",
        cityValues: [],
        districtValues: [],
        districtNames: [],
      };
      this.sendAreaProp = {};
      this.handleQuery();
      this.getStatusNum();
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出配送订单数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then( () => {
          this.msg = this.$message({
              message: '正在导出，请稍等。。。',
              duration: 0,
              type: 'warning',
              showClose: true
          });
          return exportOrder(queryParams);
        })
        .then((response) => {
          setTimeout(() => {
            this.msg.close()
            this.msg = this.$message({
              duration: 2000,
              message: '导出成功！',
              type: 'success'
            }, 2000)
          });
          this.download(response.data);
        })
        .catch((err) => {
          console.log(err)
        });
    },
  },
};
</script>
<style lang="scss">
.clearFix:after{
  content: "";
  font-size: 0;
  height: 0;
  display: block;
  clear: both;
}
.description p {
  margin: 0;
  padding-left: 10px;
}

i.sendLogo {
  background: black;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
}
i.sendLogo::before {
  content: "发";
}
i.receiptLogo {
  background: black;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
}
i.receiptLogo::before {
  content: "收";
}
.el-icon-info:before {
  content: "";
}
.transition-box {
  margin-bottom: 10px;
  width: 100%;
  height: 120px;
  border-radius: 4px;
  /* text-align: center; */
  color: #fff;
  /* padding: 40px 20px; */
  box-sizing: border-box;
  margin-right: 20px;
}

.border-line {
  position: relative;
}

.border-line::before {
  content: "";
  position: absolute;
  left: -10px;
  height: 1px;
  width: calc(100% + 20px);
  background: #DFE4ED;
}

.update-css {
  .el-table {
    .el-table__header-wrapper {
      display: none;
    }

    .el-table__body-wrapper {
      .el-table__body {
        > tbody {
          display: flex;
          flex-direction: column;
          width: 100%;

          > tr {
            display: flex;
            width: 100%;

            &:nth-of-type(n + 2) {
              margin-top: 20px;
            }

            &:last-of-type {
              margin-bottom: 1px;
            }

            > td {
              border: 1px solid #DFE4ED;
              display: flex;
              width: 100%;

              .cell {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}

.serial {
  background-color: RGB(50,122,244);
  border-radius: 50px 50px;
  height: 25px;
  width: 45px;
  line-height: 25px;
  text-align: center;
  display: inline-block;
  margin-right: 5px;
}

.serial_text {
  color: #fff;
  font-size: 14px;
  letter-spacing: 2px;
}
</style>