updated

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

@@ -77,8 +77,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);
+//        System.out.println("archiveFiles" + archiveFiles);
+//        System.out.println("infoSelected" + infoSelected);
         //model.addAttribute("pagePath", String.format("/info/center-%s-1.html", id));
         return ARTICLE_LIST_PATH;
     }
@@ -199,23 +199,7 @@ public class ArticleController extends BaseController {
         return ERROR_PATH;
     }
 
-    /**
-     * 文章推荐和文章
-     */
-    @GetMapping("/info/articlerecommendation-{id}-{pageNum}.html")
-    public String toArticleRecommendation(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
-        List<BaseLink> typeList = articleService.getArticleTypes();
-        List<BaseLink> data = articleService.getArticleLabels().getData();
-        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
-        model.addAttribute("ads", Ads);
-        model.addAttribute("labels", data);
-        model.addAttribute("articleType", typeList);
-        model.addAttribute("pageNum", pageNum);
-        model.addAttribute("typeId", id);
-//        model.addAttribute("typeId", 0);
-        model.addAttribute("labelId", 0);
-        return ARTICLE_RECOMMENDATION;
-    }
+    
 
     /**
      * 获取文章热门标签

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

@@ -163,14 +163,16 @@ dl,dd,dt{zoom:1}
 	.info-banner {margin: 16px auto 0 auto;width: 1185px;height:384px;box-sizing: border-box;display: flex;justify-content: space-between;}
 	.info-banner .banner {width: 524px;border: 1px solid;}
 	.info-banner .sider-banner {width: 360px;display: flex;flex-direction: column;justify-content: space-between;}
-	.info-banner .info-Notice {width: 284px;border: 1px solid;background: #fff;}
-	.info-banner .sider-banner div {height: 49%;border: 1px solid;}
+	.info-banner .info-Notice {width: 284px;background: #fff;}
+	.info-banner .sider-banner div {height: 49%;}
 	.info-banner .info-Notice .notice-title {display: flex;justify-content: space-between;box-sizing: border-box;height: 48px;padding: 14px 16px;}
 	.info-banner .info-Notice .notice-title div:nth-child(1) {font-size: 16px;font-weight: bold;color: #333333;}
-	.info-banner .info-Notice .notice-content {height: calc(100% - 48px);padding: 0 30px;box-sizing: border-box;overflow: hidden;}
+	.info-banner .info-Notice .notice-content {height: calc(100% - 48px);padding: 0 20px;box-sizing: border-box;overflow: hidden;}
 	.info-banner .info-Notice .notice-content .notice-content-list {border-top: 1px solid #F0F0F0;}
-	.info-banner .info-Notice .notice-content .notice-content-li {padding: 14px 0;border-top: 1px solid #F0F0F0;list-style: disc;cursor: pointer;}
+	.info-banner .info-Notice .notice-content .notice-content-li {padding: 14px 0 14px 18px;border-top: 1px solid #F0F0F0;list-style: disc;cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color: #333333;position: relative;}
+	.info-banner .info-Notice .notice-content .notice-content-li:before {content: "";width: 6px;height: 6px;background: #ccc;position: absolute;left: 0;border-radius: 50%;top: calc(50% - 4px);}
 	.info-banner .info-Notice .notice-content .notice-content-li:hover {color: #FF5B00;}
+	.info-banner .info-Notice .notice-content .notice-content-li:hover:before {background: #FF5B00;}
 
 	.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:24px 0;border-bottom:solid 1px #ededed}
 	.row .new-img{position:absolute;width:210px;height:150px;margin-right:20px;background:#FFF url(/img/base/placeholder.png) no-repeat center center;}
@@ -202,7 +204,7 @@ dl,dd,dt{zoom:1}
 	.article .write{margin-left:5px;margin-right:30px}
 	.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{height:50px;line-height:50px;border-left:solid 4px #FF5B00;font-size:20px;color:#333;padding-left:15px;padding-right:5px;background:#fff; display: flex;justify-content: space-between;}
 
 
 	.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}
@@ -216,7 +218,7 @@ dl,dd,dt{zoom:1}
 	.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 {display: inline-flex;align-items: center;}
 	.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}

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

@@ -29,23 +29,21 @@
     color: #333333;
 }
 .hot-recommend .hot-recommend-title div:nth-child(2) {
-    width: 4.8vw;
     height: 4.8vw;
-    background: #E1E1E1;
     color: #fff;
     text-align: center;
     position: relative;
 }
-.hot-recommend .hot-recommend-title div:nth-child(2):after {
-    content: '\276F';
-    font-weight: normal;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 3.6vw;
-}
+/*.hot-recommend .hot-recommend-title div:nth-child(2):after {*/
+/*    content: '\276F';*/
+/*    font-weight: normal;*/
+/*    position: absolute;*/
+/*    right: 0;*/
+/*    top: 50%;*/
+/*    left: 50%;*/
+/*    transform: translate(-50%, -50%);*/
+/*    font-size: 3.6vw;*/
+/*}*/
 
 .hot-recommend .hot-recommend-content {
     height: calc(100% - 8vw);
@@ -69,13 +67,14 @@
 
 .hot-recommend .hot-recommend-content .hot-recommend-content-item div:nth-child(2) {
     width: 31.9vw;
-    height: 14.8vw;
     text-overflow:ellipsis;
     display:-webkit-box;
     -webkit-line-clamp:3;
     -webkit-box-orient:vertical;
     font-size: 2.9vw;
     color: #333333;
+    white-space: pre-wrap;
+    overflow: hidden;
 }
 
 .advertisement {

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

@@ -14,7 +14,6 @@
         width: 884px;
         background: #f5f5f5;
         min-height: 900px;
-        border: 1px solid;
     }
 
     /*公告和文件*/
@@ -46,6 +45,7 @@
         font-size: 16px;
         border-bottom: 1px solid #F0F0F0;
         position: relative;
+        cursor: pointer;
     }
     .infomationlist .list-mainData ul .item:before {
         content: "";
@@ -59,10 +59,40 @@
         border-radius: 50%;
     }
 
