一、我的订单页操作
在我的订单页面，根据订单的不同状态，可以做出如下不同的操作：
1. 付款 —— 已经生成，但是未付款
2. 确认收货 —— 通过后台发货后
3. 评价 —— 确认收货后, 进行评价
4. 删除 —— 任意状态下
1.1 付款
点击直接跳转forealipay，携带参数订单id和总价。
1.2 确认收货
1.2.1 点击确认收货后，访问地址/foreconfirmPay
1.2.2 ForeController.confirmPay()方法被调用
- 获取参数oid
- 通过oid获取订单对象o
- 为订单对象填充订单项
- 把订单对象放在request的属性"o"上
- 服务端跳转到 confirmPay.jsp
@RequestMapping("foreconfirmPay")
public String confirmPay(Model model,int oid){
Order order = orderService.get(oid);
orderItemService.fill(order);
model.addAttribute("o",order);
return "fore/confirmPay";
}1.2.3 confirmPay.jsp
中间是订单确认业务页面 confirmPayPage.jsp
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/10/2
Time: 14:14
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/confirmPayPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>
1.2.4 confirmPayPage.jsp
显示订单的创建时间，付款时间和发货时间，以及订单号，收款人信息等
遍历订单项集合，显示其中的产品图片，产品标题，价格，数量，小计，总结信息
最后提供确认支付按钮，提交到/foreorderconfirmed路径
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/10/2
Time: 14:14
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<div class="confirmPayPageDiv">
<div class="confirmPayImageDiv">
<img src="${pageContext.request.contextPath}/img/site/comformPayFlow.png">
<div class="confirmPayTime1">
<fmt:formatDate value="${o.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
</div>
<div class="confirmPayTime2">
<fmt:formatDate value="${o.payDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
</div>
<div class="confirmPayTime3">
<fmt:formatDate value="${o.deliveryDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
</div>
</div>
<div class="confirmPayOrderInfoDiv">
<div class="confirmPayOrderInfoText">我已收到货，同意支付宝付款</div>
</div>
<div class="confirmPayOrderItemDiv">
<div class="confirmPayOrderItemText">订单信息</div>
<table class="confirmPayOrderItemTable">
<thead>
<th colspan="2">宝贝</th>
<th width="120px">单价</th>
<th width="120px">数量</th>
<th width="120px">商品总价 </th>
<th width="120px">运费</th>
</thead>
<c:forEach items="${o.orderItems}" var="oi">
<tr>
<td><img width="50px" src="${pageContext.request.contextPath}/img/productSingle_middle/${oi.product.productImage.id}.jpg"></td>
<td class="confirmPayOrderItemProductLink">
<a href="#nowhere">${oi.product.name}</a>
</td>
<td>￥<fmt:formatNumber type="number" value="${oi.product.originalPrice}" minFractionDigits="2"/></td>
<td>1</td>
<td><span class="conformPayProductPrice">￥<fmt:formatNumber type="number" value="${oi.product.promotePrice}" minFractionDigits="2"/></span></td>
<td><span>快递 ： 0.00 </span></td>
</tr>
</c:forEach>
</table>
<div class="confirmPayOrderItemText pull-right">
实付款： <span class="confirmPayOrderItemSumPrice">￥<fmt:formatNumber type="number" value="${o.total}" minFractionDigits="2"/></span>
</div>
</div>
<div class="confirmPayOrderDetailDiv">
<table class="confirmPayOrderDetailTable">
<tr>
<td>订单编号：</td>
<td>${o.orderCode} <img width="23px" src="${pageContext.request.contextPath}/img/site/confirmOrderTmall.png"></td>
</tr>
<tr>
<td>卖家昵称：</td>
<td>天猫商铺 <span class="confirmPayOrderDetailWangWangGif"></span></td>
</tr>
<tr>
<td>收货信息： </td>
<td>${o.address}，${o.receiver}， ${o.mobile}，${o.post} </td>
</tr>
<tr>
<td>成交时间：</td>
<td><fmt:formatDate value="${o.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
</tr>
</table>
</div>
<div class="confirmPayButtonDiv">
<div class="confirmPayWarning">请收到货后，再确认收货！否则您可能钱货两空！</div>
<a href="foreorderConfirmed?oid=${o.id}"><button class="confirmPayButton">确认支付</button></a>
</div>
</div>1.3 确认收货成功
通过上一步最后的确认支付按钮，提交到路径/foreorderConfirmed，导致ForeController.orderConfirmed()方法被调用
1.3.1 ForeController.orderConfirmed() 方法
- 获取参数oid
- 根据参数oid获取Order对象o
- 修改对象o的状态为等待评价，修改其确认支付时间
- 更新到数据库
- 服务端跳转到orderConfirmed.jsp页面
@RequestMapping("foreorderConfirmed")
public String orderConfirmed(int oid){
Order order = orderService.get(oid);
order.setStatus(OrderService.WAIT_REVIEW);
order.setConfirmDate(new Date());
orderService.update(order);
return "fore/orderConfirmed";
}1.3.2 orderConfirmed.jsp
中间是确认收货成功业务页面 orderConfirmedPage.jsp
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/10/2
Time: 14:27
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/orderConfirmedPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>
1.3.3 orderConfirmedPage.jsp
显示"交易已经成功，卖家将收到您的货款。
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/10/2
Time: 14:28
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<div class="orderFinishDiv">
<div class="orderFinishTextDiv">
<img src="${pageContext.request.contextPath}/img/site/orderFinish.png">
<span>交易已经成功，卖家将收到您的货款。</span>
</div>
</div>
1.4 删除
在我的订单页上点击删除按钮，根据 boughtPage中的ajax操作，会访问路径/foredeleteOrder，
导致ForeController.deleteOrder方法被调用
1.4.1 ForeController.deleteOrder()
- 获取参数oid
- 根据oid获取订单对象o
- 修改状态
- 更新到数据库
- 返回字符串"success"
@RequestMapping("foredeleteOrder")
@ResponseBody
public String deleteOrder(@RequestParam("oid") int oid){
Order order = orderService.get(oid);
order.setStatus(OrderService.DELETE);
orderService.update(order);
return "success";
}1.4.2 修改
boughtPage中的javascript代码获取返回字符串是success的时候，隐藏掉当前这行订单数据。
1.5 评价
下一节
二、评价产品
2.1 评价产品页面
通过点击评价按钮，来到路径/forereview，导致ForeController.review()方法被调用
2.1.1 ForeController.review()
- 获取参数oid
- 根据oid获取订单对象o
- 为订单对象填充订单项
- 获取第一个订单项对应的产品,因为在评价页面需要显示一个产品图片，那么就使用这第一个产品的图片了
- 获取这个产品的评价集合
- 为产品设置评价数量和销量
- 把产品，订单和评价集合放在request上
- 服务端跳转到 review.jsp
@RequestMapping("forereview")
public String review(Model model,@RequestParam("oid")int oid){
Order order = orderService.get(oid);
orderItemService.fill(order);
Product product = order.getOrderItems().get(0).getProduct();
List<Review> reviews = reviewService.list(product.getId());
productService.setSaleAndReviewNumber(product);
model.addAttribute("p", product);
model.addAttribute("o", order);
model.addAttribute("reviews", reviews);
return "fore/review";
}2.1.2 review.jsp
中间是产品业务页面 reviewPage.jsp
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/10/2
Time: 15:04
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/simpleSearch.jsp"%>
<%@include file="../include/fore/cart/reviewPage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>
2.1.3 reviewPage.jsp
在reviewPage.jsp中显示产品图片，产品标题，价格，产品销量，产品评价数量，以及订单信息等。
同时还显示出了该产品所有的评价，但是默认是隐藏的
<%--
Created by IntelliJ IDEA.
User:
Date: 2018/10/2
Time: 15:04
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<div class="reviewDiv">
<div class="reviewProductInfoDiv">
<div class="reviewProductInfoImg"><img width="400px" height="400px" src="${pageContext.request.contextPath}/img/productSingle/${p.productImage.id}.jpg"></div>
<div class="reviewProductInfoRightDiv">
<div class="reviewProductInfoRightText">
${p.name}
</div>
<table class="reviewProductInfoTable">
<tr>
<td width="75px">价格:</td>
<td><span class="reviewProductInfoTablePrice">￥<fmt:formatNumber type="number" value="${p.originalPrice}" minFractionDigits="2"/></span> 元 </td>
</tr>
<tr>
<td>配送</td>
<td>快递: 0.00</td>
</tr>
<tr>
<td>月销量:</td>
<td><span class="reviewProductInfoTableSellNumber">${p.saleCount}</span> 件</td>
</tr>
</table>
<div class="reviewProductInfoRightBelowDiv">
<span class="reviewProductInfoRightBelowImg"><img src="${pageContext.request.contextPath}/img/site/reviewLight.png" /></span>
<span class="reviewProductInfoRightBelowText" >现在查看的是 您所购买商品的信息
于<fmt:formatDate value="${o.createDate}" pattern="yyyy年MM月dd"/>下单购买了此商品 </span>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="reviewStasticsDiv">
<div class="reviewStasticsLeft">
<div class="reviewStasticsLeftTop"></div>
<div class="reviewStasticsLeftContent">累计评价 <span class="reviewStasticsNumber"> ${p.reviewCount}</span></div>
<div class="reviewStasticsLeftFoot"></div>
</div>
<div class="reviewStasticsRight">
<div class="reviewStasticsRightEmpty"></div>
<div class="reviewStasticsFoot"></div>
</div>
</div>
<c:if test="${param.showonly==true}">
<div class="reviewDivlistReviews">
<c:forEach items="${reviews}" var="r">
<div class="reviewDivlistReviewsEach">
<div class="reviewDate"><fmt:formatDate value="${r.createDate}" pattern="yyyy-MM-dd"/></div>
<div class="reviewContent">${r.content}</div>
<div class="reviewUserInfo pull-right">${r.user.anonymousName}<span class="reviewUserInfoAnonymous">(匿名)</span></div>
</div>
</c:forEach>
</div>
</c:if>
<c:if test="${param.showonly!=true}">
<div class="makeReviewDiv">
<form method="post" action="foredoreview">
<div class="makeReviewText">其他买家，需要你的建议哦！</div>
<table class="makeReviewTable">
<tr>
<td class="makeReviewTableFirstTD">评价商品</td>
<td><textarea name="content"></textarea></td>
</tr>
</table>
<div class="makeReviewButtonDiv">
<input type="hidden" name="oid" value="${o.id}">
<input type="hidden" name="pid" value="${p.id}">
<button type="submit">提交评价</button>
</div>
</form>
</div>
</c:if>
</div>