add page orders

Signed-off-by: Puqns67 <me@puqns67.icu>

src/main/kotlin/team8/fruitable/controller/page/OrderPage.kt

@@ -10,6 +10,7 @@ import org.springframework.web.bind.annotation.RequestParam
 import org.springframework.web.servlet.mvc.support.RedirectAttributes
 import team8.fruitable.controller.util.error
 import team8.fruitable.datebase.entity.Item
+import team8.fruitable.datebase.entity.Order
 import team8.fruitable.datebase.entity.User
 import team8.fruitable.datebase.repository.*
 
@@ -32,6 +33,20 @@ class OrderPage(
     ): String {
         model["isOrder"] = true
         val user = this.getCurrentUser(token) ?: return error(attributes, "查看订单列表", "账户未登录", "/login")
+        val orders = orderRepository.findByUser(user)
+        val result: MutableList<Triple<Order, String, String>> = mutableListOf()
+        orders.forEach { order ->
+            val names: MutableList<String> = mutableListOf()
+            order.items.forEach { names.add(it.name!!) }
+            result.add(
+                Triple(
+                    order,
+                    names.joinToString(", "),
+                    order.items.getOrNull(0)?.getPictureLink() ?: "/images/placeholder.png"
+                )
+            )
+        }
+        model["orders"] = result
         model["user"] = user
         return "orders"
     }

src/main/kotlin/team8/fruitable/datebase/repository/OrderRepository.kt

@@ -2,5 +2,8 @@ package team8.fruitable.datebase.repository
 
 import org.springframework.data.repository.CrudRepository
 import team8.fruitable.datebase.entity.Order
+import team8.fruitable.datebase.entity.User
 
-interface OrderRepository : CrudRepository<Order, Long>
+interface OrderRepository : CrudRepository<Order, Long> {
+    fun findByUser(user: User): List<Order>
+}

src/main/resources/static/scripts/redirect.js

@@ -10,4 +10,10 @@ window.addEventListener("DOMContentLoaded", () => {
             window.location.href = `/items/${v.getAttribute("tagid")}`
         })
     });
+
+    document.querySelectorAll("*[orderid]").forEach((v) => {
+        v.addEventListener("click", function () {
+            window.location.href = `/order/${v.getAttribute("orderid")}`
+        })
+    });
 });

src/main/resources/static/styles/order.less

@@ -30,10 +30,6 @@
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-
-            > .Title {
-
-            }
         }
     }
 }

src/main/resources/static/styles/orders.less

@@ -0,0 +1,42 @@
+.TabForm {
+    width: 640px;
+}
+
+.Order {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-radius: 15px;
+    background-color: teal;
+
+    > .Picture {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > img {
+            border-radius: 15px;
+            width: 100px;
+            height: 100px;
+        }
+    }
+
+    > .Infos {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        padding: 5px 10px;
+        color: wheat;
+
+        > .Info {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+    }
+}
+
+@media (min-width: 640px) {
+    #Contents {
+        width: 640px;
+    }
+}

src/main/resources/templates/cart.mustache

@@ -76,12 +76,6 @@
             {{/items}}
         </div>
 
-        <div class="TabFormItems Items">
-            <div class="TabFormItem">
-
-            </div>
-        </div>
-
         <div class="TabButtons">
             <button class="TabButton" type="submit">创建订单</button>
         </div>

src/main/resources/templates/orders.mustache

@@ -6,11 +6,14 @@
     <script type="text/javascript" src="/scripts/header.js"></script>
     <script type="text/javascript" src="/scripts/clock.js"></script>
     <script type="text/javascript" src="/scripts/top.js"></script>
+    <script type="text/javascript" src="/scripts/redirect.js"></script>
     <link type="image/x-icon" rel="icon" href="/images/favicon.ico">
     <!-- 页面公共的样式表 -->
     <link type="text/css" rel="stylesheet/less" href="/styles/header.less">
     <link type="text/css" rel="stylesheet" href="/styles/clock.css">
     <link type="text/css" rel="stylesheet" href="/styles/top.css">
+    <link type="text/css" rel="stylesheet/less" href="/styles/form.less">
+    <link type="text/css" rel="stylesheet/less" href="/styles/base.less">
     <!-- 页面特定的样式表 -->
     <link type="text/css" rel="stylesheet/less" href="/styles/orders.less">
     <!-- 外部小组件 -->
@@ -25,6 +28,27 @@
 
 <!-- 页面内容 -->
 <div id="Contents">
+    <div class="TabForm">
+        <div class="TabTitle">我的订单</div>
+
+        <div class="TabFormItems Orders">
+            {{#orders}}
+                <div class="TabFormItem Order" orderid="{{first.id}}">
+                    <div class="Picture">
+                        <img alt="商品图片" src="{{third}}">
+                    </div>
+                    <div class="Infos">
+                        <div class="Info">
+                            <div class="Title">{{second}}</div>
+                            <div class="TimeCreate">创建时间：{{first.createTime}}</div>
+                            <div class="TimeEdit">更新时间：{{first.editTime}}</div>
+                            <div class="PriceSum">总价格：{{first.priceSum}}</div>
+                        </div>
+                    </div>
+                </div>
+            {{/orders}}
+        </div>
+    </div>
 </div>
 
 </body>