From e74b087df08ef261726a9d8d635742746d3bf717 Mon Sep 17 00:00:00 2001
From: Puqns67 <me@puqns67.icu>
Date: Wed, 20 Sep 2023 21:31:30 +0800
Subject: [PATCH] move some javascript code to dot js file, support display
 price sum at order create page

Signed-off-by: Puqns67 <me@puqns67.icu>
---
 .../fruitable/controller/page/OrderPage.kt    | 10 ++++--
 src/main/resources/static/scripts/index.js    |  5 ---
 src/main/resources/static/scripts/redirect.js | 13 ++++++++
 src/main/resources/static/styles/item.less    | 31 ++++++++++++++-----
 src/main/resources/static/styles/items.less   |  2 +-
 src/main/resources/templates/index.mustache   |  1 +
 src/main/resources/templates/item.mustache    | 11 ++++---
 src/main/resources/templates/items.mustache   | 10 +-----
 .../resources/templates/order/create.mustache | 10 ++++--
 .../resources/templates/order/update.mustache |  4 +--
 10 files changed, 63 insertions(+), 34 deletions(-)
 create mode 100644 src/main/resources/static/scripts/redirect.js

diff --git a/src/main/kotlin/team8/fruitable/controller/page/OrderPage.kt b/src/main/kotlin/team8/fruitable/controller/page/OrderPage.kt
index ab14ba1..207e846 100644
--- a/src/main/kotlin/team8/fruitable/controller/page/OrderPage.kt
+++ b/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"
diff --git a/src/main/resources/static/scripts/index.js b/src/main/resources/static/scripts/index.js
index 8c1ac34..0d69d77 100644
--- a/src/main/resources/static/scripts/index.js
+++ b/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));
 }));
diff --git a/src/main/resources/static/scripts/redirect.js b/src/main/resources/static/scripts/redirect.js
new file mode 100644
index 0000000..9298fc2
--- /dev/null
+++ b/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")}`
+        })
+    });
+});
diff --git a/src/main/resources/static/styles/item.less b/src/main/resources/static/styles/item.less
index de9e063..f7d005a 100644
--- a/src/main/resources/static/styles/item.less
+++ b/src/main/resources/static/styles/item.less
@@ -55,12 +55,7 @@ div {
             font-family: "Normal", system-ui;
         }
 
-        .Description {
-            font-size: 20px;
-            font-family: "Normal", system-ui;
-        }
-
-        .Price {
+        > .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;
             }
         }
 
diff --git a/src/main/resources/static/styles/items.less b/src/main/resources/static/styles/items.less
index 6f60b4a..cda5330 100644
--- a/src/main/resources/static/styles/items.less
+++ b/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;
diff --git a/src/main/resources/templates/index.mustache b/src/main/resources/templates/index.mustache
index 749aaa0..87a93ec 100644
--- a/src/main/resources/templates/index.mustache
+++ b/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">
     <!-- 页面公共的样式表 -->
diff --git a/src/main/resources/templates/item.mustache b/src/main/resources/templates/item.mustache
index e9f8494..418c9f1 100644
--- a/src/main/resources/templates/item.mustache
+++ b/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"
diff --git a/src/main/resources/templates/items.mustache b/src/main/resources/templates/items.mustache
index 042c915..6ec6962 100644
--- a/src/main/resources/templates/items.mustache
+++ b/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>
diff --git a/src/main/resources/templates/order/create.mustache b/src/main/resources/templates/order/create.mustache
index b9c98fd..db08a73 100644
--- a/src/main/resources/templates/order/create.mustache
+++ b/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="请输入收货人姓名"
@@ -72,8 +78,8 @@
                             <div class="Title">{{first.name}}</div>
                             <div class="Prices">
                                 <span class="Price">{{first.price}}￥</span>
-                                <span class="Number">x{{second}}</span>
-                                <span class="PriceSum">= {{third}}￥</span>
+                                <span class="Number"> x {{second}}</span>
+                                <span class="PriceSum"> = {{third}}￥</span>
                             </div>
                         </div>
                         <span class="Description">{{first.description}}</span>
diff --git a/src/main/resources/templates/order/update.mustache b/src/main/resources/templates/order/update.mustache
index a248957..de5b6b0 100644
--- a/src/main/resources/templates/order/update.mustache
+++ b/src/main/resources/templates/order/update.mustache
@@ -95,8 +95,8 @@
                             <div class="Title">{{first.name}}</div>
                             <div class="Prices">
                                 <span class="Price">{{first.price}}￥</span>
-                                <span class="Number">x{{second}}</span>
-                                <span class="PriceSum">= {{third}}￥</span>
+                                <span class="Number"> x {{second}}</span>
+                                <span class="PriceSum"> = {{third}}￥</span>
                             </div>
                         </div>
                         <span class="Description">{{first.description}}</span>