文章目录

0. 准备工作
1.界面样式
- 1.1 界面布局
- 1.2 导航区
2.订单数据列表
- 2.1 界面样式
- 2.2 数据添加
- 2.3 方法实现
3.分页区
- 3.1 界面样式
- 3.2 数据添加
- 3.3 方法实现
4.修改地址的对话框
- 4.1 界面样式
- 4.2 数据添加
- 4.3 方法实现
5.展示物流进度的对话框
- 5.1 界面样式
- 5.2 数据添加
6.搜索与添加
- 6.1 界面样式
- 6.2 数据添加
- 6.3 方法实现
7.搜索与添加
- 7.1 界面样式
- 7.2 数据添加
- 7.3 方法实现

0. 准备工作

component下新建文件夹order下新建文件Order.vue，并在路由中引入文件
因为数据库中少了些文件，所以要自己导入。
1 ）citydata.js
2 ) db.js
3 ) wuliudb.json

PS：这些文件太长，我就不放了。

1.界面样式

1.1 界面布局

1.2 导航区

<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>

2.订单数据列表

2.1 界面样式

<el-row><el-col :span="8"><el-input placeholder="请输入内容"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col></el-row><!-- 订单数据列表 --><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"></el-table-column><el-table-column label="是否付款" prop="pay_status"><template slot-scope="scope"><el-tag type="success" v-if="scope.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 | dateFormat }}</template></el-table-column><el-table-column label="操作"><template><el-buttonicon="el-icon-edit"size="mini"type="primary"@click="showBox"></el-button><el-buttonicon="el-icon-location"size="mini"type="success"@click="showProgressBox"></el-button></template></el-table-column></el-table>

2.2 数据添加

 queryInfo: {query: '',pagenum: 1,pagesize: 10},orderList: [],

2.3 方法实现


async getOrderList () {const { data: result } = await this.$http.get('orders', {params: this.queryInfo})if (result.meta.status !== 200) {return this.$message.error('获取订单列表失败')}this.total = result.totalthis.orderList = result.data.goods},showBox () {this.addressVisible = true},showProgressBox () {this.progressInfo = this.dbthis.progressVisible = true}

3.分页区

3.1 界面样式

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

3.2 数据添加

  total: 0,

3.3 方法实现

handleSizeChange (newSize) {this.queryInfo.pagesize = newSizethis.getOrderList()},handleCurrentChange (newPage) {this.queryInfo.pagenum = newPagethis.getOrderList()},

4.修改地址的对话框

4.1 界面样式

<el-dialogtitle="修改地址":visible.sync="addressVisible"width="50%"@close="addressDialogClosed"><!-- 内容主题区 --><el-form:model="addressForm":rules="addressFormRules"ref="addressFormRef"label-width="100px"><el-form-itemlabel="省市区/县"prop="address1"><el-cascader:options="cityData"v-model="addressForm.address1"></el-cascader></el-form-item><el-form-itemlabel="详细地址"prop="address2"><el-input v-model="addressForm.address2"></el-input></el-form-item></el-form><!-- 底部区域 --><span slot="footer" class="dialog-footer"><el-button @click="addressVisible = false">取 消</el-button><el-buttontype="primary" @click="addressVisible = false">确 定</el-button></span></el-dialog>

4.2 数据添加

addressVisible: false,addressForm: {address1: [],address2: ''},addressFormRules: {address1: [{ required: true, message: '请选择省市区县', trigger: 'blur' }],address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]},cityData,

4.3 方法实现

addressDialogClosed () {this.$refs.addressFormRef.resetFields()},

5.展示物流进度的对话框

5.1 界面样式

<el-dialogtitle="物流进度":visible.sync="progressVisible"width="50%"><!-- 内容主题区 时间线 --><el-timeline><el-timeline-itemv-for="(activity, index) in progressInfo":key="index":timestamp="activity.time">{{ activity.context }}</el-timeline-item></el-timeline></el-dialog>

5.2 数据添加

progressVisible: false,progressInfo: [],db

6.搜索与添加

6.1 界面样式

6.2 数据添加

6.3 方法实现

7.搜索与添加

7.1 界面样式

7.2 数据添加

7.3 方法实现

前端学习之vue+element-ui电商项目（九）订单管理相关推荐

element ui 电商后台商品属性管理页面
电商后台商品属性管理最近在做电商后台,电商商品中有个SKU值,类似于服装的 "尺码""颜色""款式"等. 界面如下: 所用到的知识点如下 ...
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理作品名 ...
[Vue.js]实战 -- 电商项目(一)
项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块项目概述电商项目基本业务概述电商后台管理 ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
vue+element模仿电商商城，前后端分离实现，下单微信扫码支付
1.前言接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...
[Vue.js]实战 -- 电商项目(二)
主页布局整体布局主页布局开始引入官网的框架时,首先要在element.js中添加 import { Container,Header,Aside,Main } from 'element-ui' ...
[Vue.js]实战 -- 电商项目(六)
商品管理商品管理概述用于维护电商平台的商品信息包括商品的类型.参数.图片.详情等信息.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能商品列表实现商品列表布局效果调用后台接口获取 ...
[Vue.js]实战 -- 电商项目(四)
分类管理商品分类概述商品分类用于在购物时,快速找到所要购买的商品,可以通过电商平台主页直观的看到商品分类列表基本布局与数据获取基本布局面包屑导航区域 <!-- 面包屑导航区域 --& ...
[Vue.js]实战 -- 电商项目(八)
数据统计数据统计概述用于统计电商平台运营过程的中的各种统计数据通过直观的可视化方式展示出来,方便相关运营和管理人员查看用户来源数据统计报表 Echarts 第三方可视化库的基本使用安装ech ...
[Vue.js]实战 -- 电商项目(五)
参数管理参数管理概述商品参数用于显示商品的固定的特征信息,可以通过电商平台商品详情页面直观的看到商品分类选择选择商品分类页面布局 <div><!-- 面包屑导航区域 --& ...

前端学习之vue+element-ui电商项目（九）订单管理

文章目录

0. 准备工作

1.界面样式

1.1 界面布局

1.2 导航区

2.订单数据列表

2.1 界面样式

2.2 数据添加

2.3 方法实现

3.分页区

3.1 界面样式

3.2 数据添加

3.3 方法实现

4.修改地址的对话框

4.1 界面样式

4.2 数据添加

4.3 方法实现

5.展示物流进度的对话框

5.1 界面样式

5.2 数据添加

6.搜索与添加

6.1 界面样式

6.2 数据添加

6.3 方法实现

7.搜索与添加

7.1 界面样式

7.2 数据添加

7.3 方法实现

前端学习之vue+element-ui电商项目（九）订单管理相关推荐

最新文章

热门文章