十八、订单列表

（1）通过路由渲染订单列表页面1. 创建order/Order.vue2. 添加路由（2）根据分页获取订单数据列表打印的res.data(请求的订单列表相关数据)（3）渲染订单table表（4）实现分页功能（5）显示修改地址对话框，实现省市区县数据联动效果1. 首先创建修改地址对话框。1.1 在对话框中的内容部分添加表单1.2 在表单中添加级联选择器（实现对省市区县的选择）通过导入cityda..

C.&H.

3346人浏览 · 2021-03-26 14:45:15

C.&H. · 2021-03-26 14:45:15 发布

（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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

C.&H.

@sunnnnh

已为社区贡献10条内容