一、我的订单页

1.1. 页面效果

1.2 后台接口

1.3 页面改造

1.3.1 数据加载

1.3.2 分页条

1.4 测试

1.5 订单状态过滤

1.5.1 全部订单（16）

1.5.2 待付款（3）

1.5.3 待发货（4）

1.5.4 待收货（3）

1.5.5 待评价（2）

1.5.6 对比

二、基本操作

2.1 准备工作

2.1.1 编写修改订单状态的函数

2.1.2 订单状态修改

2.2 页面改造

2.3 测试

2.3.1 初始化数据

2.3.2 付款

2.3.4 提醒发货

2.3.5 确认收货

2.3.6 点击评价

2.3.7 取消订单

三、订单详情

3.1 页面效果

3.2 页面渲染

3.2.1 订单信息

3.2.2 订单内商品信息

3.2.3 订单状态图

一、我的订单页

1.1. 页面效果

通过订单的不同状态，来分页显示订单。

1.2 后台接口

接口已经写好，测试结果：

1.3 页面改造

1.3.1 数据加载

在created中调用数据加载函数loadOrder，因为需要对查询结果进行分页，所以改造原来的分页查询接口，填充分页信息

后台接口改造：

将页数也作为返回对象

1.3.2 分页条

<div class="sui-pagination pagination-large top-pages"><ul><li class="prev disabled"><a @click="prevPage">«上一页</a></li><li :class="{active:index(i) === query.page}" v-for="i in Math.min(5,totalPage)" :key="i"><a @click="query.page=index(i)">{{index(i)}}</a></li><li class="dotted" v-show="totalPage>5"><span>...</span></li><li :class="{next:true,disabled:query.page === totalPage}"><a @click="nextPage">下一页»</a></li></ul><div><span>共{{totalPage}}页&nbsp;</span><span>到第<input type="text" class="page-num" ref="page">页 <button class="page-confirm" @click="navPage">确定</button></span></div>
</div>

js代码：

方法

