一. 基礎元件
1. Cascader級聯選擇器
這裡以省市區控件為例，效果如下圖：
實作思路： 通過option綁定資料源，通過v-Model擷取選中後的值即可。
資料代碼和導入
<el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader> 2. Upload上傳
(1). 效果圖
(2). 代碼剖析
<el-upload :action="uploadURL" :headers="headerObj" list-type="picture" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess">
<el-button size="small" type="primary">點選上傳</el-button>
</el-upload> ① action屬性：綁定上傳位址。
uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload', ② headers屬性：設定上傳的請求頭部
headerObj: {
Authorization: window.sessionStorage.getItem('token')
} ③ list-type="picture" ：表示檔案清單的類型為圖檔。
④ on-preview方法：點選圖檔的回調 （下面方法表示點選預覽）
handlePreview (file) {
console.log(file)
this.previewPath = file.response.data.url
this.previewVisible = true
} ⑤ on-remove方法：圖檔移除的回調 （從數組中删除該圖檔路徑）
handleRemove (file) {
// console.log(file)
// 1. 擷取将要删除的圖檔的臨時路徑
const filePath = file.response.data.tmp_path
// 2. 從 pics 數組中，找到這個圖檔對應的索引值
const i = this.addForm.pics.findIndex(x => x.pic === filePath)
// 3. 調用數組的 splice 方法，把圖檔資訊對象，從 pics 數組中移除
this.addForm.pics.splice(i, 1)
console.log(this.addForm)
}, ⑥ on-success方法：上傳成功的回調 （将傳回的圖檔路徑加到數組中）
handleSuccess (response) {
console.log(response)
// 1. 拼接得到一個圖檔資訊對象
const picInfo = {
pic: response.data.tmp_path
}
// 2. 将圖檔資訊對象，push 到pics數組中
this.addForm.pics.push(picInfo)
console.log(this.addForm)
} 3. alert警告
(2).代碼分享
<el-alert show-icon title="注意：隻允許為第三級分類設定相關參數！" type="warning" :closable="false"></el-alert> 4. TimeLine時間線
(2). 實作思路：周遊一下即可
<!-- 時間線 -->
<el-timeline>
<el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time">
{{activity.context}}
</el-timeline-item>
</el-timeline> 資料格式：數組即可。
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: ''
}
] View Code
5. Steps步驟條
(1).效果圖
(2).實作思路
<el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
<el-step title="基本資訊"></el-step>
<el-step title="商品參數"></el-step>
<el-step title="商品屬性"></el-step>
<el-step title="商品圖檔"></el-step>
<el-step title="商品内容"></el-step>
<el-step title="完成"></el-step>
</el-steps> 剖析：
①. active屬性：設定目前激活步驟，0代表選中第一個，1代表選中第二個。（該選項的内容為number類型，activeIndex-0，可以将string類型的activeIndex轉化為number類型）
②. space屬性：每個 step 的間距
③. finish-status：設定結束步驟的狀态。
④. align-center：居中對齊
6. Tab頁籤
(2).代碼剖析
PS：用到form表單最好放到最外層包裹。
剖析：
① 如何綁定選中：通過外層的v-model和name屬性關聯，實作哪個子選項被選中。
② tab-position屬性：頁籤的位置。
③ before-leave事件：切換标簽的時候觸發，比如可以在裡面寫 from的驗證。她有兩個參數，分别是原标的name和新标簽的name。
④ tab-click事件：點選标簽事件。
PS: Tab和Step關聯
效果如下：
實作思路：
共同使用一個activeIndex參數即可，但是 tab需要的string，step需要的是number，是以需要 activeIndex-0，可以将string類型的activeIndex轉化為number類型。
7. Tag+input标簽切換
(1). 效果圖
(2). 代碼分享
二. 相關功能
1. 效果圖
2. 相關代碼
參數管理
<template>
<div>
<!-- 一. 面包屑導航區域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<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>
<!-- 1.警告區域 -->
<el-alert show-icon title="注意：隻允許為第三級分類設定相關參數！" type="warning" :closable="false"></el-alert>
<!-- 2. 選擇商品分類區域 -->
<el-row class="cat_opt">
<el-col>
<span>選擇商品分類：</span>
<!-- 選擇商品分類的級聯選擇框 props為配置項-->
<el-cascader v-model="selectedCateKeys" :options="catelist" :props="cateProps" @change="handleChange"
clearable>
</el-cascader>
</el-col>
</el-row>
<!-- 3. tab 頁簽區域 -->
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<!-- 3.1 添加動态參數的面闆 -->
<el-tab-pane label="動态參數" name="many">
<!-- 添加參數的按鈕 -->
<el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加參數
</el-button>
<!-- 動态參數表格 -->
<el-table :data="manyTableData" border stripe>
<!-- 展開行 -->
<el-table-column type="expand">
<template slot-scope="scope">
<!-- 循環渲染Tag标簽 -->
<el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i, scope.row)">
{{item}}
</el-tag>
<!-- 輸入的文本框 Vue2.x中自定義元件綁定原生事件必須使用 .native 修飾符 button除外-->
<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)"
@blur="handleInputConfirm(scope.row)">
</el-input>
<!-- 添加按鈕 -->
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag
</el-button>
</template>
</el-table-column>
<!-- 索引列 -->
<el-table-column type="index"></el-table-column>
<el-table-column label="參數名稱" prop="attr_name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">編輯
</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<!-- 3.2 添加靜态屬性的面闆 -->
<el-tab-pane label="靜态屬性" name="only">
<!-- 添加屬性的按鈕 -->
<el-button type="primary" size="mini" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加屬性
</el-button>
<!-- 靜态屬性表格 -->
<el-table :data="onlyTableData" border stripe>
<!-- 展開行 -->
<el-table-column type="expand">
<template slot-scope="scope">
<!-- 循環渲染Tag标簽 -->
<el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i, scope.row)">
{{item}}
</el-tag>
<!-- 輸入的文本框 -->
<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)"
@blur="handleInputConfirm(scope.row)">
</el-input>
<!-- 添加按鈕 -->
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag
</el-button>
</template>
</el-table-column>
<!-- 索引列 -->
<el-table-column type="index"></el-table-column>
<el-table-column label="屬性名稱" prop="attr_name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">編輯
</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-card>
<!-- 三. 添加參數的對話框 -->
<el-dialog :title="'添加' + titleText" :visible.sync="addDialogVisible" width="500px" @close="addDialogClosed">
<!-- 添加參數的對話框 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
<el-form-item :label="titleText" prop="attr_name">
<el-input v-model="addForm.attr_name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addParams">确 定</el-button>
</span>
</el-dialog>
<!-- 四. 修改參數的對話框 -->
<el-dialog :title="'修改' + titleText" :visible.sync="editDialogVisible" width="500px" @close="editDialogClosed">
<!-- 添加參數的對話框 -->
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
<el-form-item :label="titleText" prop="attr_name">
<el-input v-model="editForm.attr_name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editParams">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
// 商品分類資料
catelist: [],
// 級聯選擇框的配置項
cateProps: {
value: 'cat_id',
label: 'cat_name',
children: 'children',
expandTrigger: 'hover'
},
// 級聯選擇框雙向綁定到的數組
selectedCateKeys: [],
// 被激活的頁簽的名稱
activeName: 'many',
// 動态參數的資料
manyTableData: [],
// 靜态屬性的資料
onlyTableData: [],
// 控制添加對話框的顯示與隐藏
addDialogVisible: false,
// 添加參數的表單資料對象
addForm: {
attr_name: ''
},
// 添加表單的驗證規則對象
addFormRules: {
attr_name: [{
required: true,
message: '請輸入參數名稱',
trigger: 'blur'
}]
},
// 控制修改對話框的顯示與隐藏
editDialogVisible: false,
// 修改的表單資料對象
editForm: {},
// 修改表單的驗證規則對象
editFormRules: {
attr_name: [{
required: true,
message: '請輸入參數名稱',
trigger: 'blur'
}]
}
}
},
created () {
this.getCateList()
},
methods: {
// 1.擷取所有的商品分類清單
async getCateList () {
const {
data: res
} = await this.$http.get('categories')
if (res.meta.status !== 200) {
return this.$message.error('擷取商品分類失敗！')
}
this.catelist = res.data
console.log(this.catelist)
},
// 2.級聯選擇框選中項變化，會觸發這個函數
handleChange () {
this.getParamsData()
},
// 3.tab 頁簽點選事件的處理函數
handleTabClick () {
console.log(this.activeName)
this.getParamsData()
},
// 4.擷取參數的清單資料
async getParamsData () {
// 證明選中的不是三級分類，隻有選擇三級，下面的按鈕才可以點選
if (this.selectedCateKeys.length !== 3) {
// 清空下拉框和表格資料
this.selectedCateKeys = []
this.manyTableData = []
this.onlyTableData = []
return
}
// 證明選中的是三級分類
// console.log(this.selectedCateKeys)
// 根據所選分類的Id，和目前所處的面闆，擷取對應的參數
const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
params: {
sel: this.activeName
}
})
if (res.meta.status !== 200) {
return this.$message.error('擷取參數清單失敗！')
}
console.log(res.data)
// 處理展開後的資料标簽
res.data.forEach(item => {
item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
// 為每行展開動态添加兩個字段inputVisible和inputValue
// 控制文本框的顯示與隐藏
item.inputVisible = false
// 文本框中輸入的值
item.inputValue = ''
})
if (this.activeName === 'many') {
this.manyTableData = res.data
} else {
this.onlyTableData = res.data
}
},
// 5. 監聽添加對話框的關閉事件
addDialogClosed () {
this.$refs.addFormRef.resetFields()
},
// 6.點選按鈕，添加參數
addParams () {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
const {
data: res
} = await this.$http.post(
`categories/${this.cateId}/attributes`, {
attr_name: this.addForm.attr_name,
attr_sel: this.activeName
}
)
if (res.meta.status !== 201) {
return this.$message.error('添加參數失敗！')
}
this.$message.success('添加參數成功！')
this.addDialogVisible = false
this.getParamsData()
})
},
// 7.點選按鈕，展示修改的對話框
async showEditDialog (attr_id) {
// 查詢目前參數的資訊
const {
data: res
} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`, {
params: {
attr_sel: this.activeName
}
})
if (res.meta.status !== 200) {
return this.$message.error('擷取參數資訊失敗！')
}
this.editForm = res.data
this.editDialogVisible = true
},
// 8.重置修改的表單
editDialogClosed () {
this.$refs.editFormRef.resetFields()
},
// 9.點選按鈕，修改參數資訊
editParams () {
this.$refs.editFormRef.validate(async valid => {
if (!valid) return
const {
data: res
} = await this.$http.put(
`categories/${this.cateId}/attributes/${this.editForm.attr_id}`, {
attr_name: this.editForm.attr_name,
attr_sel: this.activeName
}
)
if (res.meta.status !== 200) {
return this.$message.error('修改參數失敗！')
}
this.$message.success('修改參數成功！')
this.getParamsData()
this.editDialogVisible = false
})
},
// 10. 根據Id删除對應的參數項
async removeParams (attr_id) {
const confirmResult = await this.$confirm(
'此操作将永久删除該參數, 是否繼續?',
'提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 使用者取消了删除的操作
if (confirmResult !== 'confirm') {
return this.$message.info('已取消删除！')
}
// 删除的業務邏輯
const {
data: res
} = await this.$http.delete(
`categories/${this.cateId}/attributes/${attr_id}`
)
if (res.meta.status !== 200) {
return this.$message.error('删除參數失敗！')
}
this.$message.success('删除參數成功！')
this.getParamsData()
},
// 11. 封裝将對 attr_vals 的操作，儲存到資料庫
async saveAttrVals (row) {
// 需要發起請求，儲存這次操作
const {
data: res
} = await this.$http.put(
`categories/${this.cateId}/attributes/${row.attr_id}`, {
attr_name: row.attr_name,
attr_sel: row.attr_sel,
attr_vals: row.attr_vals.join(' ')
}
)
if (res.meta.status !== 200) {
return this.$message.error('修改參數項失敗！')
}
this.$message.success('修改參數項成功！')
},
// 12.文本框失去焦點，或敲擊 Enter 都會觸發
async handleInputConfirm (row) {
if (row.inputValue.trim().length === 0) {
row.inputValue = ''
row.inputVisible = false
return
}
// 如果沒有return，則證明輸入的内容，需要做後續處理
row.attr_vals.push(row.inputValue.trim())
row.inputValue = ''
row.inputVisible = false
// 需要發起請求，儲存這次操作
this.saveAttrVals(row)
},
// 13.點選按鈕，展示文本輸入框
showInput (row) {
row.inputVisible = true
// 讓文本框自動獲得焦點
// $nextTick 方法的作用，就是當頁面上元素被重新渲染之後，才會指定回調函數中的代碼
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus() // 固定寫法
})
},
// 14. 删除對應的參數可選項
handleClose (i, row) {
row.attr_vals.splice(i, 1)
this.saveAttrVals(row)
}
},
computed: {
// 1.如果按鈕需要被禁用，則傳回true，否則傳回false
isBtnDisabled () {
if (this.selectedCateKeys.length !== 3) {
return true
}
return false
},
// 2.目前選中的三級分類的Id
cateId () {
if (this.selectedCateKeys.length === 3) {
return this.selectedCateKeys[2]
}
return null
},
// 3.動态計算标題的文本
titleText () {
if (this.activeName === 'many') {
return '動态參數'
}
return '靜态屬性'
}
}
}
</script>
<style lang="less" scoped>
.cat_opt {
margin: 15px 0;
}
.cat_opt {
margin: 15px 0;
}
.el-tag {
margin: 10px;
}
.input-new-tag {
width: 120px;
}
</style> 商品管理
<template>
<div>
<!-- 一. 面包屑導航區域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<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>
<!-- 2.1 搜尋和添加區域 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="請輸入内容" v-model="queryInfo.query" clearable @clear="getGoodsList" @keyup.enter.native="getGoodsList">
<el-button slot="append" icon="el-icon-search" @click="getGoodsList" >
</el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="goAddpage">添加商品</el-button>
</el-col>
</el-row>
<!-- 2.2 table表格區域 -->
<el-table :data="goodslist" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="商品名稱" prop="goods_name"></el-table-column>
<el-table-column label="商品價格(元)" prop="goods_price" width="95px"></el-table-column>
<el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
<el-table-column label="建立時間" prop="add_time" width="140px">
<template slot-scope="scope">
{{scope.row.add_time | dateFormat}}
</template>
</el-table-column>
<el-table-column label="操作" width="130px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.goods_id)">
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 2.3 分頁區域 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper" :total="total" background>
</el-pagination>
</el-card>
</div>
</template>
<script>
export default {
data () {
return {
// 查詢參數對象
queryInfo: {
query: '',
pagenum: 1,
pagesize: 10
},
// 商品清單
goodslist: [],
// 總資料條數
total: 0
}
},
created () {
this.getGoodsList()
},
methods: {
// 1. 根據分頁擷取對應的商品清單
async getGoodsList () {
const {
data: res
} = await this.$http.get('goods', {
params: this.queryInfo
})
if (res.meta.status !== 200) {
return this.$message.error('擷取商品清單失敗！')
}
// this.$message.success('擷取商品清單成功！');
console.log(res.data)
this.goodslist = res.data.goods
this.total = res.data.total
},
// 2. 監聽頁碼改變事件
handleSizeChange (newSize) {
this.queryInfo.pagesize = newSize
this.getGoodsList()
},
// 3. 監聽頁數改變事件
handleCurrentChange (newPage) {
this.queryInfo.pagenum = newPage
this.getGoodsList()
},
// 4. 删除商品事件
async removeById (id) {
const confirmResult = await this.$confirm(
'此操作将永久删除該商品, 是否繼續?',
'提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
if (confirmResult !== 'confirm') {
// return this.$message.info('已經取消删除！');
return
}
const {
data: res
} = await this.$http.delete(`goods/${id}`)
if (res.meta.status !== 200) {
return this.$message.error('删除失敗！')
}
this.$message.success('删除成功！')
this.getGoodsList()
},
// 5.添加頁碼跳轉
goAddpage () {
this.$router.push('/goods/add')
}
}
}
</script>
<style lang="less" scoped>
</style> 訂單管理
<template>
<div>
<!-- 一. 面包屑導航區域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<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>
<!-- 2.1 搜尋區域 -->
<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>
<!-- 2.2 訂單清單資料 其中height和v-adaptive用來處理表格自适應螢幕的-->
<el-table :data="orderlist" border stripe height="1" v-adaptive="{bottomOffset: 90}">
<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="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
<el-tag type="danger" v-else>未付款</el-tag>
</template>
</el-table-column>
<el-table-column label="是否發貨" prop="is_send">
<template slot-scope="scope">
<template>
{{scope.row.is_send}}
</template>
</template>
</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 size="mini" type="primary" icon="el-icon-edit" @click="showBox">省市區</el-button>
<el-button size="mini" type="success" icon="el-icon-location" @click="showProgressBox">物流詳情</el-button>
</template>
</el-table-column>
</el-table>
<!-- 2.3 分頁區域 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15,20,25]" :page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</el-card>
<!-- 三. 省市區對話框 -->
<el-dialog title="修改位址" :visible.sync="addressVisible" width="600px" @close="addressDialogClosed">
<el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
<el-form-item label="省市區/縣" prop="address1">
<el-cascader :options="cityData" v-model="addressForm.address1"></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="600px">
<!-- 時間線 -->
<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>
// 導入省市區資料，然後需要在data中對外開放
import cityData from './citydata.js'
export default {
data () {
return {
cityData,
queryInfo: {
query: '',
pagenum: 1,
pagesize: 10
},
total: 0,
orderlist: [],
addressVisible: false,
addressForm: {
address1: [],
address2: ''
},
addressFormRules: {
address1: [{
required: true,
message: '請選擇省市區縣',
trigger: 'blur'
}],
address2: [{
required: true,
message: '請填寫詳細位址',
trigger: 'blur'
}]
},
progressVisible: false,
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) {
return this.$message.error('擷取訂單清單失敗！')
}
this.total = res.data.total
this.orderlist = res.data.goods
},
// 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 () {
this.progressVisible = true
}
}
}
</script>
<style lang="less" scoped>
.el-cascader {
width: 100%;
}
</style> !
- 作 者 : Yaopengfei(姚鵬飛)
- 部落格位址 : http://www.cnblogs.com/yaopengfei/
- 聲 明1 : 如有錯誤，歡迎讨論，請勿謾罵^_^。
- 聲 明2 : 原創部落格請在轉載時保留原文連結或在文章開頭加上本人部落格位址，否則保留追究法律責任的權利。