文章目录
0. 准备工作1.界面款式
2.订单数据列表
3.分页区
4.修改地址的对话框
5.展示物流进度的对话框
6.搜索与添加
7.搜索与添加
0. 准备工作
component下新建文件夹order下新建文件Order.vue，并在路由中引入文件
因为数据库中少了些文件，所以要自己导入。
1 ）citydata.js
2 ) db.js
3 ) wuliudb.json
PS：这些文件太长，我就不放了。
1.界面款式
1.1 界面规划
1.2 导航区
- <el-breadcrumbseparator-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.1 界面款式
- <el-row><el-col:span="8"><el-inputplaceholder="请输入内容"><el-buttonslot="append"icon="el-icon-search"></el-button></el-input></el-col></el-row><!-- 订单数据列表 --><el-table:data="orderList"borderstripe><el-table-columntype="index"></el-table-column><el-table-columnlabel="订单编号"prop="order_number"></el-table-column><el-table-columnlabel="订单价格"prop="order_price"></el-table-column><el-table-columnlabel="是否付款"prop="pay_status"><templateslot-scope="scope"><el-tagtype="success"v-if="scope.pay_status === 1">已付款</el-tag><el-tagtype="danger"v-else>未付款</el-tag></template></el-table-column><el-table-columnlabel="是否发货"prop="is_send"></el-table-column><el-table-columnlabel="下单时间"prop="create_time"><templateslot-scope="scope">
- {{ scope.row.create_time | dateFormat }}
- </template></el-table-column><el-table-columnlabel="操作"><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>
- queryInfo:{
- query:'',
- pagenum:1,
- pagesize:10},
-
- orderList:[],
- asyncgetOrderList(){const{ data: result }=awaitthis.$http.get('orders',{
- params:this.queryInfo
- })if(result.meta.status !==200){returnthis.$message.error('获取订单列表失败')}this.total = result.total
- this.orderList = result.data.goods
- },showBox(){this.addressVisible =true},showProgressBox(){this.progressInfo =this.db
- this.progressVisible =true}
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.3 方法实现
- handleSizeChange(newSize){this.queryInfo.pagesize = newSize
- this.getOrderList()},handleCurrentChange(newPage){this.queryInfo.pagenum = newPage
- this.getOrderList()},
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-inputv-model="addressForm.address2"></el-input></el-form-item></el-form><!-- 底部区域 --><spanslot="footer"class="dialog-footer"><el-button@click="addressVisible = false">取 消</el-button><el-buttontype="primary"@click="addressVisible = false">确 定</el-button></span></el-dialog>
- addressVisible:false,
- addressForm:{
- address1:[],
- address2:''},
- addressFormRules:{
- address1:[{ required:true, message:'请选择省市区县', trigger:'blur'}],
- address2:[{ required:true, message:'请输入详细地址', trigger:'blur'}]},
- cityData,
- addressDialogClosed(){this.$refs.addressFormRef.resetFields()},
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>
- progressVisible:false,
- progressInfo:[],
- db
6.1 界面款式
6.2 数据添加
6.3 方法实现
7.搜索与添加
7.1 界面款式
7.2 数据添加
7.3 方法实现 |
