天猫整站(简易版)SSM(十五)需要登录才能使用的功能
目录
1.2.1 点击确认收货后,访问地址/foreconfirmPay
1.2.2 ForeController.confirmPay()方法被调用
1.3.1 ForeController.orderConfirmed() 方法
1.4.1 ForeController.deleteOrder()
2.2.1 ForeController.doreview()
一、我的订单页操作
在我的订单页面,根据订单的不同状态,可以做出如下不同的操作:
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,
删除按钮
js
导致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>
2.2 提交评价
在评价产品页面点击提交评价,就把数据提交到了/foredoreview路径,导致ForeController.doreview方法被调用
2.2.1 ForeController.doreview()
- 获取参数oid
- 根据oid获取订单对象o
- 修改订单对象状态
- 更新订单对象到数据库
- 获取参数pid
- 根据pid获取产品对象
- 获取参数content (评价信息)
- 对评价信息进行转义
- 从session中获取当前用户
- 创建评价对象review
- 为评价对象review设置 评价信息,产品,时间,用户
- 增加到数据库
- 客户端跳转到/forereview: 评价产品页面,并带上参数showonly=true
@RequestMapping("foredoreview")
public String doreview(@RequestParam("oid") int oid,@RequestParam("pid") int pid,String content,HttpSession session){
Order order = orderService.get(oid);
order.setStatus(OrderService.FINISH);
orderService.update(order);
content = HtmlUtils.htmlEscape(content);
User user = (User) session.getAttribute("user");
Review review = new Review();
review.setUser(user);
review.setPid(pid);
review.setCreateDate(new Date());
review.setUid(user.getId());
review.setContent(content);
reviewService.add(review);
return "redirect:forereview?oid="+oid+"&showonly=true";
}
2.2.2 reviewPage.jsp
在reviewPage.jsp中,当参数showonly==true,那么就显示当前产品的所有评价信息