move some javascript code to dot js file, support display price sum at order create page

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

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

@@ -48,11 +48,15 @@ class OrderPage(
         val itemPairs = itemIds zip itemNumbers
         if (itemPairs.isEmpty()) return error(attributes, "创建订单", "您还未选择商品", "/login")
         val items: MutableList<Triple<Item, Int, Double>> = mutableListOf()
+        var priceSum = .0
         itemPairs.forEach {
-            val item = itemRepository.findById(it.first).orElse(null) ?: return error(attributes, "创建订单", "商品不存在")
+            val item =
+                itemRepository.findById(it.first).orElse(null) ?: return error(attributes, "创建订单", "商品不存在")
             items.add(Triple(item, it.second, item.price!! * it.second))
         }
+        items.forEach { priceSum += it.third }
         model["items"] = items
+        model["priceSum"] = priceSum
         model["payTypes"] = payTypeRepository.findAll()
         model["user"] = user
         return "order/create"
@@ -68,7 +72,9 @@ class OrderPage(
     ): String {
         val user = this.getCurrentUser(token) ?: return error(attributes, "查看订单", "账户未登录", "/login")
         val item = itemRepository.findById(id).orElse(null) ?: return error(attributes, "查看订单", "商品不存在")
-        model["items"] = arrayOf(Triple(item, number ?: 1, item.price!! * (number ?: 1)))
+        val priceSum = item.price!! * (number ?: 1)
+        model["items"] = arrayOf(Triple(item, number ?: 1, priceSum))
+        model["priceSum"] = priceSum
         model["payTypes"] = payTypeRepository.findAll()
         model["user"] = user
         return "order/create"

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

@@ -78,10 +78,6 @@ function nextBanner() {
     });
 }
 
-function redirectToItem() {
-    window.location.href = `/item/${this.getAttribute("itemid")}`;
-}
-
 function addToCartForItem(event) {
     window.location.href = `/action/cart/add/${this.parentElement.parentElement.getAttribute("itemid")}`;
     event.stopPropagation();
@@ -123,7 +119,6 @@ window.addEventListener("DOMContentLoaded", () => __awaiter(void 0, void 0, void
     // 设置定时器
     BannerIntervalID = window.setInterval(nextBanner, 8000);
 
-    document.querySelectorAll("*[itemid]").forEach(v => v.addEventListener("click", redirectToItem));
     Array.from(document.getElementsByClassName("AddToCart")).forEach(v => v.addEventListener("click", addToCartForItem));
     Array.from(document.getElementsByClassName("PlaceAnOrder")).forEach(v => v.addEventListener("click", createOrderForItem));
 }));

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

@@ -0,0 +1,13 @@
+window.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll("*[itemid]").forEach((v) => {
+        v.addEventListener("click", function () {
+            window.location.href = `/item/${v.getAttribute("itemid")}`
+        })
+    });
+
+    document.querySelectorAll("*[tagid]").forEach((v) => {
+        v.addEventListener("click", function () {
+            window.location.href = `/items/${v.getAttribute("tagid")}`
+        })
+    });
+});

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

@@ -55,12 +55,7 @@ div {
             font-family: "Normal", system-ui;
         }
 
-        .Description {
+        > .Price {
-            font-size: 20px;
-            font-family: "Normal", system-ui;
-        }
-
-        .Price {
             align-items: baseline;
             font-family: "Normal", system-ui;
             color: red;
@@ -68,6 +63,25 @@ div {
             font-weight: bold;
         }
 
+        .Tags {
+            flex: 9;
+            flex-wrap: wrap;
+
+            > .Tag {
+                margin: 4px 5px;
+                padding: 2px 5px;
+                border: 2px solid rgba(0, 225, 145, 0.8);
+                border-radius: 10px;
+                background-color: rgba(0, 84, 181, 0.8);
+                color: wheat;
+            }
+        }
+
+        > .Description {
+            font-size: 20px;
+            font-family: "Normal", system-ui;
+        }
+
         > .Number {
             flex-direction: row;
             justify-content: space-evenly;
@@ -85,11 +99,12 @@ div {
 
             > .Button {
                 flex: 1;
-                padding: 8px 30px;
+                margin: 20px 15px;
+                padding: 8px 0;
                 border: 3px solid skyblue;
                 border-radius: 10px;
                 background-color: cadetblue;
-                font-size: 24px;
+                font-size: 18px;
             }
         }
 

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

@@ -39,7 +39,7 @@
             > .Tag {
                 margin: 4px 5px;
                 padding: 2px 5px;
-                border: 2px @color_2 solid;
+                border: 2px solid @color_2;
                 border-radius: 10px;
                 background-color: @background_color_1;
                 color: wheat;

src/main/resources/templates/index.mustache

@@ -6,6 +6,7 @@
     <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>
     <script type="text/javascript" src="/scripts/index.js"></script>
     <link type="image/x-icon" rel="icon" href="/images/favicon.ico">
     <!-- 页面公共的样式表 -->

src/main/resources/templates/item.mustache

@@ -6,6 +6,7 @@
     <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">
@@ -39,14 +40,14 @@
                     {{item.price}}
                 {{/item.isRevoked}}
             </div>
+            <div class="Tags">
+                {{#item.tags}}
+                    <div class="Tag" tagid="{{id}}">{{name}}</div>
+                {{/item.tags}}
+            </div>
             {{#item.description}}
                 <span class="Description">{{item.description}}</span>
             {{/item.description}}
-            <div class="Tags">
-                {{#item.tags}}
-                    <div class="Tag">{{name}}</div>
-                {{/item.tags}}
-            </div>
             <div class="Number">
                 <label class="Title" for="number">数量</label>
                 <input class="Input" id="number" type="number" name="number" value="1"

src/main/resources/templates/items.mustache

@@ -6,6 +6,7 @@
     <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">
@@ -18,15 +19,6 @@
     <script src="/scripts/lib/less.min.js"></script>
     <script src="/scripts/lib/anime.min.js"></script>
     <script async src="/scripts/lib/explosion.min.js"></script>
-    <script>
-        window.addEventListener("DOMContentLoaded", () => {
-            document.querySelectorAll("*[tagid]").forEach((v) => {
-                v.addEventListener("click", function () {
-                    window.location.href = `/items/${v.getAttribute("tagid")}`
-                })
-            });
-        });
-    </script>
 </head>
 
 <body>

src/main/resources/templates/order/create.mustache

@@ -31,6 +31,12 @@
         <div class="TabTitle">确认订单</div>
 
         <div class="TabFormItems Infos">
+            <div class="TabFormItem PriceSum">
+                <label class="ItemName" for="price_sum">订单金额</label>
+                <input class="ItemInput" id="price_sum" type="text" name="price_sum" disabled
+                       value="{{priceSum}}"/>
+            </div>
+
             <div class="TabFormItem">
                 <label class="ItemName" for="name">姓名</label>
                 <input class="ItemInput" id="name" type="text" name="name" placeholder="请输入收货人姓名"