vue电商后台管理系统--订单管理篇

渲染订单table表格

 <!-- 订单列表数据 --><el-table :data="orderList" border stripe><el-table-column type="index" label="#"></el-table-column><el-table-column label="订单编号" prop="order_number"></el-table-column><el-table-column label="订单价格" prop="order_price"></el-table-column><el-table-column label="是否付款" prop="pay_status"><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"></el-table-column><el-table-column label="下单时间" prop="create_time"><template slot-scope="scope">{{scope.row.create_time*1000 | dateFormat}}</template></el-table-column><el-table-column label="操作" ><template><el-button type="primary" icon="el-icon-edit" size="mini"></el-button><el-button type="success" icon="el-icon-location" size="mini" ></el-button></template></el-table-column></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>// 监听当前页数变化的事件handleSizeChange(newSize){this.queryInfo.pagesize = newSizethis.getOrderList()},// 监听当前页码变化的事件handleCurrentChange(newPage){this.queryInfo.pagenum = newPagethis.getOrderList()},

实现省市区县数据联动效果
其中包含一个核心文件，下载之后放在你所需要的项目包里即可

首先，我们需要对文件在界面处理模块script里面进行导入,路径这里是我放的包路径，不同的话可能需要修改一下，然后在data里面定义我们的数据对象

以下是基于Element-UI的级联选择器的使用，options绑定我们的数据源，也就是我们刚刚定义的cityData

展示物流进度对话框并获取物流信息

    <el-dialogtitle="物理进度":visible.sync="progressVisible"width="50%" ><span>维护中...</span></el-dialog>

// 展示物流进度
async showProgressBox(){
const {data:res} = await this.http.get(′/kuaidi/804909574412544580′)if(res.meta.status!==200)returnthis.http.get('/kuaidi/804909574412544580') if(res.meta.status !== 200) return this.http.get(′/kuaidi/804909574412544580′)if(res.meta.status!==200)returnthis.message.error(‘获取物流进度失败！’)
this.progressInfo = res.data
this.progressVisible = true
console.log(this.progressInfo)
}

vue电商后台管理系统--订单管理篇相关推荐

Vue电商后台管理系统（1）
Vue电商后台管理系统(1) 登录在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理作品名 ...
Vue电商后台管理系统项目开发实战（一）
前言当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块
效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...
10.2 黑马Vue电商后台管理系统完善订单模块--搜索订单（修改后端）
效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能我的思 ...
电商后台管理系统订单列表模块
一代码 1 新建 Order.vue 组件 <template><div><el-breadcrumb separator-c ...
9.1黑马Vue电商后台管理系统商品管理模块完善：编辑商品的功能
在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...

vue电商后台管理系统--订单管理篇

vue电商后台管理系统--订单管理篇相关推荐

最新文章

热门文章