黑马vue实战项目-（七）订单管理页面的开发

最新推荐文章于 2024-06-14 20:47:30 发布
最新推荐文章于 2024-06-14 20:47:30 发布
阅读量3.1k 收藏 32
点赞数 1
分类专栏： # 前端小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42349568/article/details/108861146
版权
本文展示了如何在Vue项目中创建一个新的组件，完成订单管理页面的布局，包括面包屑导航、表格数据展示、分页及操作按钮。同时，介绍了如何推送代码到码云。此外，还涉及Echarts的使用，包括安装、基本配置和数据接口调用，用于数据统计图表的绘制。
摘要由CSDN通过智能技术生成

一，在git中新建分支，然后创建新的组件，完成基本的页面布局

在这里插入图片描述
在这里插入图片描述
本来想和之前一样，写每一步的操作的，但是，这个页面用到的都是旧知识，我直接写好了……
在这里插入图片描述

<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</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="8">
					<el-input placeholder="请输入内容" v-model="queryIofo.query" clearable @clear="getOrderList()">
						<el-button slot="append" icon="el-icon-search" @click="getOrderList()"></el-button>
					</el-input>
				</el-col>
			</el-row>
			<!-- 商品列表区域 -->
			<!-- 表格区域 -->
			<el-table :data="orderList" border stripe>
				  <!-- 在这里绑定表格的数据goodsList -->
				  <el-table-column type="index"> </el-table-column>
				  <!-- 添加索引列 -->
			      <el-table-column prop="order_number" label="订单编号"> </el-table-column>
				  <!-- prop是取得userList中每一个对象中的对应属性值 -->
			      <el-table-column prop="order_price" label="订单价格" width="95px"> </el-table-column>
				  <el-table-column  label="是否付款" width="95px">
					  <template slot-scope="scope">
						  <el-tag type="danger" v-if="scope.row.order_pay=='0'">未付款</el-tag>
						  <el-tag type="success" v-else> 已付款</el-tag>
					  </template>
				  </el-table-column>
				  <el-table-column prop="is_send" label="是否发货" width="95px"> </el-table-column>
				  <el-table-column  label="下单时间" width="200px">
					  <template slot-scope="scope">
					  	{{scope.row.create_time | dataFormat}}
					  </template>
				  </el-table-column>
				  <el-table-column label="操作" width="200px" >
					  <template slot-scope="scope">
						<!-- 修改按钮 -->
						<el-button 
							type="primary"
							icon="el-icon-edit" 
							size="mini" 
							@click="editDialog()">
						</el-button>
						<!-- 地点按钮 -->
						<el-button 
							type="warning" 
							icon="el-icon-location" 
							size="mini" 
							@click="showProgressBox()">
						</el-button>
					  </template>
				  </el-table-column>
			</el-table>
			<!-- 分页区域 -->
			  <el-pagination
			      @size-change="handleSizeChange"
				   @current-change="handleCurrentChange"
				  :current-page="queryIofo.pagenum"
				  :page-sizes="[10, 20, 30, 40]"
				  :page-size="queryIofo.pagesize"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="total">
				</el-pagination>
		</el-card>
		
		<!-- 修改地址对话框 -->
		<el-dialog
		  title="修改地址信息"
		  :visible.sync="editdialogVisible"
		  width="50%"
		   @close="editDialogClosed"
		 >
		 <!-- 内容主体区域，这里有一个匿名插槽 -->
		<el-form :model="adressForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
				<el-form-item label="省市区/县" prop="adress1">
					<!-- 选择地址的级联选择框 -->
					<el-cascader
					    v-model="adressForm.adress1"
					    :options="adressList"
						@change="handleChange"
						:props="{ expandTrigger: 'hover' }"
						clearable
					></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" prop="adress2">
					<el-input v-model="adressForm.adress2"></el-input>
				</el-form-item>
		</el-form>
		  <!-- 底部区域，这里是一个具名插槽 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editdialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editInfo">修改</el-button>
		  </span>
		</el-dialog>
		
		<!-- 查看物流信息对话框 -->
		<el-dialog
		  title="查看物流信息"
		  :visible.sync="searchdialogVisible"
		  width="50%"
		   @close="searchDialogClosed"
		 >
			<el-timeline :reverse="reverse">
			    <el-timeline-item
			      v-for="(item, index) in progressInfo"
			      :key="index"
			      :timestamp="item.ftime">
			      {{item.context}}
			    </el-timeline-item>
			 </el-timeline>
		</el-dialog>
	</div>
