vue+elemenUI项目，仿照京东商城，完成电商网站的订单中心

效果展示：

页面布局

<el-tabs class="orders">
  <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
           active-text-color="#ff5001">
    <el-menu-item index="1" @click="getOrderList()">
      <span slot="title">全部订单</span>
    </el-menu-item>
    <el-menu-item index="2" @click="getOrderList([orderStatus.CREATED])">
      <span slot="title">已创建</span>
    </el-menu-item>
    <el-menu-item index="3" @click="getOrderList([orderStatus.WAIT])">
      <span slot="title">待付款</span>
    </el-menu-item>
    <el-menu-item index="4" @click="getOrderList([orderStatus.FINISH])">
      <span slot="title">已完成</span>
    </el-menu-item>
    <el-menu-item index="5" @click="getOrderList([orderStatus.CANCEL])">
      <span slot="title">已取消</span>
    </el-menu-item>
    <el-menu-item index="6" @click="getOrderList([orderStatus.REFUNDING])">
      <span slot="title">退款中</span>
    </el-menu-item>
    <el-menu-item index="7" @click="getOrderList([orderStatus.REFUND_SUCCESS])">
      <span slot="title">已退款</span>
    </el-menu-item>
    <el-menu-item index="8" @click="getOrderList([orderStatus.CLOSE])">
      <span slot="title">已关闭</span>
    </el-menu-item>
  </el-menu>
  <div class="filterResult">
    <table>
	  <thead class="orderHead">
        <tr>
          <th>订单详情</th>
          <th>金额</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody class="orderBody" v-for="(order,orderIndex) in orderData.records" :key="orderIndex">
        <tr class="separate"></tr>
        <tr class="tr_th">
          <td colspan="4">
            <span class="dealTime" :title="order.createTime">下单时间：{{order.createTime}}</span>
            订单号：<span class="orderId">{{order.outTradeNo}}</span></td>
        </tr>
        <tr class="order" v-for="(item,itemIndex) in order.itemList" :key="itemIndex">
          <td class="orderMessage">
            <div class="goodItem">
              <div class="orderImg">
                <img v-lazy="GlobalFn.dealQiniuImg(item.coverPic)" alt="" @error="GlobalFn.show_default_image">
              </div>
              <div class="orderName"><a :href="`item.html?id=${item.id}`">{{item.title}}</a></div>
            </div>
          </td>
          <td class="amount" :rowspan="order.itemList.length" v-if="itemIndex===0">
            <span>￥{{order.money}}</span>
            <br>
          </td>
          <td :rowspan="order.itemList.length" v-if="itemIndex===0">
            {{GlobalFn.dealOrderStatus(order.orderStatus)}}
          </td>
          <td :rowspan="order.itemList.length" v-if="itemIndex===0" class="orderOperate">
            <div><span @click="showOrderDetail(order.id)">查看详情</span></div>
            <div v-if="order.orderStatus===orderStatus.CREATED||order.orderStatus===orderStatus.WAIT"
                 @click="cancelOrder(order.id)"><span>取消订单</span></div>
            <div v-if="order.orderStatus===orderStatus.CREATED||order.orderStatus===orderStatus.WAIT"
                 @click="payOrder(order)"><span>支付订单</span></div>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-bind:class="{noItems:orderData.records.length===0}"></div>
  </div>
  <!--      分页-->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageIndex"
      :page-size="page.pageSize"
      :total="orderData.total"
      :hide-on-single-page="true"
      layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>
</el-tabs>

getOrderList: function (orderStatus) {
  if (orderStatus){
    this.chooseAllStatus = false
  }
  let {pageIndex, pageSize} = this.page;
  let orderQueryData = new Global.OrderQueryData(null, null, orderStatus)
  this.$api.transactionService.getOrderList(pageIndex, pageSize, orderQueryData).then(res => {
    let loadingInstance = Loading.service({
      target: ".filterResult",
      text: "正在加载数据...",
      customClass: ".loading"
    });
    if (res){
      loadingInstance.close()
    }
    if (res.flag) {
      this.orderData = res.data
    }
  })
},

样式：

<style scoped>
.noItems {
    background: url("/static/images/common/noItem.png") center no-repeat;
    background-size: contain;
    min-height: 400px;
  }
.orders {
    background-color: #ffffff;
    min-height: 500px;
    padding: 20px;
  }

  .orderHead {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #666666;
  }

  .orderHead th {
    width: 150px;
    background: #f5f5f5;
    height: 32px;
    line-height: 32px;
  }

  .orderHead th:nth-child(1) {
    /*width: 570px;*/
    width: 700px;
  }

  .orderBody .separate {
    height: 20px;
  }

  .orderBody .tr_th {
    background: #f5f5f5;
    height: 30px;
    line-height: 30px;
    color: #AAAAAA;
    font-size: 12px;
  }

  /*设置边框*/
  .orderBody td {
    border: 1px solid #e5e5e5;
  }

  .orderBody .tr_th .dealTime {
    padding: 0 30px 0 20px;
  }

  .orderBody .orderId {
    color: #333333;
  }

  .order td {
    padding: 14px 0;
    font-size: 12px;
  }

  .order .goodItem div {
    float: left;
  }

  .order img {
    margin: 0 20px;
    width: 60px;
    height: 60px;
  }

  .order .orderName {
    width: 240px;
    height: 36px;
    line-height: 18px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-right: 200px;
  }

  .order .orderName a {
    text-decoration: none;
    color: #333;
    transition: .3s;
  }

  .order .orderName a:hover {
    color: #ff5501;
    text-decoration: underline;
  }

  .order .orderNum {
    color: #AAAAAA;
  }

  /*设置金额状态操作文字居中，水平位置，颜色*/
  .order td:not(.orderMessage) {
    vertical-align: top;
    text-align: center;

  }

  .amount {
    color: #aaa;
  }

  .ftx-13 {
    display: block;
    width: 100px;
    margin: 5px auto;
    padding-top: 1px;
    border-top: solid 1px #E5E5E5;
    line-height: 19px;
    height: 19px;
    overflow: hidden;
  }

  /*设置操作一栏样式*/
  .order td.orderOperate {
    line-height: 20px;
  }

  .orderOperate span {
    cursor: pointer;
    transition: .3s;
  }

  .orderOperate span:hover {
    color: #ff5501;
  }
  .block {
   text-align: center;
   padding: 30px 0;
  }
</style>