💄 优化数据为空时的缺省显示内容

bruce-hxx · Dec 14, 2020 · 412de15 · 412de15
1 parent f5a0539
commit 412de15
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 26 deletions.
diff --git a/src/main/resources/static/mall/image/null-content.png b/src/main/resources/static/mall/image/null-content.png
diff --git a/src/main/resources/templates/mall/cart.html b/src/main/resources/templates/mall/cart.html
@@ -28,8 +28,7 @@
     <div class="cart_bg">
         <th:block th:if="${#lists.isEmpty(myShoppingCartItems)}">
             <div class="list center">
-                <!-- todo 无购物项时 换背景图 -->
-                无数据
+                <img style="position: absolute;margin-top: 16px;left: 45%;" th:src="@{/mall/image/null-content.png}">
             </div>
         </th:block>
         <th:block th:unless="${#lists.isEmpty(myShoppingCartItems)}">

diff --git a/src/main/resources/templates/mall/my-orders.html b/src/main/resources/templates/mall/my-orders.html
@@ -27,8 +27,13 @@ <h1 class="title">我的订单
                     <div class="box-bd">
                         <div id="J_orderList">
                             <ul class="order-list">
+                                <th:block th:if="${#lists.isEmpty(orderPageResult.list)}">
+                                    <img style="margin-top: 16px;"
+                                         th:src="@{/mall/image/null-content.png}">
+                                    <small><a th:href="@{/index}">&nbsp;&nbsp;&nbsp;&nbsp;去购物&gt;</a>
+                                    </small>
+                                </th:block>
                                 <th:block th:unless="${#lists.isEmpty(orderPageResult.list)}">
-                                    <!-- todo 无订单时 换背景图为无订单 -->
                                     <th:block th:each="order : ${orderPageResult.list}">
 
                                         <li class="uc-order-item uc-order-item-list">
@@ -98,29 +103,31 @@ <h1 class="title">我的订单
                         </th:block>
                         </ul>
                     </div>
-                    <div id="J_orderListPages">
-                        <div class="newbee-pagenavi">
-                            <th:block th:if="${orderPageResult.currPage-2 >=1}"><a
-                                    class="numbers"
-                                    th:href="@{'/orders?page=' + ${orderPageResult.currPage-2}}"
-                                    th:text="${orderPageResult.currPage -2}">1</a>
-                            </th:block>
-                            <th:block th:if="${orderPageResult.currPage-1 >=1}"><a
-                                    class="numbers"
-                                    th:href="@{'/orders?page=' + ${orderPageResult.currPage-1}}"
-                                    th:text="${orderPageResult.currPage -1}">1</a>
-                            </th:block>
-                            <a href="##" class="numbers current" th:text="${orderPageResult.currPage}">1</a>
-                            <th:block th:if="${orderPageResult.currPage+1<=orderPageResult.totalPage}"><a
-                                    class="numbers"
-                                    th:href="@{'/orders?page=' + ${orderPageResult.currPage+1}}"
-                                    th:text="${orderPageResult.currPage +1}">1</a></th:block>
-                            <th:block th:if="${orderPageResult.currPage+2<=orderPageResult.totalPage}"><a
-                                    class="numbers"
-                                    th:href="@{'/orders?page=' + ${orderPageResult.currPage+2}}"
-                                    th:text="${orderPageResult.currPage +2}">1</a></th:block>
+                    <th:block th:unless="${#lists.isEmpty(orderPageResult.list)}">
+                        <div id="J_orderListPages">
+                            <div class="newbee-pagenavi">
+                                <th:block th:if="${orderPageResult.currPage-2 >=1}"><a
+                                        class="numbers"
+                                        th:href="@{'/orders?page=' + ${orderPageResult.currPage-2}}"
+                                        th:text="${orderPageResult.currPage -2}">1</a>
+                                </th:block>
+                                <th:block th:if="${orderPageResult.currPage-1 >=1}"><a
+                                        class="numbers"
+                                        th:href="@{'/orders?page=' + ${orderPageResult.currPage-1}}"
+                                        th:text="${orderPageResult.currPage -1}">1</a>
+                                </th:block>
+                                <a href="##" class="numbers current" th:text="${orderPageResult.currPage}">1</a>
+                                <th:block th:if="${orderPageResult.currPage+1<=orderPageResult.totalPage}"><a
+                                        class="numbers"
+                                        th:href="@{'/orders?page=' + ${orderPageResult.currPage+1}}"
+                                        th:text="${orderPageResult.currPage +1}">1</a></th:block>
+                                <th:block th:if="${orderPageResult.currPage+2<=orderPageResult.totalPage}"><a
+                                        class="numbers"
+                                        th:href="@{'/orders?page=' + ${orderPageResult.currPage+2}}"
+                                        th:text="${orderPageResult.currPage +2}">1</a></th:block>
+                            </div>
                         </div>
-                    </div>
+                    </th:block>
                 </div>
             </div>
         </div>

diff --git a/src/main/resources/templates/mall/search.html b/src/main/resources/templates/mall/search.html
@@ -58,7 +58,7 @@
 <div class="goods_item center">
     <div class="main center">
         <th:block th:if="${#lists.isEmpty(pageResult.list)}">
-            未查询到商品
+            <img style="margin-top: 16px;padding: 16px 20px;" th:src="@{/mall/image/null-content.png}">
         </th:block>
         <th:block th:unless="${#lists.isEmpty(pageResult.list)}">
             <th:block th:each="goods : ${pageResult.list}">