文章公共部分part1

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

@@ -1,8 +1,15 @@
 package com.caimei.www.controller.unlimited;
 
 import com.caimei.www.controller.BaseController;
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.BaseLink;
+import com.caimei.www.service.ArticleService;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import java.util.List;
 
 /**
  * Description
@@ -15,6 +22,12 @@ public class ArticleController extends BaseController {
 
 	private static final String ARTICLE_LIST_PATH = "article/list";
 	private static final String ARTICLE_DETAIL_PATH = "article/detail";
+    private ArticleService articleService;
+    @Autowired
+    public void setArticleService(ArticleService articleService) {
+        this.articleService = articleService;
+    }
+
 
     /**
      * 文章列表页
@@ -32,4 +45,12 @@ public class ArticleController extends BaseController {
         return ARTICLE_DETAIL_PATH;
     }
 
+    /**
+     * 获取文章热门标签
+     */
+    @GetMapping("/article/labels")
+    @ResponseBody
+    public JsonModel<List<BaseLink>> getArticleLabels() {
+        return articleService.getArticleLabels();
+    }
 }

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

@@ -27,10 +27,10 @@ public class EquipmentController extends BaseController {
 	private static final String equipment_LIST_PATH = "equipment/list";
 	private static final String equipment_DETAIL_PATH = "equipment/detail";
 
-    private EquipmentService EquipmentService;
+    private EquipmentService equipmentService;
     @Autowired
-    public void setEquipmentService(EquipmentService EquipmentService) {
-        this.EquipmentService = EquipmentService;
+    public void setEquipmentService(EquipmentService equipmentService) {
+        this.equipmentService = equipmentService;
     }
 
 
@@ -47,7 +47,7 @@ public class EquipmentController extends BaseController {
      */
     @GetMapping("/equipment/detail.html")
     public String home(final Model model, @RequestParam("id") Integer equipmentId) {
-        PageContent detail = EquipmentService.getEquipmentById(equipmentId);
+        PageContent detail = equipmentService.getEquipmentById(equipmentId);
         model.addAttribute("equipment", detail);
         return equipment_DETAIL_PATH;
     }
@@ -58,7 +58,7 @@ public class EquipmentController extends BaseController {
     @GetMapping("/equipment/recommend")
     @ResponseBody
     public JsonModel<List<PageFloor>> getEquipmentRecommendById(Integer equipmentId) {
-        return EquipmentService.getEquipmentRecommendById(equipmentId);
+        return equipmentService.getEquipmentRecommendById(equipmentId);
     }
 
 }

src/main/java/com/caimei/www/mapper/ArticleDao.java

@@ -0,0 +1,27 @@
+package com.caimei.www.mapper;
+
+import com.caimei.www.pojo.page.BaseLink;
+import org.apache.ibatis.annotations.Mapper;
+
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/8/10
+ */
+@Mapper
+public interface ArticleDao {
+    /**
+     * 获取最高点击量
+     * @return
+     */
+    Integer getTopClickRate();
+
+    /**
+     * 获取热门标签
+     * @return
+     */
+    List<BaseLink> getArticleLabels();
+}

src/main/java/com/caimei/www/pojo/page/BaseLink.java

@@ -17,6 +17,7 @@ public class BaseLink implements Serializable {
 	private Integer typeId;
 	private String name;
 	private String link;
+	private Double sort;
 	private List<BaseLink> linkList;
 
     private static final long serialVersionUID = 1L;

src/main/java/com/caimei/www/service/ArticleService.java

@@ -0,0 +1,19 @@
+package com.caimei.www.service;
+
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.BaseLink;
+
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/8/10
+ */
+public interface ArticleService {
+    /**
+     * 获取文章热门标签
+     */
+    JsonModel<List<BaseLink>> getArticleLabels();
+}

src/main/java/com/caimei/www/service/impl/ArticleServiceImpl.java

@@ -0,0 +1,43 @@
+package com.caimei.www.service.impl;
+
+import com.caimei.www.mapper.AccountDao;
+import com.caimei.www.mapper.ArticleDao;
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.BaseLink;
+import com.caimei.www.service.ArticleService;
+import com.caimei.www.utils.PriceUtil;
+import io.netty.util.internal.MathUtil;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import java.math.BigDecimal;
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @date : 2020/8/10
+ * @author : Charles
+ */
+@Service
+public class ArticleServiceImpl implements ArticleService {
+    @Resource
+    private ArticleDao articleDao;
+
+    /**
+     * 获取文章热门标签
+     */
+    @Override
+    public JsonModel<List<BaseLink>> getArticleLabels() {
+        // 获取最高点击量
+        Integer topClickRate = articleDao.getTopClickRate();
+        // 获取热门标签
+        List<BaseLink> labels = articleDao.getArticleLabels();
+        double opacityParam = 0.5f;
+        labels.forEach(label -> {
+            double opacity = PriceUtil.mul(PriceUtil.div(label.getSort(), topClickRate), (1-opacityParam)).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue() + opacityParam;
+            label.setSort(opacity);
+        });
+        return JsonModel.success(labels);
+    }
+}

src/main/resources/mapper/ArticleMapper.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.caimei.www.mapper.ArticleDao">
+    <select id="getTopClickRate" resultType="java.lang.Integer">
+		select IFNULL(clickRate, 1)
+		from info_label
+		where hotLabelStatus = 1
+		order by clickRate desc
+		limit 1
+    </select>
+    <select id="getArticleLabels" resultType="com.caimei.www.pojo.page.BaseLink">
+		select id,name,clickRate as sort
+		from info_label
+		where hotLabelStatus = 1
+		order by recommendLabelStatus desc, hotLabelStatus desc, createDate desc
+		limit 30
+    </select>
+
+
+</mapper>

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

@@ -4,6 +4,44 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
+.title{
+    background-color:#fef6f3;
+    height:40px;
+    line-height: 40px;
+    text-indent: 16px;
+    color:#E15616;
+    font-size: 16px;
+}
+.labelWrap .count{
+    background-color:#FFF;
+    padding-bottom:16px;
+    line-height: 32px;
+    max-height: 96px;
+    overflow: hidden;
+}
+.labelWrap .count a{
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    white-space: nowrap;
+    background-color:#f94b4b;
+    color:#FFF;
+    padding:0 14px;
+    border-radius: 2px;
+    margin: 16px 0 0 16px;
+}
+.articleWrap{
+    float: left;
+    width:885px;
+    margin-top: 16px;
+}
+.wrapAside{
+    float: right;
+    width:284px;
+    margin-top: 16px;
+}
+
+
 
 }
 

src/main/resources/static/css/base/base.pc.css

@@ -63,7 +63,17 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .baseHeadCenter.account .accountLogin{font-size:20px;float:right;line-height:44px}
 .baseHeadCenter.account .accountLogin a{color:#E15616;margin-left:10px}
 .baseHeadCenter.account .accountLogin a:hover{text-decoration:underline}
-.articleTopNav{width:100%;font-size:16px;height:44px;line-height:44px;color:#4a4f58;background:#FFF;}
+/* 文章头部 */
+.articleTopNav{width:100%;background:#FFF}
+.articleTopNav ul{text-align:right}
+.articleTopNav li{display:inline-block;margin-left:80px;}
+.articleTopNav li:first-child{margin-left:0;}
+.articleTopNav li a{display:inline-block;width:100%;height:44px;line-height:44px;font-size:16px;color:#4a4f58;box-sizing:border-box}
+.articleTopNav li a:hover,.articleTopNav li.on a{color:#E15616;border-bottom:1px solid #E15616}
+.baseHeadCenter.article{height:66px;border-bottom:1px solid #E15616}
+.baseHeadCenter.article .searchBox{float:right;}
+.baseHeadCenter.article .search:before{display:none}
+.baseHeadCenter.article .keyword{width:100%}
 
 /* 购物车 */
 .baseHeadCenter .headCart{width:184px;height:44px;float:right;position:relative;}
@@ -197,6 +207,7 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .pageWrap span{display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F}
 .pageWrap b{color:#2D3036;font-weight:normal}
 .pageWrap input{box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}
+.crumbs{width:1184px;margin:0 auto;box-sizing:border-box;padding:15px 0;font-size:14px}
 /* 登录弹框 */
 .loginAlert{padding-top:5px;}
 .loginAlert span:first-child:after{content: '，';}

src/main/resources/static/css/product/list.css

@@ -4,7 +4,6 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-    .crumbs{width:1184px;margin:0 auto;box-sizing:border-box;padding:15px 0;font-size:14px}
     .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;padding:12px;font-size:0;text-align:center;background:#FFF}
     .sortBox li{display:inline-block;cursor:pointer;width:128px;height:40px;line-height:40px;font-size:16px;background:#F5F5F5;color:#93979F;position:relative;margin:0 8px}
     .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}

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

@@ -0,0 +1,26 @@
+var articleList = new Vue({
+    el: '#articleList',
+    data: {
+        loginStatus: false,
+        articleType: '',
+        labelList: '',
+    },
+    methods: {
+        getLabels: function(){
+            var _self = this;
+            $.getJSON("/article/labels", function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.labelList = r.data;
+                }
+            });
+        }
+    },
+    created: function () {
+        this.articleType = getUrlParam("type");
+        this.getLabels();
+        // 判断登录状态
+        if (globalUserData.token) {
+            this.loginStatus = true;
+        }
+    }
+});

src/main/resources/static/js/base.js

@@ -16,7 +16,8 @@ var globalHead = new Vue({
             cartCount: 0,
             productCount: 0,
             priceTotal: 0
-        }
+        },
+        articleType: ''
     },
     methods: {
         // 导航分类数据
@@ -78,6 +79,8 @@ var globalHead = new Vue({
                 this.getHeadCart(this.userData.userId);
             }
         }
+        // 信息中心
+        this.articleType = getUrlParam("type");
 
     }
 });

src/main/resources/templates/article/components/header.html

@@ -1,14 +1,14 @@
-<header id="articleHead" xmlns:th="http://www.w3.org/1999/xhtml">
-    <div class="articleTopNav">
-        <div class="wrap">
-            <a href="/index.html" target="_blank">商城首页</a>
-            <a href="/info/center-3-1.html" class="typeBtn" typeid="3">新品上线</a>
-            <a href="/info/center-2-1.html" class="current typeBtn" typeid="2">商城促销</a>
-            <a href="/info/center-6-1.html" class="typeBtn" typeid="6">热门和推荐</a>
-            <a href="/info/center-8-1.html" class="typeBtn" typeid="8">医美直播专栏</a>
-            <a href="/info/center-1-1.html" class="typeBtn" typeid="1">采美动态</a>
-            <a href="/info/center-4-1.html" class="typeBtn" typeid="4">美业科普</a>
-        </div>
+<header xmlns:th="http://www.w3.org/1999/xhtml">
+    <div v-if="isPC" class="articleTopNav">
+        <ul class="wrap clear">
+            <li><a href="/index.html" target="_blank">商城首页</a></li>
+            <li :class="{'on':articleType==3}"><a href="/article/list.html?type=3">新品上线</a></li>
+            <li :class="{'on':articleType==2}"><a href="/article/list.html?type=2">商城促销</a></li>
+            <li :class="{'on':articleType==6}"><a href="/article/list.html?type=6">热门和推荐</a></li>
+            <li :class="{'on':articleType==8}"><a href="/article/list.html?type=8">医美直播专栏</a></li>
+            <li :class="{'on':articleType==1}"><a href="/article/list.html?type=1">采美动态</a></li>
+            <li :class="{'on':articleType==4}"><a href="/article/list.html?type=4">美业科普</a></li>
+        </ul>
     </div>
     <!--搜索-->
     <div class="baseHeadCenter article">
@@ -19,12 +19,11 @@
                 <img class="h5Only" src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
             </a>
             <div class="mf h5Only mUserCenter">
-                <a :href="loginStatus?'/shopping/cart.html':'javascript:void(0);'" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" title="购物车"></a>
                 <a href="javascript:void(0);" :class="loginStatus?'mUserIcon mIcon':'mUserIcon mIcon toLogin'" title="个人中心"></a>
             </div>
             <div class="searchBox" id="topSearch">
                 <div class="search">
-                    <input class="keyword" type="text" placeholder="请输入关键字" />
+                    <input class="keyword" type="text" placeholder="请输入搜索关键词" />
                     <a class="searchBtn icon mIcon" href="javascript:void(0);"></a>
                 </div>
             </div>

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

@@ -7,15 +7,45 @@
     <link th:href="@{/css/article/list.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
-<!-- 引用头部 -->
-<template th:replace="article/components/header"></template>
-
-<!-- 文章列表 -->
 <div id="articleList">
-    <h1 style="text-align:center">文章列表（二期）</h1>
-</div>
+    <!-- 引用头部 -->
+    <template th:replace="article/components/header"></template>
+
+    <!-- 文章列表 -->
+    <div class="wrap">
+        <div class="crumbs" v-if="articleType>0">
+            <a href="/">首页</a>
+            <span>&gt;</span>
+            <a v-if="articleType==3" href="/article/list.html?type=3">新品上线</a>
+            <a v-else-if="articleType==2" href="/article/list.html?type=2">商城促销</a>
+            <a v-else-if="articleType==6" href="/article/list.html?type=6">热门和推荐</a>
+            <a v-else-if="articleType==8" href="/article/list.html?type=8">医美直播专栏</a>
+            <a v-else-if="articleType==1" href="/article/list.html?type=1">采美动态</a>
+            <a v-else-if="articleType==4" href="/article/list.html?type=4">美业科普</a>
+            <span>&gt;</span> <span>正文</span>
+        </div>
+        <div class="labelWrap">
+            <div class="title">热搜词</div>
+            <div class="count">
+                <a v-for="label in labelList" :href="label.id" v-text="label.name" :style="'opacity:'+label.sort"></a>
+            </div>
+        </div>
+    </div>
+    <div class="wrap clear">
+        <div class="articleWrap">
+            <h1 style="text-align:center">文章列表（二期）</h1>
+        </div>
+        <div class="wrapAside">
+            <div class="recommend">
+                <div class="title">推荐阅读</div>
+            </div>
+            <div class="imgList">
 
-<!-- 引入底部 -->
+            </div>
+        </div>
+    </div>
+
+</div>
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>

src/main/resources/templates/components/head-link.html

@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta http-equiv="keywords" content="采美、易耗品商城、光电美容仪器项目、光电中心、皮肤管理中心、光电转型、美容院转型、光电美容">
     <meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
-    <link rel="shortcut icon" th:href="@{/img/web.ico}" type="image/x-icon"/>
-    <link rel="bookmark" th:href="@{/img/web.ico}" type="image/x-icon"/>
+    <link rel="shortcut icon" th:href="@{/favicon.png}" type="image/x-icon"/>
+    <link rel="bookmark" th:href="@{/favicon.png}" type="image/x-icon"/>
     <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">

src/main/resources/templates/components/header.html

@@ -58,7 +58,7 @@
                             <option value="2">项目仪器</option>
                         </select>
                     </div>
-                    <input class="keyword" type="text" placeholder="请输入关键字" />
+                    <input class="keyword" type="text" placeholder="请输入搜索关键词" />
                     <a class="searchBtn icon mIcon" href="javascript:void(0);"></a>
                 </div>
                 <!-- 热门搜索关键词 -->