+    .infomationlist .list-mainData ul .item:hover {
+        color: #FF5B00;
+        background: #FFF8F5;
+    }
+    .infomationlist .list-mainData ul .item:hover:before {
+        background: #FF5B00;
+    }
+    .infomationlist .list-mainData ul .item:hover div {
+        color: #FF5B00 !important;
+    }
+
     .infomationlist .list-mainData ul .item div:nth-child(2) {
         color: #CCCCCC;
     }
 
+    .infomationlist .list-mainData ul .info-item {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #F0F0F0;
+        height: 112px;
+        color: #333333;
+        font-size: 18px;
+        cursor: pointer;
+    }
+
+    .infomationlist .list-mainData ul .info-item div:nth-child(1) {
+        width: 54px;
+        height: 60px;
+    }
+
+    .infomationlist .list-mainData ul .info-item div:nth-child(2) {
+        margin-left: 16px;
+    }
+
     .pageWrap {
         width: 100%;
         text-align: center;
@@ -183,6 +213,10 @@
         color: #333333;
         font-size: 3.2vw;
         margin-left: 3vw;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 66%;
     }
     .infomationlist ul .item div:nth-child(2) {
         color: #999999;
@@ -205,4 +239,22 @@
     .infomationlist ul .info-item:nth-child(2) {
         margin-left: 4.2vw;
     }
+
+    .infomationlist .list-mainData .more {
+        width: 26vw;
+        height: 7.2vw;
+        border: 1px solid #CCCCCC;
+        color: #909090;
+        position: relative;
+        font-size: 3.2vw;
+        margin: 3vw auto 0 auto;
+        line-height: 7.2vw;
+        text-align: center;
+    }
+    .infomationlist .list-mainData .more:after {
+        content: '\276F';
+        transform: rotate(90deg);
+        position: absolute;
+        right: 10%;
+    }
 }

src/main/resources/static/js/article/common.js

@@ -77,3 +77,49 @@ var articleSide = new Vue({
 
     }
 });
