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

一,在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>

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

©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页