</template>

<script>
	import cityData from './citydata.js'
	export default{
		data(){
			return{
				queryIofo:{
					query:'',
					pagenum:1,
					pagesize:10
				},
				orderList:[],
				total:0,
				editdialogVisible:false,
				editFormRules:{
					adress1:[{ required: true, message: '请选择区/县', trigger: 'blur' }],
					adress2:[{ required: true, message: '请输入详细的地址', trigger: 'blur' }]
				},
				adressForm:{
					adress1:[],
					adress2:''
				},
				//省市县的三级数据,一个数组，每一级都是对象
				adressList:cityData,
				searchdialogVisible:false,
				progressInfo:[],
				reverse: true,
			}
		},
		created(){
			this.getOrderList()
		},
		methods:{
			//获取所有的订单列表
			async getOrderList(){
				const{data:res}=await this.$http.get('orders',{
					params:this.queryIofo
				})
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				// this.$message.success(res.meta.msg)
				this.orderList=res.data.goods
				this.total=res.data.total
				// console.log(res)
			},
			//编辑本行订单列表
			editDialog(){
				this.editdialogVisible=true
			},
			//删除本行订单列表
			removeGoodsById(){
				
			},
			//监听每页显示的条数
			handleSizeChange(newSize){
				//一旦每页几条发生变化，则触发这个事件，把数据中的pagesize更新
				this.queryIofo.pagesize=newSize
				//重新用新的queryIofo参数获取用户数据，渲染页面
				this.getOrderList()
			},
			//监听页码变化
			handleCurrentChange(newPage){
				this.queryIofo.pagenum=newPage
				//重新用新的queryIofo参数获取用户数据，渲染页面
				this.getOrderList()
			},
			//修改订单地址信息，发起请求
			editInfo(){
				
			},
			editDialogClosed(){
				this.$refs.editFormRef.resetFields()
			},
			//选中级联选择器之后的处理
			handleChange(){
				console.log(this.adressForm.adress1)
			},
			//显示快递进度的对话框
			async showProgressBox(){
				this.searchdialogVisible=true
				const {data:res}=await this.$http.get('/kuaidi/804909574412544580')
				if(res.meta.status!==200)return this.$message.error("获取物流信息失败")
				this.progressInfo=res.data
				// console.log(this.progressInfo)
			},
			searchDialogClosed(){
				
			},
			makeSure(){
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-cascader{
		width: 100%;
	}
</style>

二，本页页面的功能已经完成，将代码推送到码云。

三，数据报表界面的基本布局

同样是配置基本布局，然后配置路由：
在这里插入图片描述

四，echarts的使用

第一步，安装echarts插件：
在这里插入图片描述
在这里插入图片描述
它的基本使用效果：
在这里插入图片描述

五，获取统计的数据

对应的数据接口如下：
在这里插入图片描述

<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>数据统计</el-breadcrumb-item>
		  <el-breadcrumb-item>数据报表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
			 <div id="main" style="width: 600px;height:400px;"></div>
		</el-card>
	</div>
</template>

<script>
	//1,导入echarts
	import echarts from 'echarts'
	import _ from 'lodash'
	export default{
		data(){
			return{
				options:{
					title:{
						text:'用户来源'
					},
					tooltip:{
						trigger:'axis',
						axisPointer:{
							type:'cross',
							label:{
								backgroundColor:'#E9EEF3'
							}
						}
					},
					grid:{
						left:'3%',
						right:'4%',
						bottom:'3%',
						containLabel:true
					},
					xAxis:[
						{
							boundaryGap:false
						}
					],
					yAxis:[
						{
							type:'value'
						}
					]
				}
			}
		},
		//页面元素被创建后执行
		created(){},
		//页面元素被渲染后执行
		async mounted(){
			//3, 基于准备好的dom，初始化echarts实例
			var myChart2 = echarts.init(document.getElementById('main'))
			// 4,准备好指定图表的配置项和数据
			const{data:res}=await this.$http.get('reports/type/1')
			if(res.meta.status!==200)return this.$message.error('获取折线图失败！')
			//4,准备数据和配置项
			const result =_.merge(res.data,this.options)
			// 5，使用刚指定的配置项和数据显示图表。
			myChart2.setOption(result);
		},
		methods:{
			
		}
	}
</script>

<style lang="less" scoped>
</style>

然后保存代码，推送到码云即可。

笑道三千
关注
  • 1
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
电商平台后台管理系统---＞系统详细设计(订单管理模块)
hcz666的博客
06-23 6913
5.3 订单管理 订单管理包括创建订单、查询订单、删除订单和查看订单明细等功能 5.3.1 订单列表显示 1.前端页面 （1）效果图 图5.11 订单列表显示页面 （2）前面页面主要技术介绍及主要功能 主要组成： datagrid控件：通过javascript对id为orderDg的datagrid控件进行初始化，其中通过提交请求orderinfo/list获取数据源 工具栏：查看明细（调用editOrder()函数，提交请求orderinfo/getOrderInfo）和删除订单（调用remov
【JavaWEB】项目实战-黑马面面
HelloCode
06-05 3186
前台注册登录首页试卷后台登录首页管理编辑pom.xml sql导入heima_mm.sqldomain dao 配置文件SqlMapConfig.xml jdbc.properties CompanyDao.xml 工具类 TransactionUtil：事务管理工具类 提交事务 回滚事务 关闭事务 业务层 基础功能 CompanyServiceImpl 测试用例(CompanyServiceTest) 在实际开发时，每写一个方法最好写一个测试用例，来及时的排错 配置resources中的
vue3仿美团项目(6)-生成订单及地址编辑
m0_57469571的博客
05-23 666
vue3仿美团项目(6)-生成订单及地址编辑
Vue项目实战：订单确认页面实现
林夏天的博客
04-07 6826
目录 订单父组件结构封装 地址和商品数据加载 地址删除功能实现 新增地址交互实现 地址编辑和订单提交 订单确认页面 如下： （1）订单父组件结构封装 回顾路由文件router.js中关于order的路由: { path: '/order', name: 'order', component: Order...
【Vue】订单管理
最新发布
qq_39921135的博客
06-14 221
1 封装获取订单列表的 API 接口。2 给 tab 绑定 name 属性。3 封装调用接口获取数据。
Vue项目实战：订单列表页面实现
热门推荐
林夏天的博客
04-09 1万+
目录 调整Order父组件结构（解决Bug） 订单列表数据渲染 Loading 和 NoData优化 订单列表分页 - 分页器 订单列表分页 - 加载更多 订单列表分页 - 滚动加载 （1）调整Order父组件结构（解决Bug） 之前在Vue项目实战：订单确认页面实现中关于订单父组件结构封装里写到：在order.vue中引入<order-header></order-hea...
vue电商后台管理系统--订单管理篇
zyyyyyy24的博客
08-15 749
安装Echarts并渲染Demo表图 第一种： npm指令： npm install echarts --save 第二种： 在vue-ui中选择安装运行依赖 直接搜索echarts然后点击安装即可 获取折线图并渲染图表 源码 <template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator="/"> <el-breadcrumb-item
VUE实战项目【电商管理端】后台数据库SQL文件
10-03
综上所述，这个Vue实战项目不仅涉及前端Vue.js的应用，还涵盖了后端数据库的设计与管理。mydb.sql文件是整个电商管理系统的基石，它定义了数据模型，支撑着前端的各种交互和功能实现。通过深入理解这些知识点，...
黑马电商后台管理系统前端vue后端nodejs.zip
12-02
通过学习黑马电商后台管理系统，开发者不仅可以提升Vue.js和Node.js的实战技能，还能了解到电商后台的常见业务流程和设计模式，为今后的项目开发打下坚实基础。无论是初学者还是有经验的开发者，都能从中获益匪浅。
黑马程序员-梅兰商城项目实战
04-25
【梅兰商城项目实战】是黑马程序员推出的一个全面的电商项目开发教程，旨在帮助学员深入理解和实践电商系统的构建。这个项目实战涵盖了从需求分析、设计、编码到测试的全过程，旨在提升学员在实际开发环境中的技能和...
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
通过理解项目的结构、配置和流程，开发者可以学习到Vue.js的组件化开发、路由管理以及与Node.js后端的协作方式，进一步提升全栈开发能力。在实际操作过程中，注意保持前后端的版本一致性，以确保项目正常运行。
02-javaweb-13-WEB项目实战-黑马面面01.doc
10-14
02-javaweb-13-WEB项目实战-黑马面面01.doc
vue购物车商品订单详情页面特效代码
03-20
vue购物车商品订单详情页面代码是一款网上商城商品购买购物车地址及付款详情页，收货人信息添加修改，支付方式选择，送货清单，发票信息，使用优惠券等订单功能。
Vue展示待支付、已支付、代发货界面
06-01
通过Vue展示部分待支付、待发货、已发货界面
黑马商城小项目.zip
04-09
在黑马商城小项目中，服务器端处理业务逻辑后，将数据以JSON对象的形式返回，前端接收到这些数据后，可以快速解析并更新页面元素，展示商品列表、购物车信息或者订单详情等。 后端部分，可能采用了Node.js、Java、...
电商产品设计：后台订单管理设计
likeshopgood的博客
03-22 6999
打开百度APP看高清图片 订单管理在整个网上商城的地位举足轻重，它涉及到企业整个销售链路的核心环节，同时又关系到用户商品的最终交易结果，所以一份订单在生成到交易结束的整个生命周期里，产品经理和业务经理都应该认真去思考和规划，因为订单系统在整个电商平台的销售环节里是最复杂、最核心且最关键的。 一、订单系统的作用 1.1 对用户来说 用户在下单后实时查看订单发货状态，物流信息状态和最后交易纠纷的售后流程等。 1.2 对商家来说 商家管理订单状态，实时发货，处理售后纠纷处理等，更好更快的满足用户...
java黑马面试_JavaWeb-黑马面面（面试刷题系统）项目实战
weixin_31926457的博客
02-24 4226
经历了多次Java基础项目后，本次项目难度升级！挑战JavaWeb--黑马面面项目。黑马面面是一款面向程序员的面试刷题系统，服务于java开发工程师学习完毕后的复习问题，通过大量刷题，提高企业面试题的熟知度，辅助学员顺利完成求职面试，该项目目前使用市场常用主流技术来开发，项目中使用：AdminLTE、AJAX、JQuery、zTree、Servlet3.0、文件上传下载、MyBatis、MySQL...
SpringBoot+Vue前后端分离项目——订单模块——订单管理页面设计
roydon
05-24 1397
分析返回数据格式：请求是分页查询，这里测试用只有一个订单，一个订单包含了订单基本信息和关联的收货地址表和订单商品表，一个订单包含多个订单商品。Vue源码：（未给全，可自行扩展）
笔记--回调函数、计算属性、vm监听、深度监听
AngelQ
09-04 399
复习 1：回调函数的3个问题 什么时候执行回调，作用是什么，this指向什么 2：vm监视data中数据的特点
vue项目实战-电商后台管理系统开发的意义
06-11
电商后台管理系统的开发使用了 Vue.js 框架，可以帮助开发者更好地了解和掌握前端技术，推动前端技术的发展。同时，开发过程中也可以发现和解决一些技术问题，从而提高开发者的技术水平和经验。 总之，电商后台管理...
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值