【VUE项目实战】57、订单管理功能介绍和基本结构搭建

光仔December

已于 2022-07-10 13:33:27 修改

阅读量2.2k

点赞数 1

分类专栏： vue入门与实战文章标签： vue.js javascript el-breadcrumb el-pagination slot-scope

于 2022-07-02 20:58:37 首次发布

本文链接：https://blog.csdn.net/acmman/article/details/125577526

版权

vue入门与实战专栏收录该内容

95 篇文章 596 订阅

订阅专栏

接上篇《56、商品添加功能（六）-提交添加的商品》
上一篇我们完成了商品列表及商品添加的所有功能功能。本篇我们开启新模块“订单管理”的开发，先进行模块的介绍和基本结构的搭建。

一、创建新分支

开发新的模块，我们需要创建新的git分支，在VScode打开终端，在控制台输入“git branch”查看我们所在的分支（可以看到是在master主分支上），然后我们使用“git checkout -b order”创建一个名为“order”的分支，可以看到自动切换到了新的分支上：

然后我们通过“git push -u origin order”指令，将本地的分支推送到云端：

然后我们前往gitee云端，可以看到新增了一个分支：

二、创建组件并定义路由规则

我们在components/路径下创建一个名为“order”的文件夹，然后在该文件夹下创建一个名为“Order.vue”的文件文件（订单列表管理组件）：

然后在“Order.vue”文件中编写基本代码结构：

<template>
    <div>
        <h3>订单列表组件页面</h3>
    </div>
</template>
 
<script>
export default {
    data(){
        return{}
    },
    created(){},
    methods:{}
}
</script>
 
<style scoped>
 
</style>

然后我们在“router/index.js”下引入Order组件（别名OrderList），并在路由规则中定义路由规则（“/orders”菜单的路由）：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue' 
import Welcome from '../components/Welcome.vue' 
import Users from '../components/user/Users.vue' 
import Rights from '../components/power/Rights.vue' 
import Roles from '../components/power/Roles.vue' 
import Cate from '../components/goods/Cate.vue' 
import Params from '../components/goods/Params.vue' 
import GoodsList from '../components/goods/List.vue' 
import Add from '../components/goods/Add.vue'
import Order from '../components/order/Order.vue'
 
Vue.use(VueRouter)
const routes = []
 
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }, //定义访问页面的路由地址
    { 
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        {path:'/welcome',component:Welcome},
        {path:'/users',component:Users},
        {path:'/rights',component:Rights},
        {path:'/roles',component:Roles},
        {path:'/categories',component:Cate},
        {path:'/params',component:Params},
        {path:'/goods',component:GoodsList},
        {path:'/goods/add',component:Add},
        {path:'/orders',component:Order}
      ]
    }
  ]
})
//挂载路由导航守卫
//to是我们跳转的路径，from是来自的路径，next为放行函数
router.beforeEach((to,from,next)=>{
  //如果用户访问登录页，直接放行
  if(to.path ==="/login") return next();
  //从sessionStorage中获取到保存的token值
  const tokenStr = window.sessionStorage.getItem("token");
  //没有token，强制跳转到登录页面
  if(!tokenStr) return next("/login");
  next();//有token，直接放行
})
 
export default router

然后我们刷新页面，点击订单管理->订单列表菜单，就被路由到刚刚创建的组件上了：

三、绘制订单列表基本布局

在订单列表页面，除去最基本的面包屑导航以及开片视图区域，左上角是订单名称搜索框和按钮，下方是订单表格，分别显示订单的编号、价格、是否付款和下单时间，最右侧是“修改订单地址”和“物流信息”两个操作按钮，最下面就是分页：

我们先把左上角的面包屑导航和卡片视图做出来。
首先我们将在商品管理的面包屑导航直接拷贝过来修改，然后再通过“el-card”创建一个卡片视图区域以及搜索按钮：

<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
 
        <!-- 卡片视图 -->
        <el-card>
            <el-row :gutter="20" ><!-- gutter是指定每个分栏的间隔 -->
                <!-- 分栏一共占24格，给搜索框7格 -->
                <el-col :span="7">
                    <!-- 搜索与添加区域 -->
                    <el-input placeholder="请输入内容" clearable>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

效果：

四、获取订单列表数据

我们来看一下订单列表接口API的参数和响应结果：

●响应数据格式：

