10.4 Vue电商后台管理完善订单模块--用Tab切换对订单进行分类

chnyi6_ya

已于 2022-03-30 21:31:52 修改

阅读量1.1k

点赞数

分类专栏： Vue实战--电商后台管理系统文章标签： vue.js

于 2022-03-30 21:30:46 首次发布

本文链接：https://blog.csdn.net/weixin_47505105/article/details/123857200

版权

Vue实战--电商后台管理系统专栏收录该内容

29 篇文章 22 订阅

订阅专栏

1. 效果如下：

在这里插入图片描述

2. 实现代码

在这里插入图片描述
四个el-tab-pane中，< el-table >是一样的：

<el-tab-pane name="all" label="所有">
            <el-table :data="orderList" border stripe>
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格">
        </el-table-column>
         <el-table-column prop="order_pay" label="支付状态">
           <template v-slot="scope">
            <el-tag type="danger"
            v-if="scope.row.order_pay === '0'">未支付</el-tag>
            <el-tag type="success"
            v-if="scope.row.order_pay === '1'">支付宝</el-tag>
            <el-tag type="success"
            v-if="scope.row.order_pay === '2'">微信</el-tag>
            <el-tag type="success"
            v-if="scope.row.order_pay === '3'">银行卡</el-tag>
          </template>
          </el-table-column>
         <el-table-column prop="is_send" label="是否发货">
           <template v-slot="scope">
            <el-tag type="success"
            v-if="scope.row.is_send === '是'">是</el-tag>
            <el-tag type="danger"
            v-if="scope.row.is_send === '否'">否</el-tag>
          </template>
          </el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scope">
            {{scope.row.create_time | dataFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="consignee_addr" label="发货地址">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
             <el-button type="text"
              @click="sendGoods(scope.row.order_id)"
              v-if="scope.row.is_send === '是'"
              disabled>
              发货</el-button>
              <el-button type="text"
              @click="sendGoods(scope.row.order_id)"
              v-if="scope.row.is_send === '否'" >
              发货</el-button>
             <el-button type="text"
              @click="dialogVisible(scope.row.order_id)">修改地址</el-button>
            <el-button type="text"
            @click="goEditPage(scope.row.order_id)">订单详情</el-button>
            <el-button type="text"
            @click="showProgressBox">物流信息</el-button>
          </template>
        </el-table-column>
      </el-table>
         </el-tab-pane>

在这里插入图片描述

// 包含所有订单的列表
      orderList: [],
      // 只包含已发货的订单的列表
      sendOrderList: [],
      // 只包含待发货的订单的列表
      noSendOrderList: [],
      // 只包含 未支付的订单的列表
      noPayOrderList: [],

在这里插入图片描述

 // 获取订单列表
    async getOrderList () {
      // console.log(this.queryInfo.query)
      const { data: res } = await this.$http.get('orders', {
        params: this.queryInfo
      })
      console.log(res)
      if (res.meta.status !== 200) {
        this.$message.error('获取订单列表失败!')
      }
      this.total = res.data.total
      this.orderList = res.data.goods
      console.log(this.orderList)
      // 过滤出只包含已发货的订单的列表
      this.sendOrderList =
      this.orderList.filter(item => item.is_send === '是')
      // 过滤出 只包含 未发货的订单的列表
      this.noSendOrderList =
      this.orderList.filter(item => item.is_send === '否')
      // 过滤出 只包含 未支付的订单的列表
      this.noPayOrderList =
      this.orderList.filter(item => item.order_pay === '0')
    },