文章目錄

• 0. 準備工作
• 1.界面樣式
• • 1.1 界面布局
  • 1.2 導航區
• 2.訂單數據列表
• • 2.1 界面樣式
  • 2.2 數據添加
  • 2.3 方法實現
• 3.分頁區
• • 3.1 界面樣式
  • 3.2 數據添加
  • 3.3 方法實現
• 4.修改地址的對話框
• • 4.1 界面樣式
  • 4.2 數據添加
  • 4.3 方法實現
• 5.展示物流進度的對話框
• • 5.1 界面樣式
  • 5.2 數據添加
• 6.搜索與添加
• • 6.1 界面樣式
  • 6.2 數據添加
  • 6.3 方法實現
• 7.搜索與添加
• • 7.1 界面樣式
  • 7.2 數據添加
  • 7.3 方法實現

0. 準備工作

component下新建文件夾order下新建文件Order.vue，并在路由中引入文件
因為數據庫中少了些文件，所以要自己導入。
1 ）citydata.js
2 ) db.js
3 ) wuliudb.json

PS：這些文件太長，我就不放了。

1.界面樣式

1.1 界面布局

1.2 導航區

<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>

2.訂單數據列表

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><!-- 訂單數據列表 --><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="success" v-if="scope.pay_status === 1">已付款</el-tag><el-tag type="danger" 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-buttonicon="el-icon-edit"size="mini"type="primary"@click="showBox"></el-button><el-buttonicon="el-icon-location"size="mini"type="success"@click="showProgressBox"></el-button></template></el-table-column></el-table>

2.2 數據添加

queryInfo: {query: '',pagenum: 1,pagesize: 10},orderList: [],

2.3 方法實現

async getOrderList () {const { data: result } = await this.$http.get('orders', {params: this.queryInfo})if (result.meta.status !== 200) {return this.$message.error('獲取訂單列表失敗')}this.total = result.totalthis.orderList = result.data.goods},showBox () {this.addressVisible = true},showProgressBox () {this.progressInfo = this.dbthis.progressVisible = true}

3.分頁區

3.1 界面樣式

<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>

3.2 數據添加

total: 0,

3.3 方法實現

handleSizeChange (newSize) {this.queryInfo.pagesize = newSizethis.getOrderList()},handleCurrentChange (newPage) {this.queryInfo.pagenum = newPagethis.getOrderList()},

4.修改地址的對話框

4.1 界面樣式

<el-dialogtitle="修改地址":visible.sync="addressVisible"width="50%"@close="addressDialogClosed"><!-- 內容主題區 --><el-form:model="addressForm":rules="addressFormRules"ref="addressFormRef"label-width="100px"><el-form-itemlabel="省市區/縣"prop="address1"><el-cascader:options="cityData"v-model="addressForm.address1"></el-cascader></el-form-item><el-form-itemlabel="詳細地址"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-buttontype="primary" @click="addressVisible = false">確 定</el-button></span></el-dialog>

4.2 數據添加

addressVisible: false,addressForm: {address1: [],address2: ''},addressFormRules: {address1: [{ required: true, message: '請選擇省市區縣', trigger: 'blur' }],address2: [{ required: true, message: '請輸入詳細地址', trigger: 'blur' }]},cityData,

4.3 方法實現

addressDialogClosed () {this.$refs.addressFormRef.resetFields()},

5.展示物流進度的對話框

5.1 界面樣式

<el-dialogtitle="物流進度":visible.sync="progressVisible"width="50%"><!-- 內容主題區 時間線 --><el-timeline><el-timeline-itemv-for="(activity, index) in progressInfo":key="index":timestamp="activity.time">{{ activity.context }}</el-timeline-item></el-timeline></el-dialog>

5.2 數據添加

progressVisible: false,progressInfo: [],db

6.搜索與添加

6.1 界面樣式

6.2 數據添加

6.3 方法實現

7.搜索與添加

7.1 界面樣式

7.2 數據添加

7.3 方法實現

總結

以上是生活随笔為你收集整理的前端学习之vue+element-ui电商项目（九）订单管理的全部內容，希望文章能夠幫你解決所遇到的問題。

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