+
+var drawerFooter = new Vue({
+    el: "#drawer-footer",
+    data: {
+        recommend: [],
+        typeId: 0,
+        labelId: 0,
+    },
+    mounted() {
+        this.typeId = $("#typeId").val()*1;
+        this.labelId = $("#labelId").val()*1;
+        this.getRecommend(this.typeId, 1);
+        //换一批15秒请求一次
+        setInterval(() => {
+            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/static/js/article/drawer-footer.js

@@ -1,4 +1,5 @@
-let drawerFooter = new Vue({
+
+var drawerFooter = new Vue({
     el: "#drawer-footer",
     data: {
         recommend: [],

src/main/resources/static/js/article/list.js

@@ -380,6 +380,30 @@ var articleList = new Vue({
     }
 });
 
+let infoNotice = new Vue({
+    el: "#infoNotice",
+    data: {
+        newsList: [],
+    },
+    mounted() {
+        this.getNewList()
+    },
+    methods: {
+        hanldDetails(id) {
+            window.open('/news/details.html?id='+id);
+        },
+        getNewList() {
+            PublicApi.GetHomeInit({ source: 1 },({ data }) => {
+                if (isPC) {
+                    this.newsList = data.annlist
+                } else {
+                    this.newsList = data.annlist.slice(0,1)
+                }
+            });
+        }
+    }
+})
+
 let searchTop = new Vue({
     el: "#info-header",
     data: {

src/main/resources/static/js/article/recommendation.js

@@ -1,4 +1,4 @@
-let Recommendation = new Vue({
+var recommendation = new Vue({
     el: "#Recommendation",
     data: {
         status: {
@@ -8,7 +8,7 @@ let Recommendation = new Vue({
         },
         state: null,
         params: {
-            size: 8,
+            size: 20,
             num: 1,
             typeId: '',
             labelId: '',
@@ -30,15 +30,15 @@ let Recommendation = new Vue({
     },
     computed: {
         pageTotal: function () {
-            var total = Math.ceil(this.listRecord / this.params.size);
+            let total = Math.ceil(this.listRecord / this.params.size);
             return total > 0 ? total : 1;
         },
         showPageBtn: function () {
-            var total = Math.ceil(this.listRecord / this.params.size);
+            let total = Math.ceil(this.listRecord / this.params.size);
             total = total > 0 ? total : 1;
-            var index = this.params.num, arr = [];
+            let index = this.params.num, arr = [];
             if (total <= 6) {
-                for (var i = 1; i <= total; i++) {
+                for (let i = 1; i <= total; i++) {
                     arr.push(i);
                 }
                 return arr;
@@ -53,14 +53,71 @@ let Recommendation = new Vue({
             handler() {
                 const query = window.location.search.split('?')[1]
                 this.state = this.status[query]
-                console.log(this.state)
             },
             deep: true,
             immediate: true
         }
     },
     mounted() {
-        console.log("这个是更多")
+        this.initData()
     },
-    methods: {}
+    methods: {
+        initData() {
+            if (this.state===2) {
+                this.getNewList()
+            }
+        },
+        getNewList(num) {
+            if (isPC) {
+                let paramsArr = window.location.pathname.split(".")[0].split("-");
+                this.params.num = paramsArr[2]
+                const params = {
+                    pageSize: this.params.size,
+                    pageNum: this.params.num
+                }
+                PublicApi.GetNewsList(params, ({data}) => {
+                    this.listRecord = data.totalRecord
+                    this.listData = data.results
+                })
+            } else {
+                this.params.num = num || '1'
+                const params = {
+                    pageSize: this.params.size,
+                    pageNum: this.params.num
+                }
+                PublicApi.GetNewsList(params, ({data}) => {
+                    this.listRecord = data.totalRecord
+                    this.listData = [...this.listData, ...data.results]
+                })
+            }
+        },
+        //获取更多数据
+        handleMore (num) {
+            if (state===2) {
+                if (this.params.num < this.pageTotal) { // 获取列表数据
+                    this.params.num = this.params.num + 1;
+                    this.getNewList(num);
+                } else { //到底了
+                    this.noMore = true;
+                }
+            }
+        },
+        // 页码链接处理
+        paginationUrl (pageNum) {
+            let path = window.location.href;
+            const query = window.location.search
+            let paramsArr = window.location.pathname.split(".")[0].split("-");
+            let pageId = paramsArr.length >= 1 ? paramsArr[1] : '';
+            path = '/info/articlerecommendation-' + pageId + '-' + pageNum + '.html';
+            return path + query;
+        },
+        // 页面修改
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+    }
 })

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

@@ -53,17 +53,17 @@
       <div class="hot-recommend-title">
         <div>您可能感兴趣的美业资料</div>
         <div>
-          <a></a>
+          <a>更多 ></a>
         </div>
       </div>
       <div class="hot-recommend-content">
-        <div class="hot-recommend-content-item" th:each="product: ${productSellNumbers}">
+        <div class="hot-recommend-content-item" th:each="file: ${archiveFiles}">
           <div>
-            <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+            <a th:href="${file.ossUrl}" 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 th:text="${file.fileName}"></div>
         </div>
       </div>
     </div>
@@ -75,7 +75,7 @@
   </a>
 </div>
 
-  <script charset="utf-8" type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2"></script>
-  <script charset="utf-8" type="text/javascript" th:src="@{/js/article/drawer-footer.js}"></script>
+<!--  <script charset="utf-8" type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
+  <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js}"></script>
 </body>
 </html>

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

@@ -53,18 +53,18 @@
             <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>
+                <a href="/info/articlerecommendation-3-1.html?isDocument">更多 ></a>
             </span>
         </p>
-        <div class="row" th:each="product: ${productSellNumbers}">
+        <div class="row" th:each="file: ${archiveFiles}">
             <div class="new-img xiao">
-                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
+                <a th:href="${file.ossUrl}" target="_blank">
                     <img src="/img/article/PC--pdf.png"/>
                 </a>
             </div>
             <div class="new-blurb xiao">
-                <a th:href="'/product-'+${product.id}+'.html'" target="_blank">
-                    <p class="shuoming" th:text="${product.name}"></p>
+                <a th:href="${file.ossUrl}" target="_blank">
+                    <p class="shuoming" th:text="${file.fileName}"></p>
                 </a>
             </div>
         </div>

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

@@ -19,7 +19,7 @@
             <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />
         </div>
     </div>
-    <div class="info-Notice">
+    <div class="info-Notice" id="infoNotice" v-cloak>
         <div class="notice-title">
             <div>公告</div>
             <div>
@@ -28,7 +28,9 @@
         </div>
         <div class="notice-content">
             <ul class="notice-content-list">
-                <li class="notice-content-li">国家药监局关于医用透明质酸钠...</li>
+                <li class="notice-content-li" v-for="(list ,index) in newsList" :key="index" @click="hanldDetails(list.id)">
+                    {{ list.title }}
+                </li>
             </ul>
         </div>
     </div>
@@ -64,9 +66,11 @@
                     </div>
                 </div>
                 <div class="featured-content">
-                    <div v-for="item in featuredList" :key="item.id" class="item-content">
-                        <div class="item-img"></div>
-                        <div class="item-title">{{item.content}}</div>
+                    <div class="item-content" th:each="featured: ${infoSelected}">
+                        <div class="item-img">
+                            <img th:src="${featured.image}" style="width: 100%;height: 100%;"/>
+                        </div>
+                        <div class="item-title" th:text="${featured.title}"></div>
                     </div>
                 </div>
             </div>

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

@@ -31,23 +31,54 @@
       <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>
     </div>
   </div>
-  <div class="infomationlist" v-if="state == 2 || state == 0">
+  <div class="infomationlist" v-else>
     <div class="title" v-if="state == 2">
       <div>所有公告</div>
     </div>
     <div class="list-mainData">
       <ul v-if="state == 2">
-        <li class="item">
-          <div>12月德玛莉直播秒杀活动即将开始</div>
-          <div>2023年08月02日</div>
+        <li class="item" v-for="item in listData" :key="item.id">
+          <div>{{item.title}}</div>
+          <div>{{item.creationtime}}</div>
         </li>
       </ul>
       <ul v-else>
-        <li class="info-item">
-          <div></div>
-          <div>润百颜透明质酸原液精华导入玻尿酸涂抹式水光针可 微针7ml*10瓶 润百颜微针.pdf</div>
+        <li th:each="file: ${archiveFiles}">
+          <a class="info-item" th:href="${file.ossUrl}">
+            <div>
+              <img src="/img/article/PC--pdf.png" style="width: 100%;height: 100%;object-fit: contain;"/>
+            </div>
+            <div th:text="${file.fileName}"></div>
+          </a>
         </li>
       </ul>
+      <div class="pageWrap clear">
+        <a class="prev" :href="paginationUrl(params.num*1-1)"></a>
+        <template v-for="n in showPageBtn">
+          <a v-if="n" :class="{'on':(n==params.num)}" :href="paginationUrl(n)" v-text="n"></a>
+          <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" :href="paginationUrl(params.num*1+1)"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" :href="paginationUrl(pageInput)">点击跳转</a>
+      </div>
+      <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" :href="paginationUrl(params.num*1-1)"></a>
+        <template v-for="n in showPageBtn">
+          <a v-if="n" :class="{'on':(n==params.num)}" :href="paginationUrl(n)" v-text="n"></a>
+          <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" :href="paginationUrl(params.num*1+1)"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" :href="paginationUrl(pageInput)">点击跳转</a>
+      </div>
+      <div v-if="!isPC && params.num < pageTotal" class="more" @click="handleMore(params.num*1+1)">查看更多</div>
     </div>
   </div>
 </div>
@@ -64,6 +95,7 @@
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/recommendation.js(v=${version})}"></script>
 </body>