天貓整站(簡易版)SSM(十五)需要登入才能使用的功能
阿新 • • 發佈:2018-12-13
一、我的訂單頁操作
在我的訂單頁面,根據訂單的不同狀態,可以做出如下不同的操作: 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>