bonus-ui/src/views/EquipmentSharedOrder/order/detail.vue

<template>
  <!-- 订单详情弹窗 -->
  <el-dialog
    :visible.sync="visible"
    width="80%"
    :title="title"
    :close-on-click-modal="false"
    @close="handleClose"
  >
      <div class="order-details">
        <!-- 订单基本信息 -->
        <el-row style="padding: 4px 40px; font-size: 14px">
          <el-col :span="8">
            <span> 订单编号： </span>
            <span>{{ orderDetails.code }}</span>
          </el-col>
          <el-col :span="8">
            <span> 下单时间： </span>
            <span>{{ orderDetails.orderTime }}</span>
          </el-col>
          <el-col :span="8">
            <span> 出租单位： </span>
            <span>{{ orderDetails.czcompanyName }}</span>
          </el-col>
        </el-row>

        <el-row style="padding: 4px 40px; font-size: 14px">
          <el-col :span="8">
            <span> 出租人： </span>
            <span>{{ orderDetails.person }}</span>
          </el-col>
          <el-col :span="8">
            <span> 出租人电话： </span>
            <span>{{ orderDetails.personPhone }}</span>
          </el-col>
          <el-col :span="8">
            <span> 承租单位： </span>
            <span>{{ orderDetails.companyName }}</span>
          </el-col>
        </el-row>

        <el-row style="padding: 4px 40px; font-size: 14px">
          <el-col :span="8">
            <span> 承租人： </span>
            <span>{{ orderDetails.nickName }}</span>
          </el-col>
          <el-col :span="8">
            <span> 承租人电话： </span>
            <span>{{ orderDetails.phoneNumber }}</span>
          </el-col>
          <el-col :span="8">
            <span> 共享协议： </span>
            <span> ** </span>
          </el-col>
        </el-row>

        <!-- 订单商品信息 -->
        <el-row
          style="
            background: #fff;
            padding: 4px 12px;
            margin: 4px;
            border: 1px solid #ccc;
            border-radius: 20px;
          "
        >
          <el-col :span="12" style="padding-left: 30px">
            <div
              v-for="(goods, j) in orderDetails.detailsList"
              :key="j"
              class="order-items order-info"
              :style="j != orderDetails.detailsList.length - 1 ? 'border-bottom:1px solid #eee' : ''"
              style="min-height: 80px"
            >
              <el-image
                :src="goods.url"
                style="width: 110px; height: 70px"
                alt="装备图片"
                fit="cover"
              />
              <div
                style="
                  min-height: 80px;
                  flex: 1;
                  display: flex;
                  justify-content: space-around;
                  flex-direction: column;
                  padding-left: 50px;
                  font-size: 13px;
                "
              >
                <el-row style="font-weight: bold">
                  {{ goods.deviceName }}
                </el-row>
                <el-row>
                  <el-col :span="3"> 租期 :</el-col>
                  <el-col :span="18">
                    <span style="margin-right: 10px" :style="isOrderComplete">
                      {{ goods.days }}{{ ' ' + '天' }}
                    </span>
                    <span v-if="orderStatus == 20">
                      {{
                        isNaN(momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day'))
                          ? '-'
                          : momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day') == 0
                            ? 1
                            : momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day')
                      }}{{ ' ' + '天' }}
                    </span>
                  </el-col>
                </el-row>
                <el-row>
                  <!-- <el-col :span="3"> 租金 ：</el-col>
                  <el-col :span="8">
                    {{ goods.dayLeasePrice }}{{ ' ' + '元 / 天' }}
                  </el-col> -->
                  <el-col :span="3"> 数量 ：</el-col>
                  <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
                </el-row>
              </div>
            </div>
          </el-col>

          <el-col :span="7" class="order-items-info">
            <div
              v-for="(goods, j) in orderDetails.detailsList"
              :key="j"
              class="order-items order-info"
              :style="j != orderDetails.detailsList.length - 1 ? 'border-bottom:1px solid #eee' : ''"
              style="min-height: 80px; width: 100%; font-size: 13px"
            >
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <div>租期</div>
                <div style="font-weight: bold; margin-top: 10px" :style="isOrderComplete">
                  {{ formatDate(goods.rentBeginTime) }}至{{ formatDate(goods.rentEndTime) }}
                </div>
                <div style="font-weight: bold; margin-top: 10px" v-if="orderStatus == 20">
                  {{ goods.takeOverTime ? goods.takeOverTime.slice(0, 10) : '' }}至
                  {{ goods.rentOverTime ? goods.rentOverTime.slice(0, 10) : '' }}
                </div>
              </div>
            </div>
          </el-col>

          <!-- <el-col :span="5" class="order-items-info" style="border: none; font-size: 13px">
            <div>总费用</div>
            <div class="red-font">{{ orderDetails.cost }} 元</div>
            <div class="red-font" v-if="orderStatus == 20">
              {{ overhaulDetails.totalCost }} 元
            </div>
          </el-col> -->
        </el-row>

        <!-- 退租检测/费用结算信息 -->
        <TitleTip :titleText="`退租检测/费用结算信息`" v-if="orderStatus == 20" />

        <div style="padding: 0 15px" v-if="orderStatus == 20">
          <!-- <div style="padding: 6px 0 0 0; font-size: 18px; color: #eb190a; font-weight: bold">
            总费用(元)： <span>{{ overhaulDetails.totalCost }}</span>
          </div> -->

          <!-- 共享费用明细 -->
          <TitleTip :titleText="`共享费用明细`" />
          <el-table
            border
            :data="orderDetailDtoList"
            show-overflow-tooltip
            height="546"
            :header-cell-style="{
              color: '#fff',
              background: '#00a288',
            }"
          >
            <el-table-column prop="deviceName" align="center" label="装备名称" />
            <el-table-column prop="typeName" align="center" label="型号" />
            <el-table-column prop="num" align="center" label="数量" />
            <el-table-column align="center" label="共享单价(元/天)">
              <template #default="{ row }">
                <span style="color: #eb190a">{{ row.dayLeasePrice }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="days" align="center" label="共享天数" />
            <el-table-column align="center" label="租期">
              <template #default="{ row }">
                {{ formatDate(row.preOutboundTime) + '至' + formatDate(row.rentOverTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="costs" align="center" label="共享费用(元)" width="160" />
            <el-table-column prop="changeCost" align="center" label="改价后实际费用(元)" />
          </el-table>

          <!-- 维修费用明细 -->
          <TitleTip :titleText="`维修费用明细`" />
          <el-table
            :data="repairRecordList"
            border
            show-overflow-tooltip
            :header-cell-style="{
              background: '#00a288',
              color: '#fff',
            }"
            height="546"
          >
            <el-table-column prop="deviceName" align="center" label="装备名称" />
            <el-table-column prop="typeName" align="center" label="型号" />
            <el-table-column prop="repairNum" align="center" label="维修数量" />
            <el-table-column align="center" prop="repairPrice" label="维修费用(元)" />
            <el-table-column prop="repairChangePrice" align="center" label="改价后实际费用(元)" />
            <el-table-column align="center" label="附件" width="160">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="onViewFileImg(row, 0)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 报废费用明细 -->
          <TitleTip :titleText="`报废费用明细`" />
          <el-table
            :data="scrapRecordList"
            border
            show-overflow-tooltip
            :header-cell-style="{
              background: '#00a288',
              color: '#fff',
            }"
            height="546"
          >
            <el-table-column prop="deviceName" align="center" label="装备名称" />
            <el-table-column prop="typeName" align="center" label="型号" />
            <el-table-column prop="scrapNum" align="center" label="报废数量" />
            <el-table-column prop="scrapReason" align="center" label="报废原因" />
            <el-table-column prop="scrapPrice" align="center" label="报废费用(元)" />
            <el-table-column prop="scrapChangePrice" align="center" label="改价后费用(元)" />
            <el-table-column align="center" label="附件" width="160">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="onViewFileImg(row, 1)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 丢失费用明细 -->
          <TitleTip :titleText="`丢失费用明细`" />
          <el-table
            :data="lossRecordList"
            border
            show-overflow-tooltip
            :header-cell-style="{
              background: '#00a288',
              color: '#fff',
            }"
            height="546"
          >
            <el-table-column prop="deviceName" align="center" label="装备名称" />
            <el-table-column prop="typeName" align="center" label="型号" />
            <el-table-column prop="lossNum" align="center" label="丢失数量" />
            <el-table-column prop="lossPrice" align="center" label="丢失费用(元)" />
            <el-table-column prop="lossChangePrice" align="center" label="改价后费用(元)" />
            <el-table-column align="center" label="附件" width="160">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="onViewFileImg(row, 2)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

    <!-- 附件详情弹窗 -->
    <el-dialog :visible.sync="innerVisible" width="500" title="附件详情" append-to-body>
      <el-table
        :data="viewFileInfoList"
        border
        show-overflow-tooltip
        :header-cell-style="{
          background: '#00a288',
          color: '#fff',
        }"
        height="546"
      >
        <el-table-column prop="fileName" align="center" label="文件名称" />
        <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
            <el-image
              style="width: 60px; height: 60px"
              :src="row.fileUrl"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[row.fileUrl]"
              :initial-index="0"
              fit="cover"
              :z-index="9999999999"
              :preview-teleported="true"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-dialog>
