vue+elemenUI项目，仿照京东商城，完成电商网站的订单中心

效果展示：

页面布局

<el-tabs class="orders"><el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"active-text-color="#ff5001"><el-menu-item index="1" @click="getOrderList()"><span slot="title">全部订单</span></el-menu-item><el-menu-item index="2" @click="getOrderList([orderStatus.CREATED])"><span slot="title">已创建</span></el-menu-item><el-menu-item index="3" @click="getOrderList([orderStatus.WAIT])"><span slot="title">待付款</span></el-menu-item><el-menu-item index="4" @click="getOrderList([orderStatus.FINISH])"><span slot="title">已完成</span></el-menu-item><el-menu-item index="5" @click="getOrderList([orderStatus.CANCEL])"><span slot="title">已取消</span></el-menu-item><el-menu-item index="6" @click="getOrderList([orderStatus.REFUNDING])"><span slot="title">退款中</span></el-menu-item><el-menu-item index="7" @click="getOrderList([orderStatus.REFUND_SUCCESS])"><span slot="title">已退款</span></el-menu-item><el-menu-item index="8" @click="getOrderList([orderStatus.CLOSE])"><span slot="title">已关闭</span></el-menu-item></el-menu><div class="filterResult"><table><thead class="orderHead"><tr><th>订单详情</th><th>金额</th><th>状态</th><th>操作</th></tr></thead><tbody class="orderBody" v-for="(order,orderIndex) in orderData.records" :key="orderIndex"><tr class="separate"></tr><tr class="tr_th"><td colspan="4"><span class="dealTime" :title="order.createTime">下单时间：{{order.createTime}}</span>订单号：<span class="orderId">{{order.outTradeNo}}</span></td></tr><tr class="order" v-for="(item,itemIndex) in order.itemList" :key="itemIndex"><td class="orderMessage"><div class="goodItem"><div class="orderImg"><img v-lazy="GlobalFn.dealQiniuImg(item.coverPic)" alt="" @error="GlobalFn.show_default_image"></div><div class="orderName"><a :href="`item.html?id=${item.id}`">{{item.title}}</a></div></div></td><td class="amount" :rowspan="order.itemList.length" v-if="itemIndex===0"><span>￥{{order.money}}</span><br></td><td :rowspan="order.itemList.length" v-if="itemIndex===0">{{GlobalFn.dealOrderStatus(order.orderStatus)}}</td><td :rowspan="order.itemList.length" v-if="itemIndex===0" class="orderOperate"><div><span @click="showOrderDetail(order.id)">查看详情</span></div><div v-if="order.orderStatus===orderStatus.CREATED||order.orderStatus===orderStatus.WAIT"@click="cancelOrder(order.id)"><span>取消订单</span></div><div v-if="order.orderStatus===orderStatus.CREATED||order.orderStatus===orderStatus.WAIT"@click="payOrder(order)"><span>支付订单</span></div></td></tr></tbody></table><div v-bind:class="{noItems:orderData.records.length===0}"></div></div><!--      分页--><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page.pageIndex":page-size="page.pageSize":total="orderData.total":hide-on-single-page="true"layout="total, prev, pager, next, jumper"></el-pagination></div>
</el-tabs>


getOrderList: function (orderStatus) {if (orderStatus){this.chooseAllStatus = false}let {pageIndex, pageSize} = this.page;let orderQueryData = new Global.OrderQueryData(null, null, orderStatus)this.$api.transactionService.getOrderList(pageIndex, pageSize, orderQueryData).then(res => {let loadingInstance = Loading.service({target: ".filterResult",text: "正在加载数据...",customClass: ".loading"});if (res){loadingInstance.close()}if (res.flag) {this.orderData = res.data}})
},

样式：

