十八、订单列表
（1）通过路由渲染订单列表页面1. 创建order/Order.vue2. 添加路由（2）根据分页获取订单数据列表打印的res.data(请求的订单列表相关数据)（3）渲染订单table表（4）实现分页功能（5）显示修改地址对话框，实现省市区县数据联动效果1. 首先创建修改地址对话框。1.1 在对话框中的内容部分添加表单1.2 在表单中添加级联选择器（实现对省市区县的选择）通过导入cityda..
·
（1）通过路由渲染订单列表页面
1. 创建order/Order.vue
2. 添加路由
（2）根据分页获取订单数据列表
打印的res.data(请求的订单列表相关数据)
（3）渲染订单table表
（4）实现分页功能
（5）显示修改地址对话框，实现省市区县数据联动效果
1. 首先创建修改地址对话框。
1.1 在对话框中的内容部分添加表单
1.2 在表单中添加级联选择器（实现对省市区县的选择）
通过导入citydata.js，获取城市数据
1.3 为对话框添加关闭事件，关闭时自动重置
2. 为编辑按钮添加点击事件，点击时，显示修改对话框
（6）展示物流进度对话框
1. 首先为地址按钮添加点击事件，点击时显示物流地址对话框
2. 创建对话框
3. 手动添加物流地址（给的物流单号已失效，无法获取）
progressInfo: [
{
"time": "2018-05-10 09:39:00",
"ftime": "2018-05-10 09:39:00",
"context": "已签收,感谢使用顺丰,期待再次为您服务",
"location": ""
},
{
"time": "2018-05-10 08:23:00",
"ftime": "2018-05-10 08:23:00",
"context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
"location": ""
},
{
"time": "2018-05-10 07:32:00",
"ftime": "2018-05-10 07:32:00",
"context": "快件到达 [北京海淀育新小区营业点]",
"location": ""
},
{
"time": "2018-05-10 02:03:00",
"ftime": "2018-05-10 02:03:00",
"context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
"location": ""
},
{
"time": "2018-05-09 23:05:00",
"ftime": "2018-05-09 23:05:00",
"context": "快件到达 [北京顺义集散中心]",
"location": ""
},
{
"time": "2018-05-09 21:21:00",
"ftime": "2018-05-09 21:21:00",
"context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
"location": ""
},
{
"time": "2018-05-09 13:07:00",
"ftime": "2018-05-09 13:07:00",
"context": "顺丰速运 已收取快件",
"location": ""
},
{
"time": "2018-05-09 12:25:03",
"ftime": "2018-05-09 12:25:03",
"context": "卖家发货",
"location": ""
},
{
"time": "2018-05-09 12:22:24",
"ftime": "2018-05-09 12:22:24",
"context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
"location": ""
},
{
"time": "2018-05-08 21:36:04",
"ftime": "2018-05-08 21:36:04",
"context": "商品已经下单",
"location": ""
}
]（7）使用时间进度条，显示对话框中的物流信息
1. 由于只有2.6.0版本之后的elementUI才支持该组件（2019.3以后），如果我们的vue-cli-plugin-element是2019.1以后的，则需手动导入该组件
1.1 将这两个文件复制到项目中
1.2. 在element.js中导入这两个组件
1.3. 在Order.vue中引入css文件
2. 由于我们的版本符合要求，可以直接引入，并在Order.vue中使用
2.1 引入
2.2 使用
Order.vue
<template>
<div>
<!-- 面包屑 导航区 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>订单管理</el-breadcrumb-item>
<el-breadcrumb-item>订单列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区 -->
<el-card>
<!-- 输入框 -->
<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="danger" v-if="scope.row.pay_status ==='0'">未付款</el-tag>
<el-tag type="success" 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-button type="primary" icon="el-icon-edit" @click="showBox"></el-button>
<el-button type="success" icon="el-icon-location" @click="showProgressBox"></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]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background>
</el-pagination>
</el-card>
<!-- 修改地址对话框 -->
<el-dialog
title="修改地址"
:visible.sync="addressVisible"
width="50%"
@close="addressDialogClosed">
<el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
<el-form-item label="省市区/县" prop="address1">
<!-- 级联选择框 -->
<el-cascader
v-model="addressForm.address1"
:options="cityData"></el-cascader>
</el-form-item>
<el-form-item label="详细地址" 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-button type="primary" @click="addressVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- 物流地址对话框 -->
<el-dialog
title="物流地址"
:visible.sync="progressVisible"
width="50%">
<!-- 时间线组件 -->
<el-timeline>
<el-timeline-item
v-for="(activity, index) in progressInfo"
:key="index"
:timestamp="activity.time">
{{activity.context}}
</el-timeline-item>
</el-timeline>
</el-dialog>
</div>
</template>
<script>
import cityData from './citydata.js'
export default {
data () {
return {
// 1. 查询对象
queryInfo: {
query: '', // 查询条件
pagenum: 1, // 当前页码
pagesize: 10 // 当前页大小
},
// 2. 订单列表
orderlist: [],
// 3. 订单总数
total: 0,
// 4.控制修改地址对话框的显示与隐藏
addressVisible: false,
// 5.地址信息
addressForm: {
address1: [],
address2: ''
},
// 6.修改地址的验证规则
addressFormRules: {
address1: [{ required: true, message: '请选择省市区县', trigger: 'blur' }],
address2: [{ required: true, message: '请填写详细地址', trigger: 'blur' }]
},
// 7.城市数据
cityData,
// 8.控制物流对话框的显示与隐藏
progressVisible: false,
// 9.物流信息
progressInfo: [
{
time: '2018-05-10 09:39:00',
ftime: '2018-05-10 09:39:00',
context: '已签收,感谢使用顺丰,期待再次为您服务',
location: ''
},
{
time: '2018-05-10 08:23:00',
ftime: '2018-05-10 08:23:00',
context: '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
location: ''
},
{
time: '2018-05-10 07:32:00',
ftime: '2018-05-10 07:32:00',
context: '快件到达 [北京海淀育新小区营业点]',
location: ''
},
{
time: '2018-05-10 02:03:00',
ftime: '2018-05-10 02:03:00',
context: '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
location: ''
},
{
time: '2018-05-09 23:05:00',
ftime: '2018-05-09 23:05:00',
context: '快件到达 [北京顺义集散中心]',
location: ''
},
{
time: '2018-05-09 21:21:00',
ftime: '2018-05-09 21:21:00',
context: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
location: ''
},
{
time: '2018-05-09 13:07:00',
ftime: '2018-05-09 13:07:00',
context: '顺丰速运 已收取快件',
location: ''
},
{
time: '2018-05-09 12:25:03',
ftime: '2018-05-09 12:25:03',
context: '卖家发货',
location: ''
},
{
time: '2018-05-09 12:22:24',
ftime: '2018-05-09 12:22:24',
context: '您的订单将由HLA（北京海淀区清河中街店）门店安排发货。',
location: ''
},
{
time: '2018-05-08 21:36:04',
ftime: '2018-05-08 21:36:04',
context: '商品已经下单',
location: ''
}
]
}
},
created () {
this.getOrderList()
},
methods: {
// 1. 获取订单列表数据
async getOrderList() {
const { data: res } = await this.$http.get('orders', { params: this.queryInfo })
if (res.meta.status !== 200) {
this.$message.error('获取数据列表失败！')
}
console.log(res.data)
this.orderlist = res.data.goods
this.total = res.data.total
},
// 2. 页面大小变化时触发
handleSizeChange(newsize) {
this.queryInfo.pagesize = newsize
this.getOrderList()
},
// 3. 当前页码变化时触发
handleCurrentChange(newpage) {
this.queryInfo.pagenum = newpage
this.getOrderList()
},
// 4.点击编辑按钮,弹出修改地址对话框
showBox() {
this.addressVisible = true
},
// 5.关闭修改地址对话框，自动重置
addressDialogClosed() {
this.$refs.addressFormRef.resetFields()
},
// 6. 点击地址按钮，弹出物流对话框
async showProgressBox() {
// 获取物流数据
// const { data: res } = await this.$http.get('/kuaidi')
// if (res.meta.data !== 200) {
// return this.$message.error('获取物流进度失败！')
// }
// // 将获取的物流数据赋值给progressInfo，并显示物流对话框
// this.progressInfo = res.data
this.progressVisible = true
// console.log(this.progressInfo)
}
}
}
</script>
<style lang="less" scoped>
// @import '../../plugins/timeline/timeline.css';
// @import '../../plugins/timeline-item/timeline-item.css';
.el-cascader {
width: 100%;
height: 200px;
}
</style>
element.js
import Vue from 'vue'
import {
Button, Form, FormItem, Input, Message, Container, Header, Aside, Main,
Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col,
Table, TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select, Option,
Cascader, Alert, Tabs, TabPane, Step, Steps, CheckboxGroup, Checkbox, Upload, Timeline, TimelineItem
} from 'element-ui'
// import Timeline from './timeline/index'
// import TimelineItem from './timeline-item/index'
// 导入弹框提示组件。
// import { Message } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
Vue.use(Alert)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Step)
Vue.use(Steps)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Upload)
Vue.use(Timeline)
Vue.use(TimelineItem)
// 不同于其它组件，该组件需要全局挂载
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献10条内容
所有评论(0)