帮助中心

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

@@ -1,12 +1,14 @@
 package com.caimei.www.controller.unlimited;
 
 import com.caimei.www.controller.BaseController;
+import com.caimei.www.pojo.page.PageContent;
 import com.caimei.www.service.page.HelpService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestParam;
 
 /**
  * Description
@@ -29,8 +31,10 @@ public class HelpPageController extends BaseController {
      * 帮助页
      */
     @GetMapping("/help/{id}.html")
-    public String help(final Model model, @PathVariable("id") Integer id) {
-        // PageContent helpPage = helpService.getHelpPageById(id);
+    public String help(final Model model, @RequestParam(value="id",defaultValue = "1016") Integer id ) {
+        // 默认平台介绍
+        PageContent helpPage = helpService.getHelpPageById(id);
+        model.addAttribute("pageInfo", helpPage);
         return HELP_PAGE_PATH;
     }
 

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

@@ -62,5 +62,10 @@ public interface SinglePageDao {
      */
     List<ImageLink> getLiveTeachers();
 
-
+    /**
+     * 根据ID查找帮助页
+     * @param id
+     * @return
+     */
+    PageContent getHelpPageById(Integer id);
 }

src/main/java/com/caimei/www/service/page/HelpService.java

@@ -1,5 +1,7 @@
 package com.caimei.www.service.page;
 
+import com.caimei.www.pojo.page.PageContent;
+
 /**
  * Description
  *
@@ -7,4 +9,6 @@ package com.caimei.www.service.page;
  * @date : 2020/8/27
  */
 public interface HelpService {
+    /** 根据ID查找帮助页 */
+    PageContent getHelpPageById(Integer id);
 }

src/main/java/com/caimei/www/service/page/impl/HelpServiceImpl.java

@@ -1,6 +1,7 @@
 package com.caimei.www.service.page.impl;
 
 import com.caimei.www.mapper.SinglePageDao;
+import com.caimei.www.pojo.page.PageContent;
 import com.caimei.www.service.page.HelpService;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
@@ -21,4 +22,13 @@ public class HelpServiceImpl implements HelpService {
     @Value("${caimei.wwwDomain}")
     private String domain;
 
+    /**
+     * 根据ID查找帮助页
+     *
+     * @param id
+     */
+    @Override
+    public PageContent getHelpPageById(Integer id) {
+        return singlePageDao.getHelpPageById(id);
+    }
 }

src/main/resources/mapper/SinglePageMapper.xml

@@ -58,6 +58,17 @@
         where a.type=3 and a.enabledStatus=1
         order by a.sort desc,a.createDate desc
     </select>
+    <select id="getHelpPageById" resultType="com.caimei.www.pojo.page.PageContent">
+        select
+            helpPageID as id,
+            helpPageTypeID as type,
+            title,
+            contentTxt as description,
+            content
+        from helpPage
+        where helpPageID=#{id}
+        and validFlag=1 and showFlag=1
+    </select>
 
 
 </mapper>

src/main/resources/static/css/help/help.css

@@ -4,6 +4,78 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
+    .navLayout .left{
+        float: left;
+        width: 200px;
+        line-height: 50px;
+        white-space: nowrap;
+        text-indent: 16px;
+        font-size: 16px;
+        background: #FFF;
+    }
+    .navLayout .left .title{
+        color: #22272e;
+        font-weight: bold;
+        border-bottom: 1px solid #f5f5f5;
+    }
+    .navLayout .navList .tab{
+        display: block;
+        color: #22272e;
+        position: relative;
+    }
+    .navLayout .navList .tab:before{
+        content: '\276F';
+        font-weight: normal;
+        position: absolute;
+        right: 10px;
+        top: 0;
+        transform: rotate(90deg);
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        color:#bec2c9;
+    }
+    .navLayout .navList .tab.on:before{
+        top: 18px;
+        transform: rotate(270deg);
+        color:#e15616;
+    }
+    .navLayout .navList .tab.on{
+        color: #e15616;
+    }
+    .navLayout .navList .con{
+        position: relative;
+    }
+    .navLayout .navList .con:before,.navLayout .navList .con:after{
+        content: '';
+        position: absolute;
+        width:168px;
+        border-top: 1px solid #f5f5f5;
+        left:16px;
+    }
+    .navLayout .navList .con:before{top:0;}
+    .navLayout .navList .con:after{bottom:0;}
+    .navLayout .navList .con a{
+        display: block;
+        font-size:14px;
+        color: #627386;
+    }
+    .navLayout .navList .con a.on{
+        color: #e15616;
+        background-color: #ffe6dc;
+    }
+
+
+
+
+
+
+    .navLayout .right{
+        float:right;
+        width:968px;
+    }
+
 
 }
 

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

@@ -13,7 +13,7 @@
             <div class="list" th:each="type: ${helpPages}">
                 <span class="tab" th:text="${type.name}"></span>
                 <div class="con">
-                    <a th:each="page: ${type.linkList}" th:href="@{/help.html( id=${page.id} )}" th:text="${page.name}"></a>
+                    <a th:each="page: ${type.linkList}" th:href="'/help/'+${page.id}+'.html'" th:text="${page.name}"></a>
                 </div>
             </div>
             <div class="list">

src/main/resources/templates/help/help.html

@@ -11,8 +11,31 @@
 <template th:replace="components/header"></template>
 
 <!-- 帮助页面 -->
-<div id="helpPage">
-    <h1 style="text-align:center">帮助中心（二期）</h1>
+<div class="navLayout">
+    <!-- 面包屑 -->
+    <div class="crumbs">
+        <span>帮助中心</span>
+        <span>&gt;</span>
+        <span th:text="${pageInfo?.title}"></span>
+    </div>
+    <div class="wrap clear">
+        <div class="left">
+            <div class="title">帮助中心</div>
+            <div class="navList" th:each="type: ${helpPages}">
+                <span class="tab" th:text="${type.name}"></span>
+                <div class="con">
+                    <a th:each="page: ${type.linkList}" th:href="'/help/'+${page.id}+'.html'" th:text="${page.name}"></a>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+        </div>
+    </div>
+
+
+
+
+
 </div>
 
 <!-- 引入底部 -->