<style scoped>
.noItems {background: url("/static/images/common/noItem.png") center no-repeat;background-size: contain;min-height: 400px;}
.orders {background-color: #ffffff;min-height: 500px;padding: 20px;}.orderHead {width: 100%;text-align: center;font-size: 12px;color: #666666;}.orderHead th {width: 150px;background: #f5f5f5;height: 32px;line-height: 32px;}.orderHead th:nth-child(1) {/*width: 570px;*/width: 700px;}.orderBody .separate {height: 20px;}.orderBody .tr_th {background: #f5f5f5;height: 30px;line-height: 30px;color: #AAAAAA;font-size: 12px;}/*设置边框*/.orderBody td {border: 1px solid #e5e5e5;}.orderBody .tr_th .dealTime {padding: 0 30px 0 20px;}.orderBody .orderId {color: #333333;}.order td {padding: 14px 0;font-size: 12px;}.order .goodItem div {float: left;}.order img {margin: 0 20px;width: 60px;height: 60px;}.order .orderName {width: 240px;height: 36px;line-height: 18px;color: #333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-right: 200px;}.order .orderName a {text-decoration: none;color: #333;transition: .3s;}.order .orderName a:hover {color: #ff5501;text-decoration: underline;}.order .orderNum {color: #AAAAAA;}/*设置金额状态操作文字居中，水平位置，颜色*/.order td:not(.orderMessage) {vertical-align: top;text-align: center;}.amount {color: #aaa;}.ftx-13 {display: block;width: 100px;margin: 5px auto;padding-top: 1px;border-top: solid 1px #E5E5E5;line-height: 19px;height: 19px;overflow: hidden;}/*设置操作一栏样式*/.order td.orderOperate {line-height: 20px;}.orderOperate span {cursor: pointer;transition: .3s;}.orderOperate span:hover {color: #ff5501;}.block {text-align: center;padding: 30px 0;}
</style>

vue+elemenUI项目，仿照京东商城，完成电商网站的订单中心相关推荐

电商交易之订单中心设计（一）
背景在电商交易中台团队工作了一段时间,越发觉自己需要学习的东西还有很多,因此想要定期整理.反思一下所见.所想,因此先从接触的订单中心开始. 订单是什么,我所理解,订单就是交易行为的记录.是用户某一刻 ...
WooCommerce 商城和电商网站变得简单：分步教程 + 资源
您想使用 WooCommerce 商城开展电子商务业务吗?需要非技术用户易于遵循的 WooCommerce 教程吗?如果是这样,那么您来对地方了. WooCommerce 是世界上最受欢迎的电子商务平 ...
电商交易之订单中心设计（二）
背景上篇说过订单基础设计,介绍了订单中心应该有哪些能力,大概有哪些字段,还有容量上的处理.上篇有点像在讲订单的数据模型,这篇来看看订单的业务模型. 价格模型订单的价格怎么计算得来?普通电商平台用户 ...
B2C电商网站提交订单支付流程
用户在提交订单后,调用支付服务,支付服务调用第三方支付平台,第三方支付平台成功后返回订单流程图如下:
电商网站之订单查询功能
分析在新增订单成功之后,用户会看到订单列表可以按时间查询一段时间范围内的订单列表,我们默认查询当前时间一个月以内的所有订单信息订单信息要包括oms_order和oms_order_item两个表 ...
订单支付和评论——基于Django框架的天天生鲜电商网站项目系列博客（十五）
系列文章目录需求分析--基于Django框架的天天生鲜电商网站项目系列博客(一) 网站框架搭建--基于Django框架的天天生鲜电商网站项目系列博客(二) 用户注册模块--基于Django框架的天天 ...
网站框架搭建——基于Django框架的天天生鲜电商网站项目系列博客（二）
系列文章目录需求分析--基于Django框架的天天生鲜电商网站项目系列博客(一) 网站框架搭建--基于Django框架的天天生鲜电商网站项目系列博客(二) 用户注册模块--基于Django框架的天天 ...
leyou商城项目搭建（1）-电商行业及乐优商城介绍
leyou商城项目搭建(1)-电商行业介绍 1.了解电商行业 1.1.项目分类 1.1.1.传统项目 1.1.2.互联网项目 1.2.电商行业的发展 1.2.1.钱景 1.2.2.数据 1.2.3.技 ...
含文档+PPT+源码等]精品基于PHP实现的商城电商网站[包运行成功]购物商城计算机毕设项目源码
目录一.项目介绍二.文档截图三.运行截图四.源码获取一.项目介绍 [含文档+PPT+源码等]精品基于PHP实现的商城电商网站>该项目含有源码.文档.PPT.配套开发软件.软件安装教程. ...

vue+elemenUI项目，仿照京东商城，完成电商网站的订单中心

vue+elemenUI项目，仿照京东商城，完成电商网站的订单中心相关推荐

最新文章

热门文章