電商后臺管理系統(tǒng)的功能——訂單管理模塊

1.訂單管理概述

訂單管理模塊用于維護商品的訂單信息， 可以查看訂單的商品信息、物流信息，并且可以根據(jù)實際的運營情況對訂單做適當?shù)恼{(diào)整。

2.訂單列表

在components文件夾下創(chuàng)建一個order文件夾，然后再創(chuàng)建一個Order.vue組件

①訂單列表展示

訂單數(shù)據(jù)加載
訂單列表布局

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

②查看訂單地址信息

點擊編輯按鈕，實現(xiàn)省市聯(lián)動的效果：

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

省市區(qū)三級聯(lián)動效果
省市區(qū)數(shù)據(jù)格式分析

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

③查看訂單物流信息

調(diào)用接口獲取物流數(shù)據(jù)
實現(xiàn)物流信息列表效果

需要使用Timeline時間線組件：

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

那如何使用timeline組件呢？

導入timeline兩個組件：

使用方法還是和官網(wǎng)上的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創(chuàng)建一個新分支并切換到該分支上
使用git branch查看當前所處的分支，所有代碼的修改也一起被切換到了order子分支中
使用git status命令檢查當前分支的代碼狀態(tài)
使用git add .命令統(tǒng)一增加到暫存區(qū)
使用git commit -m "完成訂單管理功能的開發(fā)"命令把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后台管理系统——订单管理模块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。