电商后台管理系统订单列表模块

朱雀 2021-07-24 16:58 1248阅读 0赞

一 代码

1 新建 Order.vue 组件

  1. <template>
  2.     <div>
  3.         <!-- 面包屑导航区 -->
  4.         <el-breadcrumb separator-class="el-icon-arrow-right">
  5.             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6.             <el-breadcrumb-item>订单管理</el-breadcrumb-item>
  7.             <el-breadcrumb-item>订单列表</el-breadcrumb-item>
  8.         </el-breadcrumb>
  9.         <!-- 卡片视图区 -->
  10.         <el-card>
  11.             <el-row>
  12.                 <el-col :span="8">
  13.                     <el-input placeholder="请输入内容">
  14.                         <el-button slot="append" icon="el-icon-search"></el-button>
  15.                     </el-input>
  16.                 </el-col>
  17.             </el-row>
  19.             <!-- 订单列表数据-->
  20.             <el-table :data="orderList" border stripe>
  21.                 <el-table-column type="index"></el-table-column>
  22.                 <el-table-column label="订单编号" prop="order_number"></el-table-column>
  23.                 <el-table-column label="订单价格" prop="order_price"></el-table-column>
  24.                 <el-table-column label="是否付款" prop="pay_status">
  25.                     <template slot-scope="scope">
  26.                         <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
  27.                         <el-tag type="danger" v-else>未付款</el-tag>
  28.                     </template>
  29.                 </el-table-column>
  30.                 <el-table-column label="是否发货" prop="is_send"></el-table-column>
  31.                 <el-table-column label="下单时间" prop="create_time">
  32.                     <template slot-scope="scope">
  33.                         {
  34.    {scope.row.create_time|dataFormat}}
  35.                     </template>
  36.                 </el-table-column>
  37.                 <el-table-column label="操作">
  38.                     <template slot-scope="scope">
  39.                         <el-button type="primary" icon="el-icon-edit" size="mini" @click="showBox"></el-button>
  40.                         <el-button type="success" icon="el-icon-location" size="mini"
  41.                                    @click="showProgressBox"></el-button>
  42.                     </template>
  43.                 </el-table-column>
  44.             </el-table>
  45.             <!-- 分页区 -->
  46.             <el-pagination
  47.                     @size-change="handleSizeChange"
  48.                     @current-change="handleCurrentChange"
  49.                     :current-page="queryInfo.pagenum"
  50.                     :page-sizes="[5, 10, 15]"
  51.                     :page-size="queryInfo.pagesize"
  52.                     layout="total, sizes, prev, pager, next, jumper"
  53.                     :total="total">
  54.             </el-pagination>
  55.         </el-card>
  56.         <!-- 修改地址对话框-->
  57.         <el-dialog
  58.                 title="修改地址"
  59.                 :visible.sync="addressVisible"
  60.                 width="50%"
  61.                 @close="addressDialogClosed"
  62.         >
  63.             <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
  64.                 <el-form-item label="省市区/县" prop="address1">
  65.                     <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
  66.                 </el-form-item>
  67.                 <el-form-item label="详细地址" prop="address2">
  68.                     <el-input v-model="addressForm.address2"></el-input>
  69.                 </el-form-item>
  70.             </el-form>
  71.             <span slot="footer" class="dialog-footer">
  72.                 <el-button @click="addressVisible = false">取 消</el-button>
  73.                 <el-button type="primary" @click="addressVisible = false">确 定</el-button>
  74.             </span>
  75.         </el-dialog>
  77.         <!-- 物流进度对话框-->
  78.         <el-dialog
  79.                 title="物流进度"
  80.                 :visible.sync="progressVisible"
  81.                 width="50%"
  82.                 >
  83.             <!-- 时间线 -->
  84.             <el-timeline>
  85.                 <el-timeline-item
  86.                         v-for="(activity, index) in this.progressInfo"
  87.                         :key="index"
  88.                         :timestamp="activity.time">
  89.                     {
  90.    {activity.context}}
  91.                 </el-timeline-item>
  92.             </el-timeline>
  93.         </el-dialog>
  94.     </div>
  95. </template>
  97. <script>
  98.     /* 导入城市数据 */
  99.     import cityData from './citydata'
  101.     export default {
  102.         name: "Order",
  103.         data() {
  104.             return {
  105.                 queryInfo: {
  106.                     query: '',
  107.                     pagenum: 1,
  108.                     pagesize: 10
  109.                 },
  110.                 total: 0,
  111.                 orderList: [],
  112.                 addressVisible: false,
  113.                 addressForm: {
  114.                     address1: [],
  115.                     address2: ''
  116.                 },
  117.                 addressFormRules: {
  118.                     address1: [
  119.                         {required: true, message: '请选择省市区县', trigger: 'blur'},
  120.                     ],
  121.                     address2: [
  122.                         {required: true, message: '请填写详细地址', trigger: 'blur'},
  123.                     ]
  124.                 },
  125.                 cityData: cityData,
  126.                 progressVisible:false,
  127.                 progressInfo:[]
  128.             }
  129.         },
  130.         created() {
  131.             this.getOrderList()
  132.         },
  133.         methods: {
  134.             async getOrderList() {
  135.                 const {data: res} = await this.$http.get('orders', {params: this.queryInfo})
  136.                 if (res.meta.status !== 200) {
  137.                     return this.$message.error('获取订单列表失败')
  138.                 }
  140.                 this.total = res.data.total
  141.                 this.orderList = res.data.goods
  142.             },
  143.             handleSizeChange(newSize) {
  144.                 this.queryInfo.pagesize = newSize
  145.                 this.getOrderList()
  146.             },
  147.             handleCurrentChange(newPage) {
  148.                 this.queryInfo.pagenum = newPage
  149.                 this.getOrderList()
  150.             },
  151.             // 展示修改地址对话框
  152.             showBox() {
  153.                 this.addressVisible = true
  154.             },
  155.             addressDialogClosed() {
  156.                 this.$refs.addressFormRef.resetFields()
  157.             },
  158.             // 物流进度展示
  159.             async showProgressBox() {
  160.                 const {data: res} = await this.$http.get('/kuaidi/1106975712662')
  161.                 if (res.meta.status !== 200) {
  162.                     return this.$message.error("获取物流信息失败！")
  163.                 }
  164.                 this.progressInfo = res.data
  165.                 this.progressVisible = true
  166.                 console.log(this.progressInfo)
  167.             }
  168.         }
  169.     }
  170. </script>
  172. <style scoped>
  173.     .el-cascader {
  174.         width: 100%;
  175.     }
  176. </style>

