電商后台管理系統的功能——訂單管理模塊
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="width: 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 -b order創建一個新分支並切換到該分支上
- 使用git branch查看當前所處的分支，所有代碼的修改也一起被切換到了order子分支中
- 使用git status命令檢查當前分支的代碼狀態
- 使用git add .命令統一增加到暫存區
- 使用git commit -m "完成訂單管理功能的開發"命令把order分支提交到本地倉庫中
本地order的代碼就是最新的了
使用git push -u origin order命令把本地的order分支推送到雲端中
master是主分支，但是它的代碼還是舊的，應該立即把所有的代碼合並到主分支上
- 使用git checkout master命令切換到主分支
- 使用git merge order命令從主分支上把order分支上的代碼合並過來
- 使用git push命令將本地的master分支的代碼推送到雲端，這樣master分支上的代碼也是最新的了
代碼地址：https://github.com/Emliy-zcy/Backstage-Management-System-Based-on-vue