farming-business-shop-web/src/views/manage/order.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="农商批发订单" :name="0"></el-tab-pane>
      <el-tab-pane label="同城秒送订单" :name="1"></el-tab-pane>
      <el-tab-pane label="福利专区订单" :name="2"></el-tab-pane>
    </el-tabs>
    <div class="header" style="width: 100%" v-if="!hdUserId">
      <el-row class="row" :gutter="12">
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>今日新增订单</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.AllOrder : 0 }} 个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>待发货</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.waitDelivery : 0 }}个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>待收货</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.waitReceive : 0 }}个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>待支付</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.waitPay : 0 }}个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>待退款</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.waitRefund : 0 }}个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>售后订单</span>
              </div>
              <div class="count">
                {{ orderStatistics ? orderStatistics.afterSalesOrder : 0 }}个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>已完成订单</span>
              </div>
              <div class="count">
                {{
                  orderStatistics.successOrderCount
                    ? orderStatistics.successOrderCount
                    : 0
                }}个
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>到账金额</span>
              </div>
              <div class="count">
                {{
                  orderStatistics.divideSuccessPrice
                    ? orderStatistics.divideSuccessPrice
                    : 0
                }}元
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>冻结金额</span>
              </div>
              <div class="count">
                {{
                  orderStatistics.divideWaitPrice
                    ? orderStatistics.divideWaitPrice
                    : 0
                }}元
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="商品名称" prop="spuName">
        <el-input
          v-model="queryParams.spuName"
          placeholder="请输入商品名称"
          clearable
          style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="订单编号" prop="userOrderSn">
        <el-input
          v-model="queryParams.userOrderSn"
          placeholder="请输入订单编号"
          clearable
          style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="买家手机号" prop="userPhone" label-width="140px">
        <el-input
          v-model="queryParams.userPhone"
          placeholder="请输入下单用户手机号"
          clearable
          style="width: 180px"
        />
      </el-form-item>

      <el-form-item label="下单人ID" prop="userId" label-width="140px">
        <el-input
          v-model="queryParams.userId"
          placeholder="请输入下单人ID"
          clearable
          style="width: 180px"
        />
      </el-form-item>

      <el-form-item label="下单时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          placeholder="请选择下单时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="订单状态" prop="orderStatusKey">
        <el-select
          v-model="queryParams.orderStatusKey"
          placeholder="请选择订单状态"
          style="width: 180px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="待发货" value="WAIT_DELIVERY"> </el-option>
          <el-option label="待收货" value="WAIT_RECEIVE"> </el-option>
          <el-option label="待付款" value="WAIT_PAY"> </el-option>
          <el-option label="已完成" value="COMPLETE"> </el-option>
          <el-option label="已取消/申请售后" value="CANCEL"> </el-option>
          <el-option label="待发布货运信息" value="WAIT_PUBLISH_INVOICE">
          </el-option>
          <el-option label="等待司机接单" value="WAIT_DRIVER_ERCEIVE">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="售后状态" prop="afterSaleStatus">
        <el-select
          v-model="queryParams.afterSaleStatus"
          placeholder="请选择售后状态"
          style="width: 180px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="未申请" value="0"> </el-option>
          <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-select>
      </el-form-item>

      <el-form-item label="支付方式" prop="paymentType" label-width="140px">
        <el-select
          v-model="queryParams.paymentType"
          placeholder="请选择支付方式"
          style="width: 180px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="支付宝" value="alipay"> </el-option>
          <el-option label="微信支付" value="wechat"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="配送方式"
        prop="deliveryType"
        style="margin-left: 60px"
      >
        <el-select
          v-model="queryParams.deliveryType"
          placeholder="请选择支付方式"
          style="width: 180px"
        >
          <el-option label="全部" value=""> </el-option>
          <el-option label="自提" value="0"> </el-option>
          <el-option label="同城下单" value="1"> </el-option>
          <el-option label="异地下单" value="2" v-if="activeName == 0">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="printOrderBtn"
          :disabled="!selectList.length > 0"
          >订单打印</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleExport"
          :disabled="!selectList.length > 0"
          >导出</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" @click="All"
          >全选</el-button
        >
      </el-col> -->
    </el-row>
    <!-- :span-method="objectSpanMethod" -->
    <el-table
      ref="multipleTable"
      :span-method="objectSpanMethod"
      v-loading="loading"
      :data="spuList"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="序号" type="index" /> -->
      <el-table-column
        label="订单编号"
        align="center"
        prop="carPayNo"
        width="230"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="商品名称"
        align="center"
        prop="skuName"
        width="200"
      >
        <template slot-scope="scope">
          {{
            scope.row.goodsInfo
              ? JSON.parse(scope.row.goodsInfo)[0].skuName
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="交易金额(元)"
        align="center"
        prop="paymentAmount"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.goodsAmount.toFixed(2) }}元
        </template>
      </el-table-column>

      <el-table-column
        label="收货人姓名"
        align="center"
        prop="consigneeContactName"
        width="100"
      />
      <el-table-column
        label="收货人手机号"
        align="center"
        prop="consigneeContactMobile"
        width="110"
      />

      <el-table-column
        label="下单人姓名"
        align="center"
        prop="userNick"
        width="120"
      />
      <el-table-column
        label="下单人ID"
        align="center"
        prop="userId"
        width="100"
      />
      <el-table-column
        label="下单时间"
        align="center"
        prop="createTime"
        width="160"
      />
      <el-table-column label="单价/数量" align="center" prop="price">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.goodsInfo
                ? JSON.parse(scope.row.goodsInfo)[0].price + "元"
                : ""
            }}
            <br />
            {{
              scope.row.goodsInfo
                ? "共" + JSON.parse(scope.row.goodsInfo)[0].quantity
                : ""
            }}{{
              scope.row.goodsInfo ? JSON.parse(scope.row.goodsInfo)[0].unit : ""
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="packageType">
        <template slot-scope="scope">
          {{
            scope.row.paymentType == "alipay"
              ? "支付宝支付"
              : scope.row.paymentType == "wechat"
              ? "微信支付"
              : scope.row.paymentType == "card"
              ? "银行卡支付"
              : scope.row.paymentType == "firstuse"
              ? "先用后付"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="支付状态" align="center" prop="paymentStatus">
        <template slot-scope="scope">
          {{
            scope.row.paymentStatus == "0"
              ? "待支付"
              : scope.row.paymentStatus == "1"
              ? "线上支付"
              : scope.row.paymentStatus == "2"
              ? "线下支付"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="配送方式"
        align="center"
        prop="paymentType"
        width="120"
      >
        <template slot-scope="scope">
          {{
            scope.row.deliveryType == "0"
              ? "自提"
              : scope.row.deliveryType == "1"
              ? "同城下单"
              : scope.row.deliveryType == "2"
              ? "异地下单"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" width="120">
        <template slot-scope="scope">
          {{
            scope.row.orderStatus == 0
              ? "待商家确认修改运费"
              : scope.row.orderStatus == 10
              ? "等待买家支付"
              : scope.row.orderStatus == 20
              ? "等待商家发布货运信息"
              : scope.row.orderStatus == 90
              ? "等待司机接单"
              : scope.row.orderStatus == 100
              ? "等待司机支付保证金"
              : scope.row.orderStatus == 110
              ? "等待司机装货"
              : scope.row.orderStatus == 120
              ? "已装货，运输中"
              : scope.row.orderStatus == 30
              ? "司机已到达，等待买家签收"
              : scope.row.orderStatus == 40
              ? "买家已收货"
              : scope.row.orderStatus == 50
              ? "已取消"
              : scope.row.orderStatus == 60
              ? "退款中"
              : scope.row.orderStatus == 70
              ? "退款成功"
              : scope.row.orderStatus == 80
              ? "退款失败"
              : scope.row.orderStatus == 130
              ? "待处理售后"
              : scope.row.orderStatus == 140
              ? "已处理售后"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="售后状态" align="center">
        <template slot-scope="scope">
          {{
            scope.row.afterSaleStatus == 0
              ? "未申请"
              : scope.row.afterSaleStatus == 1
              ? "已申请"
              : scope.row.afterSaleStatus == 2
              ? "审核失败"
              : scope.row.afterSaleStatus == 3
              ? "审核成功（退款中）"
              : scope.row.afterSaleStatus == 4
              ? "退款成功"
              : scope.row.afterSaleStatus == 5
              ? "退款失败（联系客服解决)"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handlexyhf(scope.row)"
            v-if="
              scope.row.paymentType == 'firstuse' &&
              scope.row.auditFirstUse != 0
            "
            >先用后付审核</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handlexxzf(scope.row)"
            v-if="
              scope.row.paymentStatus == '2' &&
              scope.row.confirmOfflinePayment != 0
            "
            >确认是否已线下支付</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDetail(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >订单详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      append-to-body
    >
      <el-descriptions title="订单详情" column="3">
        <el-descriptions-item label="订单编号">{{
          detailInfo ? detailInfo.userOrderSn : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{
            detailInfo
              ? detailInfo.orderStatus == 0
                ? "待商家确认修改运费"
                : detailInfo.orderStatus == 10
                ? "等待买家支付"
                : detailInfo.orderStatus == 20
                ? "等待商家发布货运信息"
                : detailInfo.orderStatus == 90
                ? "等待司机接单"
                : detailInfo.orderStatus == 100
                ? "等待司机支付保证金"
                : detailInfo.orderStatus == 110
                ? "等待司机装货"
                : detailInfo.orderStatus == 120
                ? "已装货，运输中"
                : detailInfo.orderStatus == 30
                ? "司机已到达，等待买家签收"
                : detailInfo.orderStatus == 40
                ? "买家已收货"
                : detailInfo.orderStatus == 50
                ? "已取消"
                : detailInfo.orderStatus == 60
                ? "退款中"
                : detailInfo.orderStatus == 70
                ? "退款成功"
                : detailInfo.orderStatus == 80
                ? "退款失败"
                : detailInfo.orderStatus == 130
                ? "待处理售后"
                : detailInfo.orderStatus == 140
                ? "已处理售后"
                : ""
              : ""
          }}</el-descriptions-item
        >
        <el-descriptions-item label="配送方式">
          {{
            detailInfo
              ? detailInfo.deliveryMethod == "0"
                ? "自提"
                : detailInfo.deliveryMethod == "1"
                ? "同城下单"
                : detailInfo.deliveryMethod == "2"
                ? "异地下单"
                : ""
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">
          {{
            detailInfo
              ? detailInfo.paymentType == "alipay"
                ? "支付宝"
                : detailInfo.paymentType == "wechat"
                ? "微信支付"
                : detailInfo.paymentType == "card"
                ? "银行卡支付"
                : detailInfo.paymentType == "firstuse"
                ? "银行卡支付"
                : ""
              : ""
          }}</el-descriptions-item
        >
        <el-descriptions-item label="支付状态">
          {{
            detailInfo
              ? detailInfo.paymentStatus == "0"
                ? "待支付"
                : detailInfo.paymentStatus == "1"
                ? "线上支付"
                : detailInfo.paymentStatus == "2"
                ? "线下支付"
                : ""
              : ""
          }}</el-descriptions-item
        >
        <el-descriptions-item label="下单时间">
          {{ parseTime(detailInfo.createTime) }}</el-descriptions-item
        >
        <el-descriptions-item label="付款时间">
          {{ parseTime(detailInfo.paymentTime) }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="担保服务费">
          {{ detailInfo ? detailInfo.serviceFee : "" }}
        </el-descriptions-item> -->
        <el-descriptions-item label="运费(元)">
          {{ detailInfo ? detailInfo.freightFee : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="交易金额(元)">
          {{ detailInfo ? detailInfo.goodsAmount : "" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="物流信息" column="3">
        <el-descriptions-item label="运单号">
          {{ detailInfo ? detailInfo.orderSn : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="司机">{{
          detailInfo ? detailInfo.driverUservalue : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="车型">{{
          detailInfo ? detailInfo.carType : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="车牌号"
          >{{ detailInfo ? detailInfo.plateNo : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="司机电话">{{
          detailInfo ? detailInfo.driverPhone : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="装货时间">
          {{ detailInfo ? detailInfo.shipmentTime : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="送达时间">
          {{ detailInfo ? detailInfo.arriveTime : "" }}</el-descriptions-item
        >
      </el-descriptions>
      <el-descriptions title="买家信息" column="3">
        <el-descriptions-item label="昵称">{{
          detailInfo ? detailInfo.userNick : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar
            v-if="detailInfo.userHeadUrl"
            :size="30"
            :src="detailInfo.userHeadUrl"
          ></el-avatar
        ></el-descriptions-item>
        <el-descriptions-item label="收货人">{{
          detailInfo ? detailInfo.consigneeContactName : ""
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">
          {{ detailInfo ? detailInfo.userPhone : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="备注">
          {{ detailInfo ? detailInfo.orderRemark : "" }}</el-descriptions-item
        >
        <el-descriptions-item label="收货地址"
          >{{ detailInfo ? detailInfo.consigneeAddressDetail : "" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="商品信息" column="3"> </el-descriptions>
      <el-table :data="detailInfo.orderGoodInfoList" style="width: 100%">
        <el-table-column prop="skuName" label="商品名称"> </el-table-column>
        <el-table-column prop="skuName" label="商品图片">
          <template slot-scope="scope">
            <el-image :src="scope.row.skuPic" style="width: 50px; height: 50px">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品单价(元)"> </el-table-column>
        <el-table-column prop="quantity" label="下单数量"> </el-table-column>
        <el-table-column prop="totalPrice" label="总金额(元)">
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      title="打印订单"
      :visible.sync="equipmentOpen"
      width="500px"
      append-to-body
    >
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="选择打印机" prop="sn">
            <el-select v-model="printForm.sn" placeholder="请选择打印机">
              <el-option
                v-for="item in printList"
                :key="item.value"
                :label="item.name"
                :value="item.sn"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printSubmitForm">确 定</el-button>
        <el-button @click="equipmentOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      title="确认是否同意用户使用先用后付"
      :visible.sync="xyhfOpen"
      width="500px"
      append-to-body
    >
      <div>
        <el-form ref="form" :model="xyhf" :rules="rules" label-width="100px">
          <el-form-item label="是否同意" prop="auditFirstUse">
            <el-radio-group v-model="xyhf.auditFirstUse">
              <el-radio :label="0" :name="0">同意</el-radio>
              <el-radio :label="1" :name="1">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <div>同意时:确认收货3天内.需确认用户是否完成支付</div>
          <div>拒绝时:将自动取消该订单.用户支付服务费将原路退回</div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="xyhfOk">确 定</el-button>
        <el-button @click="xyhfOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="确认是否已进行线下协商支付"
      :visible.sync="xxzfOpen"
      width="500px"
      append-to-body
    >
      <div>
        <el-form ref="form" :model="xxzf" :rules="rules" label-width="100px">
          <el-form-item label="是否同意" prop="auditFirstUse">
            <el-radio-group v-model="xxzf.confirmOfflinePayment">
              <el-radio :label="0" :name="0">用户已支付</el-radio>
              <el-radio :label="1" :name="1">用户未支付</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="xxzfOk">确 定</el-button>
        <el-button @click="xyhfOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  statisticsOrderNum,
  queryUserOrderByShopId,
  userOrderInfo,
  auditFirstUserOrder,
  confirmUserOfflinePayment,
} from "@/api/manage/order";
import { printOrder, equipmentList } from "@/api/manage/equipment";
import moment from "moment";
import Utils from "@/utils/derive";
export default {
  name: "Config",
  //   dicts: ["sys_yes_no"],
  props: ["type", "userId"],
  data() {
    return {
      xxzfOpen: false,
      xxzf: {
        confirmOfflinePayment: "",
      },
      xyhf: {
        auditFirstUse: "",
      },
      xyhfOpen: false,
      activeName: 0,
      equipmentOpen: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数表格数据
      spuList: [],
      // 弹出层标题
      title: "订单详情",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        spuType: 0,
        userId: "",
        pageNo: 1,
        pageSize: 10,
        spuName: "",
        userOrderSn: "",
        userPhone: "",
        createTime: "",
        orderStatusKey: "",
        afterSaleStatus: "",
        paymentType: "",
        deliveryType: "",
      },
      printForm: {
        sn: "",
      },
      column: [
        { header: "订单编号", key: "carPayNo", width: 20 },
        { header: "买家姓名", key: "userNick", width: 20 },
        { header: "买家手机号", key: "userPhone", width: 20 },
        { header: "商品名称", key: "skuName", width: 20 },
        { header: "商品类型", key: "categoryName", width: 20 },
        { header: "商品价格", key: "price", width: 20 },
        { header: "包装方式", key: "packageType", width: 20 },
        { header: "规格名称", key: "specsName", width: 20 },
        { header: "规格值", key: "specsValue", width: 20 },
        { header: "实付金额(元)", key: "goodsAmount", width: 20 },
        { header: "商品数量", key: "goodsDetails", width: 20 },
        { header: "运费", key: "freightFee", width: 20 },
        { header: "订单状态", key: "orderStatus", width: 20 },
        { header: "售后状态", key: "afterSaleStatus", width: 20 },
        { header: "下单时间", key: "createTime", width: 20 },
        { header: "付款时间 ", key: "paymentTime", width: 20 },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        sn: [{ required: true, message: "请选择打印机", trigger: "blur" }],
        auditFirstUse: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      orderStatistics: {},
      mergeObj: {}, // 用来记录需要合并行的下标
      selectList: [],
      selectListDC: [],
      detailInfo: {},
      dialogLoding: false,
      printList: [],
      hdUserId: "",
      rowInfo: {},
    };
  },
  watch: {
    userId(newV, oldV) {
      console.log(newV, oldV);
      this.hdUserId = this.userId;
      this.queryParams.userId = this.userId;
      this.getList();
      this.getEquipmentList();
    },
  },
  mounted() {
    if (this.userId) {
      this.queryParams.userId = this.userId;
      this.getList();
      this.getEquipmentList();
    } else {
      this.getList();
      this.getEquipmentList();
      this.getstatisticsOrder();
    }
  },
  methods: {
    handlexxzf(info) {
      this.rowInfo = info;
      this.xxzfOpen = true;
    },
    xxzfOk() {
      confirmUserOfflinePayment({
        id: this.rowInfo.id,
        confirmOfflinePayment: this.xxzf.confirmOfflinePayment,
      }).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("操作成功！");
          this.xxzfOpen = false;
          this.getList();
        } else {
          this.xxzfOpen = false;
          this.$modal.msgError(res.msg);
        }
      });
    },
    xyhfOk() {
      auditFirstUserOrder({
        id: this.rowInfo.id,
        auditFirstUse: this.xyhf.auditFirstUse,
      }).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("操作成功！");
          this.xyhfOpen = false;
          this.getList();
        } else {
          this.xyhfOpen = false;
          this.$modal.msgError(res.msg);
        }
      });
    },

    handlexyhf(record) {
      this.rowInfo = record;
      this.xyhfOpen = true;
    },
    handleClick() {
      this.queryParams.spuType = this.activeName;
      this.getList();
      this.getstatisticsOrder();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        if (
          rowIndex === 0 ||
          row.carPayNo != this.spuList[rowIndex - 1].carPayNo
        ) {
          let rowspan = 0;
          this.spuList.forEach((element) => {
            if (element.carPayNo === row.carPayNo) {
              rowspan++;
            }
          });
          return [rowspan, 1];
        } else {
          return [0, 0];
        }
      }
    },

    getEquipmentList() {
      equipmentList().then((res) => {
        if (res.code == 200) {
          this.printList = res.data.records;
        }
      });
    },
    printSubmitForm() {
      if (!this.printForm.sn) {
        this.$message.error("请选择打印机！");
        return;
      }
      this.printForm.carPayNos = this.selectList.toString();
      printOrder(this.printForm)
        .then((res) => {
          if (res.code == 200) {
            this.equipmentOpen = false;
            this.selectList = [];
            this.$refs.multipleTable.clearSelection();
            this.$modal.msgSuccess("操作成功！");
          } else {
            this.equipmentOpen = false;
            this.$modal.msgError(res.msg);
          }
        })
        .catch((err) => {
          this.equipmentOpen = false;
          this.$modal.msgError(err);
        });
    },
    printOrderBtn() {
      this.equipmentOpen = true;
    },

    getstatisticsOrder() {
      statisticsOrderNum({ spuType: this.activeName }).then((res) => {
        if (res.code == 200) {
          this.orderStatistics = res.data;
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },

    getList() {
      this.selectList = [];
      this.loading = true;
      queryUserOrderByShopId(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((response) => {
        if (response.code !== 200) {
          this.loading = false;
          return;
        }
        try {
          // 扁平化嵌套结构
          const flattenedList = this.flattenOrderItems(response.data.records);
          console.log("flattenedList", flattenedList);

          // 处理商品信息和规格
          const processedList = flattenedList.map((item) => {
            const processedItem = { ...item };

            // 解析并合并商品信息
            if (item.goodsInfo) {
              try {
                const goods = JSON.parse(item.goodsInfo);
                if (Array.isArray(goods) && goods.length > 0) {
                  // 合并第一个商品的信息
                  Object.assign(processedItem, goods[0]);

                  processedItem.specsName = goods
                    .map((good) => `${good.specsValue?.[0]?.specsName}`)
                    .toString();
                  processedItem.specsValue = goods
                    .map((good) => `${good.specsValue?.[0]?.specsValue}`)
                    .toString();
                  // 生成商品详情字符串
                  processedItem.goodsDetails = goods
                    .map(
                      (good) =>
                        `${good.skuName}(${
                          good.specsValue?.[0]?.specsName || ""
                        })-数量：${good.quantity}${good.unit}`
                    )
                    .join(";");
                }
              } catch (error) {
                console.error("解析商品信息失败:", error);
                processedItem.goodsDetails = "商品信息解析失败";
              }
            }

            // 合并规格信息
            if (Array.isArray(item.specsValue)) {
              item.specsValue.forEach((spec) => {
                Object.assign(processedItem, spec);
              });
            }

            return processedItem;
          });

          console.log("12312312", processedList);

          this.spuList = processedList;
          this.total = response.data.total;
        } catch (error) {
          console.error("处理订单数据失败:", error);
          this.spuList = [];
          this.total = 0;
        } finally {
          this.loading = false;
        }
      });
    },

    // 扁平化订单项目
    flattenOrderItems(records) {
      return records.flatMap((record) => {
        if (
          Array.isArray(record.dxUserOrderVOList) &&
          record.dxUserOrderVOList.length > 0
        ) {
          return record.dxUserOrderVOList.map((item) => ({
            ...record,
            ...item,
          }));
        }
        return [record];
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleDetail(record) {
      this.title = "商品详情";
      this.open = true;
      this.dialogLoding = true;
      userOrderInfo(record.id)
        .then((res) => {
          if (res.code == 200) {
            this.detailInfo = res.data;
            this.detailInfo.deliveryMethod = record.deliveryType;

            this.dialogLoding = false;
          }
        })
        .catch((err) => {
          this.dialogLoding = false;
          console.log(err);
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log("selection", selection);
      this.selectList = selection.map((item) => item.carPayNo);
      const payNoMap = {};
      selection.forEach((row) => {
        const carPayNo = row.carPayNo;
        if (!payNoMap[carPayNo]) {
          // 找到spuList中所有相同carPayNo的行
          payNoMap[carPayNo] = this.spuList.filter(
            (item) => item.carPayNo === carPayNo
          );
        }
      });
      // 将所有找到的行展平到selectListDC
      this.selectListDC = Object.values(payNoMap).flat();
      console.log(this.selectListDC);
    },

    /** 导出按钮操作 */
    handleExport() {
      let lists = [];

      for (let index = 0; index < this.spuList.length; index++) {
        for (let a = 0; a < this.selectListDC.length; a++) {
          if (this.spuList[index].id == this.selectListDC[a].id) {
            lists.push(this.spuList[index]);
          }
        }
      }
      // 定义订单状态映射表
      const ORDER_STATUS_MAP = {
        0: "待商家确认修改运费",
        10: "等待买家支付",
        20: "等待商家发布货运信息",
        30: "司机已到达，等待买家签收",
        40: "买家已收货",
        50: "已取消",
        60: "退款中",
        70: "退款成功",
        80: "退款失败",
        90: "等待司机接单",
        100: "等待司机支付保证金",
        110: "等待司机装货",
        120: "已装货，运输中",
        130: "待处理售后",
        140: "已处理售后",
      };
      const AFTER_SALE_STATUS_MAP = {
        0: "未申请",
        1: "已申请",
        2: "审核失败",
        3: "审核成功（退款中）",
        4: "退款成功",
        5: "退款失败（联系客服解决）",
      };
      // 处理订单状态
      lists.forEach((e) => {
        // 订单状态处理（使用映射表）
        if (AFTER_SALE_STATUS_MAP.hasOwnProperty(e.afterSaleStatus)) {
          e.afterSaleStatus = AFTER_SALE_STATUS_MAP[e.afterSaleStatus];
        } else {
          e.afterSaleStatus = "未知状态"; // 处理未知状态
        }
        // 订单状态处理（使用映射表）
        if (ORDER_STATUS_MAP.hasOwnProperty(e.orderStatus)) {
          e.orderStatus = ORDER_STATUS_MAP[e.orderStatus];
        } else {
          e.orderStatus = "未知状态"; // 处理未知状态
        }
      });
      console.log(lists);
      Utils.exportExcel(this.column, lists, "订单列表"); //导出方法
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  margin-bottom: 30px;
  .item {
    height: 100px;
  }
  .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .count {
      padding: 10px;
      font-size: 20px;
      font-weight: 500;
    }
    .zz {
      font-size: 14px;
      color: red;
      padding: 0px 10px;
    }
  }
}
</style>