黑马vue实战项目-（七）订单管理页面的开发
一，在git中新建分支，然后创建新的组件，完成基本的页面布局本来想和之前一样，写每一步的操作的，但是，这个页面用到的都是旧知识，我直接写好了……<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-ite
·
一，在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
0- 0
已为社区贡献18条内容
所有评论(0)