add items page, fix an error when tag with blank string
Signed-off-by: Puqns67 <me@puqns67.icu>
This commit is contained in:
parent
8ef4d78d56
commit
079a6820bf
GPG Key ID:
9669DF042554F536
@ -56,7 +56,7 @@ class ItemEditorAction(
|
||||
}
|
||||
|
||||
private fun autoCreateTag(tags: String?): MutableList<Tag> {
|
||||
return this.autoCreateTag(tags?.split(" "))
|
||||
return this.autoCreateTag(tags?.split(" ")?.filter { it.isEmpty() })
|
||||
}
|
||||
|
||||
private fun uploadPicture(file: MultipartFile?): String? {
|
||||
|
||||
@ -17,7 +17,8 @@ class Pages(
|
||||
private val cartRepository: CartRepository,
|
||||
private val itemRepository: ItemRepository,
|
||||
private val bannerRepository: BannerRepository,
|
||||
private val recommendRepository: RecommendRepository
|
||||
private val recommendRepository: RecommendRepository,
|
||||
private val tagRepository: TagRepository
|
||||
) {
|
||||
private fun getCurrentUser(token: String?): User? {
|
||||
return token?.let(accountRepository::findByToken)
|
||||
@ -81,6 +82,24 @@ class Pages(
|
||||
): String {
|
||||
model["isItems"] = true
|
||||
this.getCurrentUser(token)?.let { model["user"] = it }
|
||||
model["items"] = itemRepository.findAll().filter { !it.isRevoked }
|
||||
model["tags"] = tagRepository.findAll()
|
||||
return "items"
|
||||
}
|
||||
|
||||
@RequestMapping("/items/{tag_id}")
|
||||
fun items(
|
||||
model: Model,
|
||||
attributes: RedirectAttributes,
|
||||
@CookieValue("TOKEN", required = false) token: String?,
|
||||
@PathVariable("tag_id") id: Long
|
||||
): String {
|
||||
model["isItems"] = true
|
||||
this.getCurrentUser(token)?.let { model["user"] = it }
|
||||
val tag =
|
||||
tagRepository.findById(id).orElse(null) ?: return error(attributes, "查找物品", "未知的标签", "/items")
|
||||
model["items"] = tag.items.filter { !it.isRevoked }
|
||||
model["tags"] = tagRepository.findAll()
|
||||
return "items"
|
||||
}
|
||||
|
||||
|
||||
@ -33,9 +33,3 @@ div {
|
||||
color: wheat;
|
||||
font-family: "Normal", system-ui;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#Contents {
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,3 +52,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#Contents {
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
145
src/main/resources/static/styles/items.less
Normal file
145
src/main/resources/static/styles/items.less
Normal file
@ -0,0 +1,145 @@
|
||||
@color_1: rgba(21, 255, 172, 0.8);
|
||||
@color_2: rgba(0, 225, 145, 0.8);
|
||||
@color_3: rgb(220, 220, 255);
|
||||
@color_4: red;
|
||||
@color_5: grey;
|
||||
@color_6: gold;
|
||||
@color_7: rgb(175, 175, 255);
|
||||
@font_family_1: "Normal", system-ui;
|
||||
@background_color_1: rgba(0, 60, 130, 0.8);
|
||||
@background_color_2: rgba(0, 84, 181, 0.8);
|
||||
@background_color_3: rgba(40, 150, 40, 0.2);
|
||||
|
||||
.Taber {
|
||||
flex-direction: column;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
background-color: teal;
|
||||
border: 3px @color_1 solid;
|
||||
border-radius: 15px;
|
||||
|
||||
> .Tab {
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
> .TabTitle {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .Tags {
|
||||
flex: 9;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .Tag {
|
||||
margin: 4px 5px;
|
||||
padding: 2px 5px;
|
||||
border: 2px @color_2 solid;
|
||||
border-radius: 10px;
|
||||
background-color: @background_color_1;
|
||||
color: wheat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Items {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .Item {
|
||||
flex: 0 0 32%;
|
||||
flex-direction: row;
|
||||
margin: 5px;
|
||||
background-color: @background_color_1;
|
||||
border-radius: 15px;
|
||||
height: 110px;
|
||||
|
||||
> .Picture {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 110px;
|
||||
width: 110px;
|
||||
|
||||
> img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
object-fit: cover;
|
||||
margin: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .Descriptions {
|
||||
flex: 1 0;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
|
||||
> span {
|
||||
font-family: @font_family_1;
|
||||
}
|
||||
|
||||
> .TitlePrices {
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
|
||||
> .Title {
|
||||
color: @color_3;
|
||||
font-size: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> .Price {
|
||||
color: @color_4;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
> .Description {
|
||||
color: @color_7;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
> .Buttons {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
> .Button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: @background_color_3;
|
||||
border: 1px solid rgba(100, 255, 100, 0.8);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
> .AddToCart {
|
||||
background-image: url("../images/add_to_cart.svg");
|
||||
}
|
||||
|
||||
> .PlaceAnOrder {
|
||||
background-image: url("../images/place_an_order.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
#Contents {
|
||||
width: 1280px;
|
||||
}
|
||||
}
|
||||
@ -37,3 +37,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#Contents {
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="List Link" {{#isIndex}}this{{/isIndex}}{{^isIndex}}href="/"{{/isIndex}}>
|
||||
<span class="Text">首页</span>
|
||||
</div>
|
||||
<div class="List Link" {{#isItem}}this{{/isItem}}{{^isItem}}href="/items"{{/isItem}}>
|
||||
<div class="List Link" {{#isItems}}this{{/isItems}}{{^isItems}}href="/items"{{/isItems}}>
|
||||
<span class="Text">商品</span>
|
||||
</div>
|
||||
<div class="List Blank"></div>
|
||||
|
||||
@ -6,19 +6,27 @@
|
||||
<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/footer.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/footer.less">
|
||||
<link type="text/css" rel="stylesheet/less" href="/styles/base.less">
|
||||
<!-- 页面特定的样式表 -->
|
||||
<link type="text/css" rel="stylesheet/less" href="/styles/item.less">
|
||||
<link type="text/css" rel="stylesheet/less" href="/styles/items.less">
|
||||
<!-- 外部小组件 -->
|
||||
<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>
|
||||
@ -27,9 +35,39 @@
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div id="Contents">
|
||||
<div class="Taber">
|
||||
<div class="Tab">
|
||||
<div class="TabTitle">标签</div>
|
||||
<div class="Tags">
|
||||
{{#tags}}
|
||||
<span class="Tag" tagid="{{id}}">{{name}}</span>
|
||||
{{/tags}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{>footer}}
|
||||
<!-- 内容本身 -->
|
||||
<div class="Items">
|
||||
{{#items}}
|
||||
<div class="Item" itemid="{{id}}">
|
||||
<div class="Picture">
|
||||
<img alt="商品图片" src="{{pictureLink}}"/>
|
||||
</div>
|
||||
<div class="Descriptions">
|
||||
<div class="TitlePrices">
|
||||
<span class="Title">{{name}}</span>
|
||||
<span class="Price">{{price}}￥</span>
|
||||
</div>
|
||||
<div class="Description">{{description}}</div>
|
||||
</div>
|
||||
<div class="Buttons">
|
||||
<div class="Button PlaceAnOrder"></div>
|
||||
<div class="Button AddToCart"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{/items}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user