2 修改路由 index.js

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. // 导入登录组件
  4. import Login from "../components/Login";
  5. // 导入Home 组件
  6. import Home from "../components/Home";
  7. // 导入Welcome 组件
  8. import Welcome from "../components/Welcome";
  9. // 导入 Users 组件
  10. import Users from "../components/user/Users";
  11. // 导入权限列表 组件
  12. import Rights from "../components/power/Rights";
  13. // 导入角色列表 组件
  14. import Roles from "../components/power/Roles";
  15. // 导入商品分类 组件
  16. import Cate from "../components/goods/Cate";
  17. // 导入商品分类参数 组件
  18. import Params from "../components/goods/Params";
  19. // 导入商品列表组件
  20. import GoodsList from "../components/goods/List";
  21. // 导入增加商品名称组件
  22. import Add from "../components/goods/Add";
  23. // 导入订单组件
  24. import Order from "../components/order/Order";
  25. import {renderThumbStyle} from "element-ui/packages/scrollbar/src/util";
  28. Vue.use(VueRouter)
  30. const routes = [
  31.     // 路由重定向,当访问/,就会重定向到/login
  32.     {
  33.         path: '/',
  34.         redirect: '/login'
  35.     },
  36.     // 定义登录路由规则
  37.     {
  38.         path: '/login',
  39.         component: Login
  40.     },
  41.     // 定义Home的路由规则
  42.     {
  43.         path: '/home',
  44.         component: Home,
  45.         redirect: '/welcome',
  46.         children: [
  47.             {
  48.                 path: '/welcome',
  49.                 component: Welcome
  50.             },
  51.             /* 用户管理 */
  52.             {
  53.                 path: '/users',
  54.                 component: Users
  55.             },
  56.             /* 权限管理 */
  57.             {
  58.                 path: '/rights',
  59.                 component: Rights
  60.             },
  61.             /* 角色管理 */
  62.             {
  63.                 path: '/roles',
  64.                 component: Roles
  65.             },
  66.             /* 商品分类 */
  67.             {
  68.                 path: '/categories',
  69.                 component: Cate
  70.             },
  71.             /* 商品分类参数 */
  72.             {
  73.                 path: '/params',
  74.                 component: Params
  75.             },
  76.             /* 商品列表 */
  77.             {
  78.                 path: '/goods',
  79.                 component: GoodsList
  80.             },
  81.             /* 增加商品 */
  82.             {
  83.                 path: '/goods/add',
  84.                 component: Add
  85.             },
  86.             /* 订单 */
  87.             {
  88.                 path: '/orders',
  89.                 component: Order
  90.             },
  92.         ]
  93.     }
  94. ]
  96. const router = new VueRouter({
  97.     routes
  98. })
  99. // 挂载路由导航守卫
  100. // to 将要访问的路径
  101. // from 代表从哪个路径跳转而来
  102. // next 是个函数，表示放行 next() 放行  next('/login') 强制跳转
  103. router.beforeEach((to, from, next) => {
  104.     // 如果用户访问的登录页，直接放行
  105.     if (to.path === '/login') return next();
  106.     // 从 sessionStorage 中获取到保存的 token 值
  107.     const tokenstr = window.sessionStorage.getItem('token')
  108.     // 没有 token，强制跳转到登录页
  109.     if (!tokenstr) return next('/login')
  110.     next()
  111. })
  113. export default router