</template>

<script>
import TitleTip from '@/components/TitleTip'
import { getOrderListInfoApi, getOverhaulApi } from "@/api/search/order";
import moment from 'moment'

export default {
  components: { TitleTip },
  name: "OrderDetailDialog",
  props: {
    // 控制弹窗显示与隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 订单ID
    orderId: {
      type: String,
      required: true,
      default:""
    },
    // 订单状态
    orderStatus: {
      type: String,
      required: true,
      default:""
    },
    // 弹窗标题
    title: {
      type: String,
      default: "订单详情"
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      dialogLoading: false,
      isView: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      ids: [],
      checkList: [],
      // 总条数
      total: 0,
      // 订单详情数据
      orderDetails: {},
      momentInit: moment,
      orderDetailDtoList: [],
      repairRecordList: [],
      scrapRecordList: [],
      lossRecordList: [],
      overhaulDetails: {},
      fileListAll: [],
      cardList: [],
      // 步骤列表
      stepList: [
        { title: '待接单', description: '' },
        { title: '待出库', description: '' },
        { title: '待收货', description: '' },
        { title: '共享中', description: '' },
        { title: '订单完成', description: '' }
      ],
      isReject: false,
      currentActive: 0,
      isOrderComplete: undefined,
      viewFileInfoList: [],
      innerVisible: false
    };
  },
  watch: {
    // 当订单ID变化时重新加载数据
    orderId: {
      immediate: true,
      handler(newVal) {
        // 判断orderId不为空才执行初始化
        if (newVal) {
          this.init();
        } else {
          // 可以在这里处理orderId为空的情况
          console.log('orderId为空，不执行初始化');
        }
      }
    },
    // 当订单状态变化时更新步骤
    orderStatus: {
      immediate: true,
      handler() {
        this.updateStepList();
      }
    }
  },
  methods: {
    // 仅保留日期（YYYY-MM-DD）
    formatDate(dateStr) {
      if (!dateStr) return ''
      const s = String(dateStr)
      return s.length >= 10 ? s.slice(0, 10) : s
    },

    // 初始化
    init() {
      this.updateStepList();
      this.getList();
    },

    // 更新步骤列表
    updateStepList() {
      this.stepList = [
        { title: '待接单', description: '' },
        { title: '待出库', description: '' },
        { title: '待收货', description: '' },
        { title: '共享中', description: '' },
        { title: '订单完成', description: '' }
      ];

      if (this.orderStatus == 1) {
        this.currentActive = 0;
      } else if (this.orderStatus == 2) {
        this.currentActive = 1;
        this.stepList[0].title = '已接单';
      } else if (this.orderStatus == 3) {
        this.stepList[0].title = '已接单';
        this.stepList[1].title = '已出库';
        this.currentActive = 2;
      } else if (this.orderStatus == 4) {
        this.stepList[0].title = '已接单';
        this.stepList[1].title = '已出库';
        this.stepList[2].title = '已收货';
        this.currentActive = 3;
      } else if (this.orderStatus == 5) {
        this.stepList[0].title = '已接单';
        this.stepList[1].title = '已出库';
        this.stepList[2].title = '已收货';
        this.currentActive = 4;
      } else if (this.orderStatus == 20) {
        this.stepList[0].title = '已接单';
        this.stepList[1].title = '已出库';
        this.stepList[2].title = '已收货';
        this.stepList[3].title = '共享结束';
        this.currentActive = 4;
      } else if (this.orderStatus == 99) {
        this.stepList[0].title = '订单取消';
        this.isReject = true;
        this.currentActive = 0;
      }

      this.$forceUpdate();
    },

    /** 查询订单详情 */
    getList() {
      this.loading = true;
      getOrderListInfoApi({ orderId: this.orderId }).then(async (res) => {
        this.orderDetails = res.data || {};

        // 如果订单已完成，获取检修信息
        if (this.orderStatus == 20) {
          await getOverhaulApi(this.orderId).then((resTwo) => {
            this.orderDetailDtoList = resTwo.data.orderDetailDtoList || [];
            this.repairRecordList = resTwo.data.repairRecordList || [];
            this.scrapRecordList = resTwo.data.scrapRecordList || [];
            this.lossRecordList = resTwo.data.lossRecordList || [];
            this.fileListAll = resTwo.data.fileInfoList || [];
            this.overhaulDetails = resTwo.data || {};
          });
        }

        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    // 查看附件图片
    onViewFileImg(row, index) {
      this.viewFileInfoList = [];
      if (this.fileListAll && this.fileListAll.length) {
        this.viewFileInfoList = this.fileListAll.filter(e => e.fileType == index);
      }
      this.innerVisible = true;
    },

    // 关闭弹窗时触发
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss" scoped>
.order-details {
  flex: 1;
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  padding: 0 12px;
  margin-top: 20px;
  max-height: 70vh; /* 限制最大高度，超出部分滚动 */
}

.step {
  margin-left: 80px;
}

.section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.cart-tbody {
  background: #fff;
  padding: 8px 12px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;

  .cart-user-info {
    display: flex;
    align-items: center;
    font-size: 13px;

    .user-name,
    .user-phone {
      padding: 3px 18px;
      border: 1px solid #ccc;
    }

    .user-name {
      margin-left: 20px;
      border-right: none;
    }
  }

  .cart-list {
    margin: 15px 0;
    display: flex;
    align-items: center;

    div {
      text-align: center;
    }

    .goods-info {
      display: flex;
      align-content: center;
      border-bottom: 1px solid #00a288;

      img {
        width: 140px;
        height: 80px;
      }

      .goods-code {
        margin-left: 70px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        div {
          text-align: left;
        }
      }
    }

    .lease-date {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }

    .red-font {
      color: #ff4800;
      font-weight: bold;
    }
  }
}

.cart-listAll {
  margin: 15px 0;
  display: flex;
  align-items: center;
  font-size: 13px;

  div {
    text-align: center;
  }

  .cart-list {
    margin: 15px 0;
    display: flex;
    align-items: center;
    font-size: 13px;

    div {
      text-align: center;
    }

    .goods-info {
      display: flex;
      align-content: center;

      img {
        width: 180px;
        height: 80px;
      }

      .goods-code {
        margin-left: 110px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        div {
          text-align: left;
        }
      }
    }

    .lease-date {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }

    .red-font {
      color: #ff4800;
      font-weight: bold;
    }
  }

  .lease-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }

  .red-font {
    color: #ff4800;
    font-weight: bold;
  }
}

.order-items {
  border-right: 1px solid #eee;
}

.order-info {
  display: flex;
  padding: 10px 0;
  align-items: center;
}

.order-items-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eee;
}

.red-font {
  color: #ff4800;
  font-weight: bold;
  margin-top: 10px;
}

/* 滚动条样式优化 */
::v-deep .el-dialog__body {
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
}

::v-deep .el-dialog__body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.2);
}

::v-deep .el-dialog__body::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>