navPage(){this.query.page = this.$refs.page.value ;
},
index(i){if(this.query.page <= 3 || this.totalPage <= 5){// 如果当前页小于等于3或者总页数小于等于5return i;}else if (this.query.page > this.totalPage - 3) {//当前页码大于totalPage-3，应该从totalPage-5开始return this.totalPage - 5 + i;} else if(this.query.page > 3) {// 如果当前页大于3，应该从page-3开始return this.query.page - 3 + i;}
},
prevPage(){if(this.query.page > 1){this.query.page--}
},
nextPage(){if(this.query.page < this.totalPage){this.query.page++}
},

需要的变量

监听

当页数发生改变时，重新加载数据

watch:{'query':{deep:true,handler(){this.loadOrder();}}
}

1.4 测试

这个分页条与搜索页面的分页条是一模一样的，只不过换了一下监听对象。

1.5 订单状态过滤

1.5.1 全部订单（16）

1.5.2 待付款（3）

1.5.3 待发货（4）

1.5.4 待收货（3）

1.5.5 待评价（2）

1.5.6 对比

状态：1、未付款 2、已付款,未发货 3、已发货,未确认 4、交易成功 5、交易关闭 6、已评价

与数据库中的数据一致，去除状态5和6。

二、基本操作

2.1 准备工作

2.1.1 编写修改订单状态的函数

updateOrderState(orderId,status){ly.verifyUser().then(() => {ly.http.put("/order/"+orderId+"/"+status).then(() => {this.loadOrder();})}).catch(() => {this.gotoLogin();})},

2.1.2 订单状态修改

立即付款

携带订单号跳转支付页面，就修改订单状态为已付款代发货。

取消订单

提醒发货

确认收货

评价

2.2 页面改造

<td width="10%" class="center" :rowspan="o.orderDetails.length" v-if="j === 0"><ul class="unstyled"><li v-if="o.status === 1">等待买家付款</li><li v-if="o.status === 2">已付款</li><li v-if="o.status === 3">已发货</li><li v-if="o.status === 4">待评价</li><li v-if="o.status === 5">交易关闭</li><li v-if="o.status === 6">交易成功</li><li><a href="home-orderDetail.html" class="btn">订单详情 </a></li></ul>
</td>
<td width="10%" class="center" :rowspan="o.orderDetails.length" v-if="j === 0"><ul class="unstyled"><li v-if="o.status === 1"><a href="#" @click="payment(o.orderId,getTotalPrice(o))" class="sui-btn btn-info">立即付款</a></li><li v-if="o.status === 2"><a href="#" @click="deliver(o.orderId)" class="sui-btn btn-info">提醒发货</a></li><li v-if="o.status === 3"><a href="#" @click="receiveGoods(o.orderId)" class="sui-btn btn-info">确认收货</a></li><li v-if="o.status === 4"><a href="#" @click="review(o.orderId)" class="sui-btn btn-info">评价</a></li><li v-if="o.status === 3">4天23时后自动确认</li><li><a v-if="o.status === 1" href="javascript:void(0)" @click="cancelOrder(o.orderId)">取消订单</a></li></ul>
</td>

2.3 测试

2.3.1 初始化数据

2.3.2 付款

点击立即付款：

返回查看：

2.3.4 提醒发货

点击上边的提醒发货：

2.3.5 确认收货

点击确认收货，然后查看待评价页面：

2.3.6 点击评价

2.3.7 取消订单

点击取消订单：

结果：

三、订单详情

3.1 页面效果

3.2 页面渲染

3.2.1 订单信息

这里面的订单信息重点是显示各个阶段的时间，所以也就是订单的状态。根据订单号查询当前订单状态，然后进行渲染

查询订单状态

当查询订单对象成功后，再根据订单号查询订单状态。（应该是在订单对象中将订单状态进行填充，但是前期设计有问题，只能通过新增接口来解决）

ly.http.get("/order/"+orderId).then(({data}) => {this.detailOrder = data;//查询订单详情ly.http.get("/order/status/"+orderId).then(({data}) => {this.orderStatus = data;})});

查询结果：

页面渲染

收货地址和订单号通过detailOrder来渲染，其它的通过orderStatus来渲染

3.2.2 订单内商品信息

通过detailOrder中的orderDetails来进行渲染：

3.2.3 订单状态图

根据当前订单的状态渲染出对应的状态图。

封装对象orderState用来显示状态图。

准备数据

要显示的标题及对应的时间类型

封装

temp对象：

stateClass：设置样式（已完成：finished、当前：current、将来：todo）
staetTime：显示对应状态的时间
stateDay：显示对应状态的日期
satetTitle：显示对应状态的标题

createOrderState(data){for (let i = 1; i <= 5; i++){let temp = {stateClass: '',stateTime: '',stateDay: '',stateTitle: '',};temp.stateTitle = this.stateData[i-1];if (i === data.status){const t = this.formatDate(data[this.stateType[i-1]]).split(" ");temp.stateDay = t[0];temp.stateTime = t[1];temp.stateClass = "current";this.orderState.push(temp);continue ;}else if (i < data.status) {const t = this.formatDate(data[this.stateType[i-1]]).split(" ");temp.stateDay = t[0];temp.stateTime = t[1];if (i === 5){temp.stateClass = "finished last";}else {temp.stateClass = "finished";}this.orderState.push(temp);continue ;}else {if (i === 5) {temp.stateClass = "todo last";}else{temp.stateClass = "todo";}temp.stateDay = "";temp.stateTime = "";this.orderState.push(temp);continue ;}}
}

调用

渲染

效果

乐优商城（三十九）—— 订单中心相关推荐

乐优商城（十）用户注册
文章目录 1. 搭建用户微服务 1.1 用户微服务的结构 1.2 创建 leyou-user 1.3 创建 leyou-user-interface 1.4 创建 leyou-user-service ...
【javaWeb微服务架构项目——乐优商城day15】——会调用订单系统接口，实现订单结算功能，实现微信支付功能
0.学习目标会调用订单系统接口实现订单结算功能实现微信支付功能源码笔记及资料: 链接:https://pan.baidu.com/s/1_opfL63P1pzH3rzLnbFiNw 提取码:v ...
乐优商城之项目搭建(四)
文章目录 (一)项目分类 (二)电商行业 (三)专业术语 (四)项目介绍 (五)技术选型 (六)开发环境 (七)搭建后台环境:父工程 (八)搭建后台环境:eureka (九)搭建后台环境:zuul ( ...
乐优商城源码/数据库及笔记总结
文章目录 1 源码 2 笔记 2.1 项目概述 2.2 微服务 3 项目优化 4 项目或学习过程中涉及到的设计模式 5 安全问题 6 高内聚低耦合的体现 7 项目中待优化的地方 1 源码 Github ...
leyou商城项目搭建（1）-电商行业及乐优商城介绍
leyou商城项目搭建(1)-电商行业介绍 1.了解电商行业 1.1.项目分类 1.1.1.传统项目 1.1.2.互联网项目 1.2.电商行业的发展 1.2.1.钱景 1.2.2.数据 1.2.3.技 ...
学习乐优商城中遇到的坑
本人暑假期间学习了乐优商城这个项目,历时二十天,遇到了许多的麻烦,应该会有挺多人遇到.所以想记录一下,让大家跳坑. 首先,我建议jar包的版本,都选择和老师的一样,不然会出现一些莫名奇妙的报错. 在本 ...
WPF，Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形
原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...
乐优商城之分类查询品牌查询(八)
文章目录 (一)编写分类查询 (二)跨域问题 (三)cors跨域原理 (四)解决跨域问题 (五)品牌查询页面分析 (六)品牌查询后台代码 (七)分页查询排序的原理 (八)axios (一)编写分类查询 ...
[Python从零到壹] 三十九.图像处理基础篇之图像几何变换（镜像仿射透视）
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
乐优商城（05）--商品管理
乐优商城(05)–商品管理一.导入图片资源现在商品表中虽然有数据,但是所有的图片信息都是无法访问的,因此需要把图片导入到服务器中: 将images.zip文件上传至/leyou/static目录: ...

乐优商城（三十九）—— 订单中心

一、我的订单页

1.1. 页面效果

1.2 后台接口

1.3 页面改造

1.3.1 数据加载

1.3.2 分页条

1.4 测试

1.5 订单状态过滤

1.5.1 全部订单（16）

1.5.2 待付款（3）

1.5.3 待发货（4）

1.5.4 待收货（3）

1.5.5 待评价（2）

1.5.6 对比

二、基本操作

2.1 准备工作

2.1.1 编写修改订单状态的函数

2.1.2 订单状态修改

2.2 页面改造

2.3 测试

2.3.1 初始化数据

2.3.2 付款

2.3.4 提醒发货

2.3.5 确认收货

2.3.6 点击评价

2.3.7 取消订单

三、订单详情

3.1 页面效果

3.2 页面渲染

3.2.1 订单信息

3.2.2 订单内商品信息

3.2.3 订单状态图

乐优商城（三十九）—— 订单中心相关推荐

最新文章

热门文章