電商后臺管理系統的功能——訂單管理模塊

1.訂單管理概述

訂單管理模塊用于維護商品的訂單信息， 可以查看訂單的商品信息、物流信息，并且可以根據實際的運營情況對訂單做適當的調整。

2.訂單列表

在components文件夾下創建一個order文件夾，然后再創建一個Order.vue組件

①訂單列表展示

訂單數據加載
訂單列表布局

const { data: res } = await this.$http.get('orders', { params: this.queryInfo })
if (res.meta.status !== 200) {
    return this.$message.error('獲取訂單列表失敗！ ')
}
this.orderList = res.data.goods
this.total = res.data.total

②查看訂單地址信息

點擊編輯按鈕，實現省市聯動的效果：

這個對話框我們并不會真正的去實現它的業務邏輯，而是在彈出對話框里實現省市聯動的效果即可。

省市區三級聯動效果
省市區數據格式分析

<el-cascader
　　:options="cityOptions"
　　v-model="selectedArea"
　　@change="changeProvince"
　　change-on-select
　　style=" 100%;">
</el-cascader>

③查看訂單物流信息

調用接口獲取物流數據
實現物流信息列表效果

需要使用Timeline時間線組件：

注意，timeline組件在2.6.0版本之前是沒有的，發布時間是2019-3-1，而項目中vue-cli-plugin-element插件發布時間是1月，我們用到的一些element組件都是基于該插件提供的，所以在我們的項目中并沒有提供時間線組件。

那如何使用timeline組件呢？

導入timeline兩個組件：

使用方法還是和官網上的API是一樣的

const { data: res } = await this.$http.get('/kuaidi/110121212622')
if (res.meta.status !== 200) {
    return this.$message.error('獲取物流進度失敗！ ')
}
this.wlList = res.data

此時并沒有樣式，需要導入timeline的樣式表

3.將訂單管理功能上傳到碼云

使用git checkout -border創建一個新分支并切換到該分支上
使用git branch查看當前所處的分支，所有代碼的修改也一起被切換到了order子分支中
使用git status命令檢查當前分支的代碼狀態
使用git add .命令統一增加到暫存區
使用git commit -m "完成訂單管理功能的開發"命令把order分支提交到本地倉庫中

本地order的代碼就是最新的了

使用git push -u originorder命令把本地的order分支推送到云端中

master是主分支，但是它的代碼還是舊的，應該立即把所有的代碼合并到主分支上

使用git checkout master命令切換到主分支
使用git mergeorder命令從主分支上把order分支上的代碼合并過來
使用git push命令將本地的master分支的代碼推送到云端，這樣master分支上的代碼也是最新的了

代碼地址：https://github.com/Emliy-zcy/Backstage-Management-System-Based-on-vue

總結

以上是生活随笔為你收集整理的vue后台管理系统——订单管理模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。