{
    "data": {
        "total": 1,
        "pagenum": "1",
        "goods": [
            {
                "order_id": 47,
                "user_id": 133,
                "order_number": "itcast-59e7502d7993d",
                "order_price": 322,
                "order_pay": "1",
                "is_send": "是",
                "trade_no": "",
                "order_fapiao_title": "个人",
                "order_fapiao_company": "",
                "order_fapiao_content": "办公用品",
                "consignee_addr": "a:7:{s:6:\"cgn_id\";i:1;s:7:\"user_id\";i:133;s:8:\"cgn_name\";s:9:\"王二柱\";s:11:\"cgn_address\";s:51:\"北京市海淀区苏州街长远天地大厦305室\";s:7:\"cgn_tel\";s:11:\"13566771298\";s:8:\"cgn_code\";s:6:\"306810\";s:11:\"delete_time\";N;}",
                "pay_status": "1",
                "create_time": 1508331565,
                "update_time": 1508331565
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

可以看到传参的时候，传递的是query查询参数（模糊查询用的），以及pagenum和pagesize两个的分页参数，剩余的是用户ID、支付传统以及是否发货和订单的一些基本信息。
而返回的订单信息是封装在goods数组里的，遍历出来即可。

清楚了API的调用，我们来编写调用代码。首先在数据区域定义一个“orderlist”对象，用来承载商品列表数据，然后是“queryinfo”对象，为请求数据的默认请求参数对象；“total”为数据总数：

<script>
export default {
    data(){
        return{
            //查询条件
            queryInfo:{
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            //订单列表，默认为空
            orderlist: [],
            total: 0 //数据总数
        }
    },
    created(){},
    methods:{}
}
</script>

然后在方法区定义名为“getOrderList”方法，用来获取商品数据（同时该方法在created声明周期函数中调用）：

created(){
    this.getOrderList();
},
methods:{
    //根据分页获取对应的订单列表
    async getOrderList(){
        const {data: res} = await this.$http.get('orders',{params: this.queryInfo});
        if(res.meta.status!==200){
            return this.$message.error('获取订单列表失败！')
        }
        console.log(res.data);
        //报数据列表，赋值给orderlist
        this.orderlist = res.data.goods;
        //为总数据条数赋值
        this.total = res.data.total;
    }
}

我们打开浏览器访问商品列表模块，F12查看返回的数据结构：

可以看到成功获取到订单列表数据。

五、渲染订单列表

获取到数据后，我们渲染订单列表的表格。我们在卡片视图区域的“el-row”下面添加table表格区域：

<!-- table 表格区域 -->
<el-table :data="orderlist" border stripe>
    <el-table-column type="index"></el-table-column><!-- 索引列 -->
    <el-table-column label="订单编号" prop="order_number"></el-table-column>
    <el-table-column label="订单价格" prop="order_price" width="90px"></el-table-column>
    <el-table-column label="是否付款" prop="pay_status" width="70px">
        <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_status=='1'">已付款</el-tag>
            <el-tag type="danger" v-else>未付款</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="是否发货" prop="is_send" width="70px"></el-table-column>
    <el-table-column label="下单时间" width="140px">
        <template slot-scope="scope">
            {{scope.row.create_time | dateFormat}}
        </template>
    </el-table-column>
    <el-table-column label="操作" width="200px">
        <template slot-scope="{}">
            <el-button size= "mini" type="primary" icon="el-icon-edit"></el-button>
            <el-button size= "mini" type="success" icon="el-icon-location"></el-button>
        </template>
    </el-table-column>
</el-table>

注：“是否付款”部分，我们通过scope作用域插槽，获取是否付款的字段，使用v-if条件根据1和0来判断显示红色选项卡还是绿色选项卡。然后订单日期格式处理，使用的是之前我们在main.js中注册一个全局的时间处理器“dateFormat”。
效果：

六、分页效果

分页效果之前已经讲解过了，这里不再赘述，直接说结果。我们使用Element-UI提供的“Pagination分页”组件，在el-table下添加如下逻辑：

<!-- 分页区域 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" 
    layout="total, sizes, prev, pager, next, jumper" :total="total" background>
</el-pagination>

然后在方法区分别定义上面监听每页数量改变和页码值改变的方法：

//监听 pagesize 改变的事件
handleSizeChange(newSize){
    console.log(newSize);
    this.queryInfo.pagesize = newSize;//重新指定每页数据量
    this.getOrderList();//带着新的分页请求获取数据
},
//监听 页码值 改变的事件
handleCurrentChange(newPage){
    console.log(newPage);
    this.queryInfo.pagenum = newPage;//重新指定当前页
    this.getOrderList();//带着新的分页请求获取数据
}

注：要在element.js注册“Pagination”组件，否则会不显示。
分页效果：