后台管理系统【订单列表】

<template><div><!-- A面包屑导航区域 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>订单管理</el-breadcrumb-item><el-breadcrumb-item>订单列表</el-breadcrumb-item></el-breadcrumb><!-- B卡片视图区域 --><el-card><el-row :gutter="20"><el-col :span="8"><el-inputplaceholder="请输入内容"v-model="queryInfo.query"clearable@clear="getOrderList"><el-button @click="getOrderList" slot="append" icon="el-icon- search"></el-button></el-input></el-col></el-row><!-- 订单列表数据 --><el-table :data="orderlist"><el-table-column type="index" label="#"></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"><!-- {{scope.row}} --><el-tag v-if="scope.row.pay_satus==='1'" type="success">已付款</el-tag>    <el-tag v-else type="danger">未付款</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|dataFormat}} <!--  用到自定义的时间过滤器  --></template></el-table-column><el-table-column label="操作" width="130px"><!-- 操作  编辑 删除按钮--><template slot-scope="scope"><!-- {{scope.row}} --><el-button @click="showBox" size="mini" icon="el-icon-edit" type="primary"></el-button><el-button @click="showProgressBox" size="mini" icon="el-icon- location" type="danger"></el-button></template></el-table-column></el-table><!-- C 分页区域 --><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><!-- D 编辑地址的对话框 --><el-dialogtitle="修改地址":visible.sync="addressVisible"width="50%"@close="addressDialogClosed"><el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px" class="demo-ruleForm"><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="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></el-card></div>
</template><script>
import cityData from "./citydata.js"//城市的数据
export default {name:"Order",
data() {return {queryInfo:{query:"",pagenum:1,pagesize:10},total:0,orderlist:[],// 修改地址对话框的相关数据addressVisible:false,addressForm:{},addressFormRules:{address1:[{required:true,message:"请选择省市区县",trigger:"blur"}],address2:[{required:true,message:"请填写详细地址",trigger:"blur"}],},cityData:cityData,progressVisible:false,progressInfo:[]}
},
created() {this.getOrderList()
},
methods: {async getOrderList(){const {data:res}=await this.$http.get("orders",{params:this.queryInfo})if(res.meta.status!==200){return this.$message.error("获取订单列表失败");}this.$message.success('获取订单列表成功')console.log("订单管理的resdata",res);this.total=res.data.totalthis.orderlist=res.data.goods},handleSizeChange(newSize){this.queryInfo.pagesize=newSizethis.getOrderList()},handleCurrentChange(newPage){this.queryInfo.pagenum=newPagethis.getOrderList()},//展示编辑地址的对话框showBox(){this.addressVisible=true},addressDialogClosed(){this.$refs.addressFormRef.resetFields()},async showProgressBox(){const {data:res}=await this.$http.get("/kuaidi/1106975712662")if(res.meta.status!==200){return this.$message.error("获取物流进度失败")}  this.$message.success("获取物流进度成功")  console.log("这里是res.data",res.data);this.progressInfo=res.datathis.progressVisible=true}
},
computed:{}
}
</script><style lang="less" scoped>
.el-cascader{width: 100%;
}
</style>

后台管理系统【订单列表】相关推荐

电商后台管理系统订单列表模块
一代码 1 新建 Order.vue 组件 <template><div><el-breadcrumb separator-c ...
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档 ...
讲解后台管理系统之列表设计分享
我们大家都知道,在后台管理系统中列表设计一直是重中之重,因为它承载了用户想看.重要且关键的业务信息,所以设计时要格外注意信息降噪,让用户能够快速找到想看的信息,切勿盲目摆放,这里我也收集了一些注意的点 ...
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理作品名 ...
Spring Boot电商项目59：订单模块八：【后台：订单列表】接口；
说明: (1)本篇博客的主要内容是开发[后台:订单列表]接口: (2)本篇博客没什么难点:只需要注意:[前台:订单列表]接口是查询当前登录用户的订单数据:[后台:订单列表]接口是查询所有用户的订单数 ...
(全栈旅行足迹地图打卡网站 0-1)-旅行足迹后台管理系统(足迹列表)-09(WebGIS Vue-js-go-mysql)
本节主要介绍旅行足迹地图打卡项目网站的后台管理系统,因为对于前端的足迹需要对它进行增删改查,然后直接在前端代码上修改可行,但是不适用,所以我们需要建立一个后台管理系统,就能更加方便的对足迹进行增删改查 ...
电商后台管理系统用户列表
目录一代码 1 新增 Users.vue 2 修改路由 index.js 3 修改 Home.vue 4 修改全局 global.css 二测试三源码参考一代码 1 新增 Users.v ...
vue电商后台管理系统--订单管理篇
渲染订单table表格 <el-table :data="orderList" border stripe><el-ta ...
React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...

后台管理系统【订单列表】

后台管理系统【订单列表】相关推荐

最新文章

热门文章