一代码
1新建Order.vue组件
<template><div><!-- 面包屑导航区 --><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><!-- 卡片视图区 --><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="success" v-if="scope.row.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|dataFormat}}</template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="showBox"></el-button><el-button type="success" 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="queryInfo.pagenum":page-sizes="[5, 10, 15]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 修改地址对话框--><el-dialogtitle="修改地址":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 :options="cityData" v-model="addressForm.address1"></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-dialogtitle="物流进度":visible.sync="progressVisible"width="50%"><!-- 时间线 --><el-timeline><el-timeline-itemv-for="(activity, index) in this.progressInfo":key="index":timestamp="activity.time">{{activity.context}}</el-timeline-item></el-timeline></el-dialog></div></template><script>/* 导入城市数据 */import cityData from './citydata'export default {name: "Order",data() {return {queryInfo: {query: '',pagenum: 1,pagesize: 10},total: 0,orderList: [],addressVisible: false,addressForm: {address1: [],address2: ''},addressFormRules: {address1: [{required: true, message: '请选择省市区县', trigger: 'blur'},],address2: [{required: true, message: '请填写详细地址', trigger: 'blur'},]},cityData: cityData,progressVisible:false,progressInfo:[]}},created() {this.getOrderList()},methods: {async getOrderList() {const {data: res} = await this.$http.get('orders', {params: this.queryInfo})if (res.meta.status !== 200) {return this.$message.error('获取订单列表失败')}this.total = res.data.totalthis.orderList = res.data.goods},handleSizeChange(newSize) {this.queryInfo.pagesize = newSizethis.getOrderList()},handleCurrentChange(newPage) {this.queryInfo.pagenum = newPagethis.getOrderList()},// 展示修改地址对话框showBox() {this.addressVisible = true},addressDialogClosed() {this.$refs.addressFormRef.resetFields()},// 物流进度展示async showProgressBox() {const {data: res} = await this.$http.get('/kuaidi/1106975712662')if (res.meta.status !== 200) {return this.$message.error("获取物流信息失败！")}this.progressInfo = res.datathis.progressVisible = trueconsole.log(this.progressInfo)}}}</script><style scoped>.el-cascader {width: 100%;}</style>
2修改路由index.js
import Vue from 'vue'import VueRouter from 'vue-router'// 导入登录组件import Login from "../components/Login";// 导入Home 组件import Home from "../components/Home";// 导入Welcome 组件import Welcome from "../components/Welcome";// 导入 Users 组件import Users from "../components/user/Users";// 导入权限列表 组件import Rights from "../components/power/Rights";// 导入角色列表 组件import Roles from "../components/power/Roles";// 导入商品分类 组件import Cate from "../components/goods/Cate";// 导入商品分类参数 组件import Params from "../components/goods/Params";// 导入商品列表组件import GoodsList from "../components/goods/List";// 导入增加商品名称组件import Add from "../components/goods/Add";// 导入订单组件import Order from "../components/order/Order";import {renderThumbStyle} from "element-ui/packages/scrollbar/src/util";Vue.use(VueRouter)const routes = [// 路由重定向,当访问/,就会重定向到/login{path: '/',redirect: '/login'},// 定义登录路由规则{path: '/login',component: Login},// 定义Home的路由规则{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome',component: Welcome},/* 用户管理 */{path: '/users',component: Users},/* 权限管理 */{path: '/rights',component: Rights},/* 角色管理 */{path: '/roles',component: Roles},/* 商品分类 */{path: '/categories',component: Cate},/* 商品分类参数 */{path: '/params',component: Params},/* 商品列表 */{path: '/goods',component: GoodsList},/* 增加商品 */{path: '/goods/add',component: Add},/* 订单 */{path: '/orders',component: Order},]}]const router = new VueRouter({routes})// 挂载路由导航守卫// to 将要访问的路径// from 代表从哪个路径跳转而来// next 是个函数，表示放行 next() 放行 next('/login') 强制跳转router.beforeEach((to, from, next) => {// 如果用户访问的登录页，直接放行if (to.path === '/login') return next();// 从 sessionStorage 中获取到保存的 token 值const tokenstr = window.sessionStorage.getItem('token')// 没有 token，强制跳转到登录页if (!tokenstr) return next('/login')next()})export default router
3修改element.js
import Vue from 'vue'// 按需分配各个组件import {Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu,Submenu,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,Tag,Tree,Select,Option,Cascader,Alert,Tabs,TabPane,Steps,Step,CheckboxGroup,Checkbox,Upload,Timeline,TimelineItem} 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(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(CheckboxGroup)Vue.use(Checkbox)Vue.use(Upload)Vue.use(Timeline)Vue.use(TimelineItem)// 这里和其他组件不一样，需要通过 prototype 全局挂载 MessageVue.prototype.$message = MessageVue.prototype.$confirm = MessageBox.confirm
