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

小儿上茶 · 发布于 2023-4-19 15:27:37

接上篇《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" >
<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表格区域：

<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”组件，否则会不显示。
分页效果：

至此我们的订单列表模块介绍和根底构造搭建完成。
下一篇我们继续编写订单修改收货地址的功能。
参考：黑马程序员（www.itheima.com）Vue项目实战教学视频
借鉴请注明出处：https://blog.csdn.net/acmman/article/details/125577526