PointsMall_Admin/src/views/order/orderListDetail.vue

<template>
  <div class="article-manager">
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <el-descriptions title="基本信息" class="text" direction="vertical" :column="6" border>
        <el-descriptions-item label="订单编号">{{ detailData.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="用户账号">{{ detailData.acctId }}</el-descriptions-item>
        <el-descriptions-item label="支付积分">{{ detailData.integral }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ detailData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="自提油站">{{ detailData.takeSiteName }}</el-descriptions-item>
        <el-descriptions-item label="提货码">{{ detailData.takeCode }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="收货人信息" class="text" direction="vertical" :column="3" border>
        <el-descriptions-item label="收货人">{{ detailData.customerName }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ detailData.customerPhone }}</el-descriptions-item>
        <el-descriptions-item label="订单备注">{{ detailData.remark || '暂无' }}</el-descriptions-item>
      </el-descriptions>

      <div class="text">商品信息</div>
      <el-table
        :data="detailData.mallOrderInfoDetails"
        class="ivu-mt mt14"
        v-loading="loading"
        highlight-current-row
        empty-text="暂无数据"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column label="商品图片" min-width="80" align="center" prop="oderDetailImg">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 50px" :src="scope.row.oderDetailImg"> </el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" min-width="120" align="center" prop="productName">
          <template slot-scope="scope">
            <span>{{ scope.row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" min-width="120" prop="marketPrice">
          <template slot-scope="scope">
            <span>价格：¥{{ scope.row.marketPrice }}</span>
            <br />
            <span>货号：{{ scope.row.productNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性" min-width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.attributeJson }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" min-width="80" align="center" prop="orderNum"> </el-table-column>

        <el-table-column label="小计" min-width="120" align="center" prop="allMarketPrice"> </el-table-column>
      </el-table>
      <div class="text">操作信息</div>
      <el-table :data="detailData.mallOrderInfoRecords" class="ivu-mt mt14" v-loading="loading" border highlight-current-row empty-text="暂无数据">
        <el-table-column label="操作者" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.customerName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作时间" min-width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.orderStatus | orderStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.payStatus | payStatus }}</span>
          </template>
        </el-table-column>

        <el-table-column label="备注" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  filters: {
    orderStatus(e) {
      switch (e) {
        case '0':
          return '已下单'
        case '1':
          return '待核销'
        case '2':
          return '已核销'
        case '-1':
          return '已取消'
        default:
          return '暂无'
      }
    },
    payStatus(e) {
      switch (e) {
        case '0':
          return '待支付'
        case '1':
          return '已经发'
        case '2':
          return '退款申请'
        case '3':
          return '全部退款'
        case '4':
          return '部分退款'
        default:
          return '暂无'
      }
    }
  },

  props: {
    detailData: {
      type: Object,
      default() {}
    }
  },
  data() {
    return {
      template: false,
      modals: false,
      batchModal: false,
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      }
    }
  },
  created() {},
  activated() {},
  methods: {
    getSummaries(param) {
      // 合计
      const { columns, data } = param
      const sums = []

      if (columns && data) {
        let allMarketPrice = 0 // 交易金额

        data.forEach(item => {
          allMarketPrice += item.allMarketPrice ? item.allMarketPrice : 0
        })
        allMarketPrice = allMarketPrice.toFixed(2)

        columns.forEach((column, index) => {
          switch (
            column.property // column.property可以匹配它的每一列的命名， 然后赋值
          ) {
            case 'allMarketPrice':
              sums[index] = '合计' + allMarketPrice + '元' // 值取自后台
              break

            default:
              break
          }
        })
        return sums
      } else {
        return sums
      }
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}
::v-deep .ivu-modal-mask {
  z-index: 999 !important;
}

::v-deep .ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  ::v-deep .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.batch-box {
  ::v-deep .ivu-modal-body {
    overflow: auto;
    min-height: 350px;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}

::v-deep .happy-scroll-content {
  width: 100%;

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
}

.labelInput {
  border: 1px solid #dcdee2;
  width: 100%;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--prev-color-primary);
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu__item {
  a {
    color: #606266;
  }
}
.label_width {
  width: 400px;
}
.text {
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
}
</style>