kxmall-ui/kxmall-admin-ui/src/views/order/storeOrder/index.vue

<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.orderStatus" @tab-click="onOrderStatusChange">
      <el-tab-pane v-for="item in status" :key="item.name" :label="item.label" :name="item.name"/>
    </el-tabs>
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item prop="storageId">
        <el-select v-model="queryParams.storageId" placeholder="请选择前置仓" clearable>
          <el-option v-for="item in storages" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="orderId">
        <el-input v-model="queryParams.orderId" clearable placeholder="输入订单号" @keyup.enter.native="toQuery"/>
      </el-form-item>
      <el-form-item prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="创建开始时间"
          end-placeholder="创建结束时间"
          range-separator="至"
          unlink-panels
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="storeOrderList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        prop="orderId"
        align="center"
        label="订单号">
        <template slot-scope="scope">
          <el-tooltip content="点击复制订单号" placement="top">
            <span ref="orderId" @click="copyOrderId(scope.row.orderId)">
              {{ scope.row.orderId }}
             <span v-if="isToday(scope.row.createTime)" style="color: red">今</span>
            </span>+
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        prop="storageId"
        align="center"
        label="仓库"
      >
        <template slot-scope="scope">
          {{ storageMap[scope.row.storeId] }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="queryParams.orderStatus==='32'"
        prop="exceptionReason"
        align="center"
        label="异常原因"
      />
      <el-table-column
        v-if="queryParams.orderStatus==='80'"
        prop="exceptionReason"
        align="center"
        label="付款状态"
      />
      <el-table-column
        v-if="queryParams.orderStatus!=='14'&&queryParams.orderStatus!=='16'&&queryParams.orderStatus!=='10'"
        align="center"
        label="配送员"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.riderName ? 'error' : 'success'">
            {{ row.riderName ? row.riderName : (row.deliveryType ? row.deliveryType : '商家自配') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        width="100"
        prop="realName"
        label="姓名"
      />
      <el-table-column
        align="left"
        width="110"
        prop="userPhone"
        label="电话"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        align="left"
        width="80"
        prop="address"
        label="订单类型"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.shippingType==1 ? 'error' : 'success'">{{
              row.shippingType == 1 ? '配送' : '自提'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="left"
        width="200"
        prop="userAddress"
        label="地址"
      />
      <el-table-column
        align="center"
        label="配送费"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.freightPrice == 0 ? '免配送' : scope.row.freightPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单金额"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.originalTotalPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="90"
        align="center"
        label="实付金额"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payIntegral ? '积分' + scope.row.payIntegral : '￥' + scope.row.payPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        align="center"
        label="要求送达时间"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.predictTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        width="160"
        align="center"
        label="下单时间"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="160"
        label="支付时间"
        prop="payTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="280"
        align="center"
        label="付款交易号"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        width="160"
        label="创建时间"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="160"
        label="修改时间"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="400"
      >
        <template slot-scope="{row}">
          <el-button
            type="primary"
            size="mini"
            @click="viewDetail(row.id)"
          >详情
          </el-button>
          <el-button
            v-if="row.status===14"
            type="primary"
            size="mini"
            @click="handleOperation(row.id,'startStocking')"
          >开始配货
          </el-button>
          <el-button
            v-if="row.status===16"
            type="primary"
            size="mini"
            @click="handleOperation(row.id,'completeAllocation')"
          >完成配货
          </el-button>
          <el-button
            v-if="row.status===30"
            type="primary"
            size="mini"
            @click="handleOperation(row.id,'completeDelivery')"
          >完成配送
          </el-button>
          <el-button
            v-if="(row.status===20||row.status===32||row.status===30) && row.shippingType===2"
            type="success"
            size="mini"
            @click="showVerifyDialog(row.id)"
          >完成取货
          </el-button>
          <!-- 合并后的配送下拉按钮 -->
          <el-dropdown
            v-if="(row.status===20||row.status===32||row.status===30) && row.shippingType===1"
            @command="handleDeliveryCommand(row, $event)"
          >
            <el-button type="primary" size="mini">
              配送方式<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="system">系统配送</el-dropdown-item>
              <el-dropdown-item command="thirdParty">第三方配送</el-dropdown-item>
              <el-dropdown-item command="merchant">商家自配</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            v-if="[16,20,30,32,34].includes(row.status)"
            type="danger"
            size="mini"
            style="margin-left: 10px;"
            @click="handleCancelOrder(row)"
          >取消订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改订单对话框 -->
    <el-dialog title="订单详情" :visible.sync="open" width="1050px" append-to-body class="order-detail-dialog">
      <div class="detail-container">
        <!-- 基本信息部分 -->
        <div class="detail-section">
          <h3 class="section-title">基本信息</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">订单编号:</span>
                <span class="item-value">{{ form.orderId }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">订单状态:</span>
                <el-tag :type="getStatusTagType(form.status)">{{ getStatus(form.status) }}</el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">订单类型:</span>
                <el-tag :type="form.shippingType==1 ? 'primary' : 'success'">
                  {{ form.shippingType == 1 ? '配送' : '自提' }}
                </el-tag>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">下单时间:</span>
                <span class="item-value">{{ form.createTime }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">送达时间:</span>
                <span class="item-value">{{ form.predictTime }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">订单类别:</span>
                <el-tag type="info">{{ getOrderType(form) }}</el-tag>
              </div>
            </el-col>
          </el-row>

          <div class="detail-item">
            <span class="item-label">备注:</span>
            <span class="item-value" :class="{'empty-remark': !form.remark}">
          {{ form.remark || '无备注' }}
        </span>
          </div>
        </div>

        <!-- 客户信息部分 -->
        <div class="detail-section">
          <h3 class="section-title">客户信息</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">客户姓名:</span>
                <span class="item-value">{{ form.realName }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">客户电话:</span>
                <span class="item-value">{{ form.userPhone }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">客户地址:</span>
                <span class="item-value">{{ form.userAddress }}</span>
              </div>
            </el-col>
          </el-row>
        </div>


        <!-- 骑手信息部分 -->
        <div v-if="form.riderOrder" class="detail-section">
          <h3 class="section-title">骑手信息</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">骑手姓名:</span>
                <span class="item-value">{{ form.riderName || '无' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">配送状态:</span>
                <el-tag :type="getRiderStatusTagType(form.riderOrder.status)">
                  {{ getRiderStatus(form.riderOrder.status) }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">异常状态:</span>
                <el-tag v-if="form.riderOrder.abnormal" type="danger">
                  异常
                </el-tag>
                <span v-else class="item-value">正常</span>
              </div>
            </el-col>
          </el-row>

          <div v-if="form.riderOrder.reason" class="detail-item">
            <span class="item-label">异常原因:</span>
            <span class="item-value" style="color: #f56c6c">{{ form.riderOrder.reason }}</span>
          </div>

          <div class="detail-item">
            <span class="item-label">配送时间:</span>
            <span class="item-value">{{ form.riderOrder.finishTime ? form.riderOrder.finishTime : '未完成' }}</span>
          </div>
        </div>

        <!-- 支付信息部分 -->
        <div class="detail-section">
          <h3 class="section-title">支付信息</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">支付方式:</span>
                <span class="item-value">{{ form.payTypeName }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">支付金额:</span>
                <span class="item-value highlight">
              {{ form.payIntegral ? '积分' + form.payIntegral : '￥' + form.payPrice }}
            </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="item-label">支付时间:</span>
                <span class="item-value">{{ form.payTime || '未支付' }}</span>
              </div>
            </el-col>
          </el-row>

          <div class="detail-item">
            <span class="item-label">交易号:</span>
            <span class="item-value">{{ form.payId || '无' }}</span>
          </div>

          <div v-if="form.status === 70" class="detail-item refund-reason">
            <span class="item-label">退款原因:</span>
            <span class="item-value">{{ form.refundReason }}</span>
          </div>
        </div>

        <!-- 商品信息部分 -->
        <div class="detail-section">
          <h3 class="section-title">商品信息</h3>
          <el-table
            :data="form.productList"
            size="small"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50"
            />
            <el-table-column
              align="center"
              label="商品条码"
              prop="barCode"
              width="120"
            />
            <el-table-column
              align="center"
              label="商品编码"
              prop="productId"
              width="120"
            />
            <el-table-column
              align="center"
              label="商品名称"
              prop="productTitle"
              min-width="150"
            />
            <el-table-column
              align="center"
              label="数量"
              prop="num"
              width="80"
            />
            <el-table-column
              align="center"
              label="单位"
              prop="unitName"
              width="80"
            />
            <el-table-column
              align="center"
              label="原价"
              width="100"
            >
              <template slot-scope="{row}">
                <span>￥{{ row.otPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="售价"
              width="100"
            >
              <template slot-scope="{row}">
                <span>￥{{ row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="总价"
              width="120"
            >
              <template slot-scope="{row}">
                <span class="highlight">￥{{ Number(row.price * row.num).toFixed(2) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 金额汇总部分 -->
        <div class="detail-section amount-summary">
          <h3 class="section-title">金额汇总</h3>
          <div class="summary-row">
            <span class="summary-label">商品金额:</span>
            <span class="summary-value">￥{{ form.originalTotalPrice }}</span>
          </div>
          <div class="summary-row">
            <span class="summary-label">运费:</span>
            <span class="summary-value">{{ form.freightPrice == 0 ? '免运费' : '￥' + form.freightPrice }}</span>
          </div>
          <div class="summary-row">
            <span class="summary-label">优惠:</span>
            <span class="summary-value highlight">
          ￥{{ Number(form.originalTotalPrice) - Number(form.payPrice) + Number(form.freightPrice) }}
        </span>
          </div>
          <div class="summary-row total-row">
            <span class="summary-label">实付金额:</span>
            <span class="summary-value highlight">
          {{ form.payIntegral ? '积分' + form.payIntegral : '￥' + form.payPrice }}
        </span>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="allotShow"
      title="选择配送员"
      width="30%"
    >
      <el-table
        :data="courierList"
        border
        style="width: 100%; margin-top:20px"
      >
        <el-table-column
          prop="name"
          align="center"
          label="骑手名"
        />
        <el-table-column
          align="center"
          label="配送时间"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.deliveryStart }}-{{ scope.row.deliveryEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="check(scope.row.id)">选 择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- Add this dialog after the allot dialog -->
    <el-dialog
      :visible.sync="verifyDialogVisible"
      title="核销码验证"
      width="30%"
    >
      <el-form>
        <el-form-item label="核销码">
          <el-input v-model="verifyCode" placeholder="请输入核销码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="verifyDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="confirmCompletePickup">确认</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
import {multiply} from '@/utils/math'
import {
  listStoreOrder /** delStoreOrder, addStoreOrder, updateStoreOrder*/,
  getStoreOrder,
  startStocking,
  completeAllocation,
  merchantDistribution,
  completeDelivery,
  distributeOrder,
  completePickup,
  thirdPartyDistribution,
  cancelOrder
} from '@/api/order/storeOrder'
import {listAllStorage} from '@/api/storage/storage'
import {getRiderByStorageId} from '@/api/rider/rider'

export default {
  name: 'StoreOrder',
  components: {
    // PrintDialog
  },
  data() {
    return {
      verifyDialogVisible: false,
      verifyCode: '',
      currentPickupOrderId: null,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      // ids: [],
      // // 非单个禁用
      // single: true,
      // // 非多个禁用
      // multiple: true,
      // 总条数
      total: 0,
      // 仓库map
      storageMap: {},
      // 订单表格数据
      storeOrderList: [],
      courierList: [],
      // 是否显示弹出层
      open: false,
      allotShow: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderStatus: '14',
        storageId: '',
        orderId: '',
        // type: '',
        // orderType: '0',
        createTime: []
      },
      // 表单参数
      form: {},
      // 表单校验
      status: [
        {label: '待配货', name: '14'},
        {label: '配货中', name: '16'},
        {label: '待配送', name: '20'},
        {label: '配送中', name: '30'},
        {label: '已完成', name: '40,50'},
        {label: '配送异常', name: '32'},
        {label: '超时订单', name: '34'},
        {label: '待支付', name: '10'},
        {label: '已退款', name: '70'},
        {label: '已取消', name: '80'},
        {label: '全部订单', name: 'all'}
      ],
      storages: []
    }
  },
  computed: {
    // title() {
    //   const { modes, currentMode } = this.dialog
    //   return modes[currentMode]?.title || ''
    // }
  },
  created() {
    this.getList()
    this.listAllStorage()
  },
  methods: {
    multiply,
    listAllStorage() {
      listAllStorage().then(({data}) => {
        this.storages = data
        this.storages.forEach(storage => {
          this.storageMap[storage.id] = storage.name
        })
      })
    },
    isToday(dateString) {
      if (!dateString) return false;
      const orderDate = new Date(dateString);
      const today = new Date();

      return (
        orderDate.getFullYear() === today.getFullYear() &&
        orderDate.getMonth() === today.getMonth() &&
        orderDate.getDate() === today.getDate()
      );
    },
    getRiderStatusTagType(status) {
      const typeMap = {
        0: 'warning',   // 待取货 - 黄色
        1: 'primary',   // 配送中 - 蓝色
        2: 'danger',    // 超时 - 红色
        3: 'danger',    // 配送异常 - 红色
        4: 'success',   // 已完成 - 绿色
        5: 'info'       // 被更改分配 - 灰色
      }
      return typeMap[status] || ''
    },
    getRiderStatus(status) {
      const statusMap = {
        0: '待取货',
        1: '配送中',
        2: '超时',
        3: '配送异常',
        4: '已完成',
        5: '被更改分配'
      }
      return statusMap[status] || '未知状态'
    },
    showVerifyDialog(orderId) {
      this.currentPickupOrderId = orderId;
      this.verifyDialogVisible = true;
      this.verifyCode = '';
    },
    // In methods section
    handleThirdPartyDistribution(row) {
      this.$confirm('确定要使用第三方配送此订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleOperation(row.id, 'thirdPartyDistribution')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // In methods section
    handleCancelOrder(row) {
      this.$confirm('确定要取消此订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleOperation(row.id, 'cancelOrder')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 添加这个新方法
    handleDeliveryCommand(row, command) {
      switch (command) {
        case 'system':
          this.allot(row.storeId, row.orderId, row.postId);
          break;
        case 'thirdParty':
          this.handleOperation(row.id, 'thirdPartyDistribution');
          break;
        case 'merchant':
          this.handleOperation(row.id, 'merchantDistribution');
          break;
      }
    },
    async confirmCompletePickup() {
      if (!this.verifyCode) {
        this.$message.warning('请输入核销码');
        return;
      }

      try {
        this.loading = true
        // Call the API with both orderId and verifyCode
        await completePickup({
          id: this.currentPickupOrderId,
          verifyCode: this.verifyCode
        });

        this.$message.success('核销成功');
        this.verifyDialogVisible = false;
        this.handleQuery();
      } finally {
        this.loading = false
      }
    },
    copyOrderId(orderId) {
      const clipboard = new Clipboard(this.$refs.orderId, {
        text: () => orderId
      });

      clipboard.on('success', () => {
        this.$message.success('订单号已复制');
        clipboard.destroy(); // 销毁 clipboard 实例
      });

      clipboard.on('error', () => {
        this.$message.error('复制失败');
        clipboard.destroy(); // 销毁 clipboard 实例
      });

      // 手动触发点击事件
      this.$refs.orderId.click();
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true
      this.storeOrderList = []
      const params = {...this.queryParams}
      if (params.createTime) {
        params.startTime = params.createTime[0]
        params.endTime = params.createTime[1]
      }
      delete params.createTime
      listStoreOrder(params).then(response => {
        this.storeOrderList = response.rows
        this.total = response.total
      }).finally(() => {
        this.loading = false
      })
    },
    // // 取消按钮
    // cancel() {
    //   this.open = false
    //   this.reset()
    // },
    // // 表单重置
    // reset(row) {
    //   this.form = JSON.parse(JSON.stringify(row)) || {}
    //   this.resetForm('form')
    // },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    onOrderStatusChange() {
      this.handleQuery()
    },
    viewDetail(id) {
      getStoreOrder(id).then(({data}) => {
        this.form = data
        this.open = true
      })
    },
    allot(val, id, postId) {
      this.orderId = id
      if (postId) {
        this.reAllot(val, id)
        return
      }
      getRiderByStorageId({
        storageId: val
      }).then(res => {
        if (res.code !== 200) {
          this.$message.warning(res.message)
          return
        }
        this.courierList = res.data
        if (res.data[0].automatic === 1) {
          this.check(res.data[0].id)
        } else {
          this.allotShow = true
          this.allotValue = val
        }
      })
    },
    reAllot(val, id) {
      this.orderId = id
      this.allotShow = true
      this.allotValue = val
      getRiderByStorageId({
        storageId: val
      }).then(res => {
        this.courierList = res.data
      })
    },
    getStatusTagType(status) {
      const typeMap = {
        14: 'warning',  // 待配货 - 黄色
        16: 'warning',  // 配货中 - 黄色
        20: 'primary',  // 待配送 - 蓝色
        30: 'primary',  // 配送中 - 蓝色
        40: 'success',  // 已完成 - 绿色
        50: 'success',  // 已完成 - 绿色
        32: 'danger',   // 配送异常 - 红色
        34: 'danger',   // 超时订单 - 红色
        10: 'info',     // 待支付 - 灰色
        70: 'danger',   // 已退款 - 红色
        80: 'info',     // 已取消 - 灰色
        90: 'info'      // 已取消(系统) - 灰色
      }
      return typeMap[status] || ''
    },
    getStatus(s) {
      const status = {
        14: '待配货',
        16: '配货中',
        20: '待配送',
        30: '配送中',
        50: '已完成',
        40: '已完成',
        32: '配送异常',
        34: '超时订单',
        10: '待支付',
        70: '已退款',
        80: '已取消',
        90: '已取消(系统)'
      }
      return status[s]
    },
    getOrderType(s) {
      if (s.combinationId) {
        return '团购'
      }
      if (s.seckillId) {
        return '秒杀'
      }
      return '普通'
    },
    handleOperation(id, operation) {
      const operations = {
        startStocking,
        completeAllocation,
        merchantDistribution,
        completeDelivery,
        completePickup,
        thirdPartyDistribution,
        cancelOrder
      }
      operations[operation]({id}).then(() => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.handleQuery()
      })
    },
    check(val) {
      const loadingInstance = this.$loading({text: '正在分配中...'})
      distributeOrder({
        orderNo: this.orderId,
        riderId: val
      }).then(res => {
        this.allotShow = false
        loadingInstance.close()
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.handleQuery()
      }).finally(() => {
        loadingInstance.close()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail-dialog {
  .detail-container {
    padding: 0 10px;

    .detail-section {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 4px;

      .section-title {
        margin: 0 0 15px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
        color: #333;
        font-size: 16px;
      }
    }

    .detail-item {
      margin-bottom: 12px;
      font-size: 14px;

      .item-label {
        display: inline-block;
        width: 80px;
        color: #888;
        text-align: right;
        margin-right: 10px;
      }

      .item-value {
        color: #333;
      }

      .empty-remark {
        color: #999;
        font-style: italic;
      }
    }

    .refund-reason {
      .item-value {
        color: #f56c6c;
      }
    }

    .amount-summary {
      .summary-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px dashed #eee;

        .summary-label {
          color: #666;
        }

        .summary-value {
          font-weight: 500;
        }

        &.total-row {
          margin-top: 10px;
          border-top: 1px solid #ddd;
          border-bottom: none;

          .summary-value {
            font-size: 16px;
            color: #f56c6c;
          }
        }
      }
    }

    .highlight {
      color: #f56c6c;
      font-weight: bold;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
  }
}

.rider-info {
  .status-tag {
    margin-left: 5px;
  }

  .abnormal-reason {
    color: #f56c6c;
    font-weight: bold;
  }
}
</style>