fix: 修复商品页面描述中超链接显示问题

add: 新增商品页面爱发电官网样式
carolcoral · Dec 13, 2024 · 43b0acb · 43b0acb
1 parent 9f59e70
commit 43b0acb
Show file tree

Hide file tree

Showing 6 changed files with 303 additions and 14 deletions.
diff --git a/gradle.properties b/gradle.properties
@@ -1 +1 @@
-version=1.6.4
+version=1.6.5
diff --git a/src/main/java/site/xindu/afdian/config/AfdianRouter.java b/src/main/java/site/xindu/afdian/config/AfdianRouter.java
@@ -116,24 +116,34 @@ Mono<ServerResponse> renderPage2(ServerRequest request) {
         var model = new HashMap<String, Object>();
         defaultModel(model);
         return this.settingFetcher.get(SHOP).flatMap(setting -> {
-            String themeStyle = "shop1";
-            extractedShop(model);
+            String themeStyle = setting.get("themeStyle").asText();
+            if (StringUtils.isEmpty(themeStyle)) {
+                themeStyle = "shop1 ";
+            }
+            extractedShop(model, themeStyle);
             return templateNameResolver.resolveTemplateNameOrDefault(request.exchange(), themeStyle)
                 .flatMap(templateName -> ServerResponse.ok().render(templateName, model));
         });
     }
 
-    private void extractedShop(HashMap<String, Object> model) {
-        Mono<String> basicTitle =
-            this.settingFetcher.get(SHOP).map(setting ->
-                setting.get("basic_title").asText()
-            ).defaultIfEmpty("爱发电商品展示");
-        model.put("afdian_shop_basic_title", basicTitle);
-        Mono<String> secondTitle =
-            this.settingFetcher.get(SHOP).map(setting ->
-                setting.get("second_title").asText()
-            ).defaultIfEmpty("services");
-        model.put("afdian_shop_second_title", secondTitle);
+    private void extractedShop(HashMap<String, Object> model, String theme) {
+        // 不同样式存在不同的默认值
+        switch (theme) {
+            case "shop1":
+                Mono<String> basicTitle =
+                    this.settingFetcher.get(SHOP).map(setting ->
+                        setting.get("basic_title").asText()
+                    ).defaultIfEmpty("爱发电商品展示");
+                model.put("afdian_shop_basic_title", basicTitle);
+                Mono<String> secondTitle =
+                    this.settingFetcher.get(SHOP).map(setting ->
+                        setting.get("second_title").asText()
+                    ).defaultIfEmpty("services");
+                model.put("afdian_shop_second_title", secondTitle);
+                break;
+            default:
+                break;
+        }
     }
 
 }
diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
@@ -111,17 +111,30 @@ spec:
     - group: shop
       label: 商品页设置
       formSchema:
+        - $formkit: select
+          name: themeStyle
+          id: themeStyle
+          key: themeStyle
+          label: 商品展示页面样式
+          value: shop1
+          options:
+            - label: 默认展示页面
+              value: shop1
+            - label: 爱发电官网样式
+              value: shop2
         - $formkit: text
           name: basic_title
           label: 爱发电商品页大标题
           placeholder: 请输入爱发电商品页大标题
+          if: $get(themeStyle).value == 'shop1'
           validation: required
           help: 启用后必填
           value: 爱发电商品展示
         - $formkit: text
           name: second_title
           label: 爱发电商品页副标题
           placeholder: 请输入爱发电商品页副标题
+          if: $get(themeStyle).value == 'shop1'
           validation: required
           help: 启用后必填
           value: services
diff --git a/src/main/resources/static/afdian.shop.css b/src/main/resources/static/afdian.shop.css
@@ -1189,5 +1189,9 @@ so that it is smooth among other more minor things */
     height: 100%;
 }
 