3 修改 element.js

  1. import Vue from 'vue'
  2. // 按需分配各个组件
  3. import {
  4.     Button,
  5.     Form,
  6.     FormItem,
  7.     Input,
  8.     Message,
  9.     Container,
  10.     Header,
  11.     Aside,
  12.     Main,
  13.     Menu,
  14.     Submenu,
  15.     MenuItem,
  16.     Breadcrumb,
  17.     BreadcrumbItem,
  18.     Card,
  19.     Row,
  20.     Col,
  21.     Table,
  22.     TableColumn,
  23.     Switch,
  24.     Tooltip,
  25.     Pagination,
  26.     Dialog,
  27.     MessageBox,
  28.     Tag,
  29.     Tree,
  30.     Select,
  31.     Option,
  32.     Cascader,
  33.     Alert,
  34.     Tabs,
  35.     TabPane,
  36.     Steps,
  37.     Step,
  38.     CheckboxGroup,
  39.     Checkbox,
  40.     Upload,
  41.     Timeline,
  42.     TimelineItem
  43. } from 'element-ui'
  45. Vue.use(Button)
  46. Vue.use(Form)
  47. Vue.use(FormItem)
  48. Vue.use(Input)
  49. Vue.use(Container)
  50. Vue.use(Header)
  51. Vue.use(Aside)
  52. Vue.use(Main)
  53. Vue.use(Menu)
  54. Vue.use(Submenu)
  55. Vue.use(MenuItem)
  56. Vue.use(Breadcrumb)
  57. Vue.use(BreadcrumbItem)
  58. Vue.use(Card)
  59. Vue.use(Row)
  60. Vue.use(Col)
  61. Vue.use(Table)
  62. Vue.use(TableColumn)
  63. Vue.use(Switch)
  64. Vue.use(Tooltip)
  65. Vue.use(Pagination)
  66. Vue.use(Dialog)
  67. Vue.use(Tag)
  68. Vue.use(Tree)
  69. Vue.use(Select)
  70. Vue.use(Option)
  71. Vue.use(Cascader)
  72. Vue.use(Alert)
  73. Vue.use(Tabs)
  74. Vue.use(TabPane)
  75. Vue.use(Step)
  76. Vue.use(Steps)
  77. Vue.use(CheckboxGroup)
  78. Vue.use(Checkbox)
  79. Vue.use(Upload)
  80. Vue.use(Timeline)
  81. Vue.use(TimelineItem)
  82. // 这里和其他组件不一样，需要通过 prototype 全局挂载 Message
  83. Vue.prototype.$message = Message
  84. Vue.prototype.$confirm = MessageBox.confirm

二 效果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，1248人围观）

还没有评论，来说两句吧...

相关阅读