Puqns67/fruitable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Puqns67 <me@puqns67.icu>
This commit is contained in:
Puqns67 2023-09-20 21:31:30 +08:00
parent 079a6820bf
commit e74b087df0
Signed by: Puqns67
GPG Key ID: 9669DF042554F536
10 changed files with 63 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/main/kotlin/team8/fruitable/controller/page/OrderPage.kt
View File

@ -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"

5
src/main/resources/static/scripts/index.js
View File

@ -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));
}));

13
src/main/resources/static/scripts/redirect.js Normal file
View File

@ -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")}`
})
});
});

31
src/main/resources/static/styles/item.less
View File

@ -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;
}
}

2
src/main/resources/static/styles/items.less
View File

@ -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;

1
src/main/resources/templates/index.mustache
View File

@ -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">
<!-- 页面公共的样式表 -->

11
src/main/resources/templates/item.mustache
View File

@ -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"

10
src/main/resources/templates/items.mustache
View File

@ -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>

10
src/main/resources/templates/order/create.mustache
View File

@ -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>

4
src/main/resources/templates/order/update.mustache
View File

@ -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>