天貓整站（簡易版）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>