updated

src/main/java/com/caimei/www/controller/unlimited/ArticleController.java

@@ -19,7 +19,9 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.server.ServerWebExchange;
 import org.thymeleaf.util.StringUtils;
 
+import java.lang.reflect.Array;
 import java.text.SimpleDateFormat;
+import java.util.Arrays;
 import java.util.Date;
 import java.util.List;
 
@@ -71,6 +73,8 @@ public class ArticleController extends BaseController {
         model.addAttribute("labelId", 0);
         model.addAttribute("pageNum", pageNum);
         model.addAttribute("isSearch", true);
+        System.out.println("articleImages" + cmBrandLandingList);
+        System.out.println("productSellNumbers" + productSellNumbers);
         //model.addAttribute("pagePath", String.format("/info/center-%s-1.html", id));
         return ARTICLE_LIST_PATH;
     }

src/main/resources/static/css/article/article.css

@@ -203,6 +203,8 @@ dl,dd,dt{zoom:1}
 	.row .new-blurb .introduction{margin-top: 10px; color:#777;font-size:14px;line-height:26px;min-height:52px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 	.content .other{width:284px;float:right}
 	.content .classify{height:50px;line-height:50px;border-left:solid 4px #FF5B00;font-size:20px;color:#333;padding-left:15px;padding-right:5px;background:#fff}
+
+
 	.content .classify .pre,.content .classify .next{display:inline-block;width:16px;height:16px;line-height:16px;color:#fff;text-align:center;float:right;margin-right:10px;margin-top:20px;cursor:pointer;background:#ccc;font-size:12px;font-weight:normal}
 	.content .classify .pre:before{content:"\276E"}
 	.content .classify .next:before{content:"\276F"}
@@ -212,9 +214,14 @@ dl,dd,dt{zoom:1}
 	.tag a{float:left;font-size:14px;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#FF5B00;text-align:center;border-radius:4px;margin:2px 12px 18px 0;cursor:pointer}
 	.tag a:hover{padding:0 13px;height:35px;line-height:35px;margin:0px 10px 17px 0}
 	.other .recommend{background:#fff;margin-bottom:20px}
+
+	/*感兴趣的商品*/
+	.other .recommend .classify .more-product {display: inline-flex;align-items: center;margin-left: 30px;}
+	.other .recommend .classify .more-product a {cursor: pointer; font-size: 12px;}
+
 	.other .recommend .row{padding:15px;border-top:solid 1px #ededed;border-bottom:none;padding-bottom:21px}
 	.row .new-img.xiao{width:100px;height:70px}
-	.row .new-img.xiao img{width:98px;height:68px}
+	.row .new-img.xiao img{width:98px;height:68px;object-fit: contain;}
 	.row .new-img.xiao img:hover{border:solid 1px #FF5B00}
 	.row .new-blurb.xiao{padding-left:110px;min-height:70px !important}
 	.row .new-blurb .shuoming{font-size:14px;line-height:25px;max-height:78px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

src/main/resources/static/js/article/drawer-footer.js

@@ -1,58 +1,46 @@
 let drawerFooter = new Vue({
     el: "#drawer-footer",
     data: {
-        hotRemendsList: [
-            {
-                id: 1,
-                content: [
-                    {
-                        content: '1223r342'
-                    },
-                    {
-                        content: '1223r342'
-                    },
-                    {
-                        content: '1223r342'
-                    }
-                ]
-            },
-            {
-                id: 2,
-                content: [
-                    {
-                        content: '1223r342'
-                    },
-                    {
-                        content: '1223r342'
-                    },
-                    {
-                        content: '1223r342'
-                    }
-                ]
-            },
-            {
-                id: 3,
-                content: [
-                    {
-                        content: '1223r342'
-                    },
-                    {
-                        content: '1223r342'
-                    },
-                    {
-                        content: '1223r342'
-                    }
-                ]
-            }
-        ],
+        recommend: [],
+        typeId: 0,
+        labelId: 0,
     },
     mounted() {
+        this.typeId = $("#typeId").val()*1;
+        this.labelId = $("#labelId").val()*1;
+        this.getRecommend(this.typeId, 1);
+        //换一批15秒请求一次
+        setInterval(function(){
+            if (this.recommend.hasNextPage) {
+                this.getRecommend(this.typeId, this.recommend.nextPage);
+            } else {
+                this.getRecommend(this.typeId, 1);
+            }
+        },15000);
+        if (this.labelId>0) {
+            // 添加一个标签点击量
+            $.get("/article/label/click", {id: this.labelId}, function(res){
+                console.log(res);
+            });
+        }
     },
     methods: {
     //    链接跳转
         handlerTramp($event) {
             window.location.href = "/info/articlerecommendation.html"
-        }
+        },
+        getRecommend: function(typeId, pageNum){
+            console.log(typeId, pageNum);
+            var _self = this;
+            $.getJSON("/article/recommend",{
+                typeId: typeId,
+                pageNum: pageNum
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommend= r.data;
+                }
+            });
+        },
     }
 })
 

src/main/resources/templates/article/components/article-drawer.html

@@ -9,15 +9,61 @@
 <input type="hidden" th:value="${coreServer}" id="coreServer">
 <input type="hidden" th:value="${agent}" id="userAgent">
   <div id="drawer-footer">
-    <div class="hot-recommend" v-for="(item, index) in hotRemendsList" :key="index">
+    <div class="hot-recommend">
       <div class="hot-recommend-title">
         <div>热门推荐</div>
-        <div @click="handlerTramp(item)"></div>
+        <div>
+          <a></a>
+        </div>
+      </div>
+      <div class="hot-recommend-content">
+        <div class="hot-recommend-content-item" v-for="item in recommend.list">
+          <div>
+            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+              <img :src="item.image"/>
+            </a>
+          </div>
+          <div>
+            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+              <p class="shuoming" v-html="item.title"></p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="hot-recommend">
+      <div class="hot-recommend-title">
+        <div>你可能感兴趣的商品</div>
+        <div>
+          <a>更多 ></a>
+        </div>
+      </div>
+      <div class="hot-recommend-content">
+        <div class="hot-recommend-content-item" th:each="product: ${productSellNumbers}">
+          <div>
+            <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+              <img th:src="product.image" style="width: 100%;height: 100%;object-fit: contain;" />
+            </a>
+          </div>
+          <div th:text="${product.name}"></div>
+        </div>
+      </div>
+    </div>
+    <div class="hot-recommend">
+      <div class="hot-recommend-title">
+        <div>您可能感兴趣的美业资料</div>
+        <div>
+          <a></a>
+        </div>
       </div>
       <div class="hot-recommend-content">
-        <div class="hot-recommend-content-item" v-for="(i, o) in item.content" :key="o">
-          <div></div>
-          <div>{{ i.content }}</div>
+        <div class="hot-recommend-content-item" th:each="product: ${productSellNumbers}">
+          <div>
+            <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+              <img src="/img/article/PC--pdf.png" style="width: 100%;height: 100%;object-fit: contain;" />
+            </a>
+          </div>
+          <div th:text="${product.name}"></div>
         </div>
       </div>
     </div>

src/main/resources/templates/article/components/article-sidebar.html

@@ -28,62 +28,43 @@
     <div v-if="isPC" class="recommend">
         <p class="classify readerSify">
             你可能感兴趣的商品
-            <span class="nextPreBtn">
-                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
-                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>
-            </span>
-        </p>
-        <div class="row" v-for="item in recommend.list">
-            <div class="new-img xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <img :src="item.image"/>
-                </a>
-            </div>
-            <div class="new-blurb xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <p class="shuoming" v-html="item.title"></p>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div v-if="isPC" class="recommend">
-        <p class="classify readerSify">
-            热门推荐
-            <span class="nextPreBtn">
-                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
-                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>
+            <span class="more-product">
+<!--                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>-->
+<!--                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>-->
+                <a>更多 ></a>
             </span>
         </p>
-        <div class="row" v-for="item in recommend.list">
+        <div class="row" th:each="product: ${productSellNumbers}" >
             <div class="new-img xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <img :src="item.image"/>
+                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+                    <img th:src="product.image"/>
                 </a>
             </div>
             <div class="new-blurb xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <p class="shuoming" v-html="item.title"></p>
+                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+                    <p class="shuoming" th:text="${product.name}"></p>
                 </a>
             </div>
         </div>
     </div>
     <div v-if="isPC" class="recommend">
         <p class="classify readerSify">
-            热门推荐
-            <span class="nextPreBtn">
-                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
-                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>
+            您可能感兴趣的美业资料
+            <span class="more-product">
+<!--                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>-->
+<!--                <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>-->
+                <a>更多 ></a>
             </span>
         </p>
-        <div class="row" v-for="item in recommend.list">
+        <div class="row" th:each="product: ${productSellNumbers}">
             <div class="new-img xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <img :src="item.image"/>
+                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+                    <img src="/img/article/PC--pdf.png"/>
                 </a>
             </div>
             <div class="new-blurb xiao">
-                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                    <p class="shuoming" v-html="item.title"></p>
+                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+                    <p class="shuoming" th:text="${product.name}"></p>
                 </a>
             </div>
         </div>

src/main/resources/templates/article/list.html

@@ -11,10 +11,13 @@
 <!--导航栏-->
 <template th:replace="article/components/article-header"></template>
 <div class="info-banner" id="Info-Banner" th:if="${isSearch}">
-    <div class="banner"></div>
+    <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1">
+        <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />
+    </div>
     <div class="sider-banner">
-        <div></div>
-        <div></div>
+        <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2">
+            <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />
+        </div>
     </div>
     <div class="info-Notice">
         <div class="notice-title">