+.card_paragraph a{
+    color: #fff;
+}
+
 
 
diff --git a/src/main/resources/static/afdian.shop2.css b/src/main/resources/static/afdian.shop2.css
@@ -0,0 +1,200 @@
+.vm-page {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.wrapper .content-wrapper {
+    display: flex;
+}
+
+.content-wrapper {
+    max-width: 1000px;
+    display: flex;
+    flex-direction: row;
+}
+
+.w100 {
+    width: 100%;
+}
+
+.mq.pr-0-16 {
+    padding-right: 0;
+}
+
+.mq.pl-0-16 {
+    padding-left: 0;
+}
+.flex-wrap {
+    flex-wrap: wrap;
+}
+.flex-box {
+    display: flex;
+}
+
+/* shop */
+.wrapper .vm-plan-shop-card {
+    margin-right: 24px;
+    margin-bottom: 24px;
+}
+
+.vm-plan-shop-card {
+    background: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 232px;
+    min-width: 232px;
+    position: relative;
+    padding-bottom: 60px;
+    border: #f7f7f7 0.5em solid;
+}
+
+.vm-plan-shop-card .cover {
+    padding-bottom: 100%;
+    height: auto;
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: 4px 4px 0 0;
+}
+
+.vm-plan-shop-card .tit {
+    padding: 8px 16px 0 16px;
+}
+.text-overflow-2 {
+    -webkit-line-clamp: 2;
+}
+.text-overflow-2, .text-overflow-3 {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+}
+.fwb {
+    font-weight: 700;
+}
+
+.vm-plan-shop-card .price {
+    position: absolute;
+    left: 16px;
+    bottom: 16px;
+    right: 16px;
+    background: #fff;
+}
+
+.mq.fs-20-16 {
+    font-size: 20px;
+}
+.flex-align-items-baseline {
+    align-items: baseline;
+}
+.flex-box {
+    display: flex;
+}
+.fwb {
+    font-weight: 700;
+}
+.black-8 {
+    color: rgba(0, 0, 0, .8) !important;
+}
+.mq.fs-14-12 {
+    font-size: 14px !important;
+}
+.ml4 {
+    margin-left: 4px !important;
+}
+.fs12 {
+    font-size: 12px !important;
+}
+.purple {
+    color: #946ce6;
+}
+.vm-plan-shop-card .price {
+    position: absolute;
+    left: 16px;
+    bottom: 16px;
+    right: 16px;
+    background: #fff;
+}
+.mq.fs-20-16 {
+    font-size: 20px;
+}
+.flex-align-items-baseline {
+    align-items: baseline;
+}
+.flex-bet, .flex-justify-content-space-between {
+    justify-content: space-between;
+}
+.flex-box {
+    display: flex
+;
+}
+.fwb {
+    font-weight: 700;
+}
+.vm-tag.circle {
+    border-radius: 1000px;
+    line-height: normal;
+}
+
+.vm-tag.purple {
+    background-color: #946ce6;
+}
+.vm-tag {
+    display: inline-flex;
+    background-color: #fcb239;
+    color: #fff;
+    font-size: 12px;
+    padding: 1px 6px;
+    border-radius: 2px;
+}
+.pl10 {
+    padding-left: 10px !important;
+}
+.pr10 {
+    padding-right: 10px !important;
+}
+.pb4 {
+    padding-bottom: 4px !important;
+}
+.pt4 {
+    padding-top: 4px !important;
+}
+.lh1 {
+    line-height: 1;
+}
+.nowrap {
+    white-space: nowrap;
+}
+.purple {
+    color: #946ce6;
+}
+.vm-plan-shop-card .img-pre {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    border-radius: 4px 4px 0 0;
+    /*max-width: 100%;*/
+    width: auto;
+    height: 100%;
+    transform: translate(-50%, -50%);
+}
+
+img {
+    width: 100%;
+}
+
+a.link_afdian:link {
+    color: black;
+    text-decoration: none;
+}
+
+a.link_afdian:visited {
+    color: black;
+    text-decoration: none;
+}
+
+a.link_afdian:hover {
+    color: black;
+    text-decoration: none;
+}
diff --git a/src/main/resources/templates/shop2.html b/src/main/resources/templates/shop2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width,initial-scale=1" name="viewport">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="#f7f9fe" name="theme-color">
+    <title>爱发电商品</title>
+    <link rel="stylesheet" th:href="@{/plugins/plugin-afdian/assets/static/afdian.shop2.css}" type="text/css"
+          media="screen">
+</head>
+<body>
+<div class="vm-page">
+    <section data-v-707b4ec4="" class="page-content-w100">
+        <div data-v-6c3c203f="" data-v-707b4ec4="" class="content-wrapper"><!----><!----><!---->
+            <div data-v-6c3c203f="" data-v-707b4ec4="" class="content-wrapper w100" style="display: block;">
+                <div data-v-6c3c203f="" data-v-707b4ec4="" class="flex-box flex-wrap mq pl-0-16 pr-0-16">
+                    <div data-v-5e932d90="" data-v-6c3c203f="" class="vm-plan-shop-card large" data-v-707b4ec4="" th:each="sales : ${afdianFinder.listPlansAndSales().data.sale_list}">
+                        <a th:href="${baseUrl} + '/item/' + ${sales.plan_id}" target="_blank" class="link_afdian">
+                            <div data-v-5e932d90="" class="cover">
+                                <img data-v-c86dd8fa="" data-v-5e932d90=""
+                                     th:src="${sales.pic}"
+                                     th:alt="pic" class="vm-pic img-pre">
+                            </div>
+                            <div data-v-5e932d90="" class="tit fwb text-overflow-2" th:text="${sales.name}"></div>
+
+                            <div data-v-5e932d90="" class="price mq fs-20-16 fwb flex-box flex-align-items-baseline"  th:if="${sales.has_time_limit_price==0}">
+                            <span data-v-5e932d90="" class="black-8">
+                                <span data-v-5e932d90="" class="mq fs-14-12">
+                                    ￥
+                                </span>
+                                <span th:text="${sales.price}"></span>
+                            </span>
+                                <div th:if="${sales.vip_price} != null">
+                                    <span data-v-5e932d90="" class="purple ml4 fs12" th:text="'¥' + ${sales.vip_price} + '会员价'"></span>
+                                </div>
+                            </div>
+
+                            <div data-v-5e932d90=""
+                                 class="price mq fs-20-16 fwb flex-box flex-align-items-baseline flex-bet"
+                                 th:if="${sales.has_time_limit_price==1}">
+                            <span data-v-5e932d90="" class="black-8">
+                                <span data-v-5e932d90="" class="mq fs-14-12">
+                                    ￥
+                                </span>
+                                <span th:text="${sales.price}"></span>
+                            </span>
+                                <div data-v-6cb2db58="" data-v-5e932d90=""
+                                     class="vm-tag nowrap purple circle pt4 pr10 pb4 pl10 lh1">
+                                    <span style="color: #fff;" th:text="限时特价"></span>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+</body>
+</html>