采美百科上测试

src/main/resources/static/css/encyclopedia/detail.css

@@ -85,7 +85,7 @@ body{padding-top:40.3vw}
 .article .section.question .collapse dt .icon{position:absolute;right:0;top:0}
 .article .section.question .collapse dd{line-height:5.6vw;margin:1.6vw 0;text-align:justify}
 .article .section.question .collapse dd span{background:#34cc8c}
-.contact-popup{display: none; position:fixed;top: 50%;left: 50%;z-index: 99999; transform: translate(-50%,-50%); width:80vw;height:100vw;overflow:hidden;background:url(/img/contact.png) no-repeat center;background-size:80vw auto}
+.contact-popup{display: none; position:fixed;top: 50%;left: 50%;z-index: 99999; transform: translate(-50%,-50%); width:80vw;height:100vw;overflow:hidden;background:url(/img/encyclopedia/contact.png) no-repeat center;background-size:80vw auto}
 .contact-popup .close{position:absolute;display:block;width:8vw;height:8vw;text-align:center;line-height:8vw;top:0;right:5vw;font-size:8vw;color:#2c3038;cursor:pointer}
 .contact-popup .content{margin-top:30vw}
 .contact-popup .content p{font-size:4.2vw;text-align:center;line-height:8vw;color:#9aa5b5;margin:0}

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

@@ -374,14 +374,6 @@ function slideBarHandle(selector) {
     });
 }
 
-/*
-* 跳转到搜索页面
-* */
-function toSearchPage(){
-
-}
-
-
 $(function () {
     activeNavbar('.navbar .nav li');
     slideBarHandle('#menuBtn', 'flex');
@@ -389,4 +381,8 @@ $(function () {
     responseScreen(768, function () {
         window.location.reload();
     });
+    // 搜索框内容为空阻止表单提交
+    $('form').submit(function(){
+        if(!$('#searchKeyword').val()) return false;
+    });
 });

src/main/resources/static/js/encyclopedia/moreFloor.js

@@ -0,0 +1,66 @@
+"use strict";
+
+// 页码vue实例
+var pagination = new Vue({
+    el: '#pagination',
+    data: {
+        name: 'more-list',
+        pageSize: 12,
+        pageNum: 0,
+        totalPage: 0,
+        typeId: 0,
+        jumpInput: 1
+    },
+    computed: {
+        // 页码
+        pagination: function pagination() {
+            return this.makePagination(this.pageNum, this.totalPage);
+        }
+    },
+    mounted: function mounted() {
+        window.name = this.name;
+        this.initPaginationData();
+    },
+    methods: {
+        // 初始化页码
+        initPaginationData: function initPaginationData() {
+            var moreData = getMoreData() || {};
+            this.pageNum = moreData.pageNum;
+            this.pageSize = moreData.pageSize;
+            this.totalPage = moreData.totalPage;
+            this.typeId = moreData.typeId;
+            console.log(moreData);
+        },
+        makeUrl: function makeUrl(pageNum) {
+            return 'more-' + this.typeId + '-' + pageNum + '-' + this.pageSize + '.html';
+        },
+        // 页码切换
+        pageChange: function pageChange(pageNum) {
+            if (pageNum < 1 || pageNum > this.totalPage) return;
+            window.open(this.makeUrl(pageNum), this.name);
+        },
+        // 处理页码
+        makePagination: function makePagination(pageNum, totalPage) {
+            // 页码列表
+            var arr = [];
+            // 初始化页码列表
+            for (var i = 1; i <= totalPage; i++) {
+                arr[i - 1] = i;
+            }
+
+            if (totalPage <= 7) return arr;
+            // 查找当前页码在页码列表中的位置
+            var pop = arr.indexOf(pageNum);
+            // 截取页码
+            if (pageNum < 4) {
+                arr = arr.splice(pop + 1 - pageNum, 6);
+            } else if (pageNum > totalPage - 3) {
+                arr = arr.reverse().splice(0, 6).reverse();
+            } else {
+                arr = arr.splice(pop - 2, 5);
+            }
+            console.log(arr);
+            return arr;
+        }
+    }
+});

src/main/resources/static/js/encyclopedia/search.js

@@ -1,33 +1,31 @@
+"use strict";
 var search = new Vue({
     el: '#search',
     data: {
         listQuery: {
             keyword: '',
-            pageSize: 6,
+            pageSize: 1,
             pageNum: 1
         },
-        searchList: [],
-        hasNextPage: false,
-        total: 100,
+        searchList: [], // 查询列表
+        totalRecord: 100,
         totalPage: 10,
-        jumpInput: 1,
+        jumpInput: 1
     },
     filters: {
         // 处理url
         formatUrl: function (item) {
             if (item.commodityType === 1) {
-                return 'product-' + item.productId + '.html'
+                return 'product-' + item.productId + '.html';
             } else {
-                return 'instrument-' + item.productId + '.html'
+                return 'instrument-' + item.productId + '.html';
             }
-        },
-
+        }
     },
     computed: {
+        // 页码
         pagination: function () {
-            const pageNum = this.listQuery.pageNum;
-            const pageNumList = [pageNum - 2, pageNum - 1, pageNum, pageNum + 1, pageNum + 2];
-            return pageNumList;
+            return this.makePagination(this.listQuery.pageNum, this.totalPage);
         }
     },
     mounted: function () {
@@ -35,39 +33,27 @@ var search = new Vue({
         this.fetchSearchList();
     },
     methods: {
-        queryString: function (queryStr) {
-            const queryStrList = decodeURI(queryStr).split('&');
-            const query = Object.create(null);
-            queryStrList.forEach(function (str) {
-                const temp = str.split('=');
-                const key = temp[0];
-                const val = temp[1] || '';
-                query[key] = val;
-            });
-            return query
-        },
         // 初始化关键字
         initSearchWord: function () {
             console.log(decodeURI(window.location.search.slice(1)));
-            const query = this.queryString(window.location.search.slice(1));
+            var query = this.queryString(window.location.search.slice(1));
             document.querySelector('#searchKeyword').value = query.keyword;
             this.listQuery.keyword = query.keyword || '';
         },
         // 获取查询列表
         fetchSearchList: function () {
-            const self = this;
+            var self = this;
             EncyclopediaApi.FetchListByKeyword(this.listQuery, function (res) {
                 if (res.code === 0) {
-                    const data = res.data;
-                    self.hasNextPage = data.hasNextPage;
+                    var data = res.data;
                     self.listQuery.pageNum = data.pageNum;
                     self.searchList = data.results;
-                    self.total = data.totalRecord;
+                    self.totalRecord = data.totalRecord;
                     self.totalPage = data.totalPage;
                 } else {
                     CAIMEI.Alert(res.msg, '确定', false);
                 }
-            })
+            });
         },
         // 页码切换
         pageChange: function (pageNum) {
@@ -78,10 +64,43 @@ var search = new Vue({
         },
         // 根据关键词进行标题格式化
         formatFromKeyword: function (name) {
-            const reg = new RegExp(this.listQuery.keyword, 'ig');
+            var reg = new RegExp(this.listQuery.keyword, 'ig');
             return name.replace(reg, function ($1) {
-                return '<span style="color: #e15616">' + $1 + '</span>'
+                return '<span style="color: #e15616">' + $1 + '</span>';
             });
+        },
+        // 处理url参数 返回参数键值对
+        queryString: function (queryStr) {
+            var queryStrList = decodeURI(queryStr).split('&');
+            var query = Object.create(null);
+            queryStrList.forEach(function (str) {
+                var temp = str.split('=');
+                var key = temp[0];
+                var val = temp[1] || '';
+                query[key] = val;
+            });
+            return query;
+        },
+        // 处理页码
+        makePagination: function (pageNum, totalPage) {
+            // 页码列表
+            var arr = [];
+            // 初始化页码列表
+            for (var i = 1; i <= totalPage; i++) {
+                arr[i - 1] = i;
+            }
+            if (totalPage <= 7) return arr;
+            // 查找当前页码在页码列表中的位置
+            var pop = arr.indexOf(pageNum);
+            // 截取页码
+            if (pageNum < 4) {
+                arr = arr.splice(pop + 1 - pageNum, 6);
+            } else if (pageNum > totalPage - 3) {
+                arr = arr.reverse().splice(0, 6).reverse();
+            } else {
+                arr = arr.splice(pop - 2, 5);
+            }
+            return arr;
         }
     }
 });

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

@@ -7,7 +7,7 @@
             <div class="menu-btn" id="menuBtn" data-target="#menuNav" data-colse="#menuColseBtn">
                 <i class="icon menu"></i>
             </div>
-            <a href="index.html">
+            <a href="/">
                 <h1>采美百科丰富的百科文库</h1>
                 <img src="/img/encyclopedia/logo.png" alt="采美百科"/>
             </a>

src/main/resources/templates/encyclopedia/instrument.html

@@ -35,11 +35,11 @@
 </div>
 <!-- 分类楼层 -->
 <div class="floor-list">
-    <div class="floor" th:each="floor : ${typeData}">
+    <div class="floor" th:each="floor,floorStat : ${typeData}">
         <div class="floor-title">
             <h2 th:text="${floor.name}"></h2>
             <div class="h5-more-btn">
-                <a th:href="'more-' + ${floor.typeId} + '-1-12.html'">
+                <a th:href="'more-' + ${floor.typeId} + '-1-12.html'" th:if="${floorStat.size >= 6}">
                     <span>更多</span>
                     <i class="icon arrowright"></i>
                 </a>
@@ -74,7 +74,7 @@
             </section>
         </article>
         <!-- 更多 -->
-        <div class="more">
+        <div class="more" th:if="${floorStat.size >= 6}">
             <a th:href="'more-' + ${floor.typeId} + '-1-12.html'">
                 <div class="more-btn">
                     <span class="">查看更多</span>

src/main/resources/templates/encyclopedia/more.html

@@ -17,14 +17,14 @@
 <template th:replace="encyclopedia/components/header"></template>
 <!-- 分类楼层 -->
 <div class="floor container more-floor" id="moreFloor" th:object="${moreData}">
-    <div class="floor-title">
-        <h2 v-text="*{typeName}"></h2>
+    <div class="floor-title" th:id="${moreData}">
+        <h2 th:text="*{typeName}"></h2>
         <img src="/img/encyclopedia/01.png" alt="中胚层产品"/>
     </div>
     <article class="article">
         <section class="section" th:each="item: *{results}">
             <!-- commodityType : 1 产品  2 仪器 -->
-            <a th:href="${item.commodityType eq 1 ? 'product-' + item.productId + '.html' : 'product-' + item.instrument + '.html'}">
+            <a th:href="${item.commodityType eq 1 ? 'product-' + item.productId + '.html' : 'instrument-' + item.productId + '.html'}">
                 <div class="cover">
                     <img th:src="${item.image}" th:alt="${item.name}"/>
                 </div>
@@ -51,43 +51,43 @@
     </article>
 </div>
 
-<th:block th:object="${moreData}">
-    <div class="pagination-container" th:if="*{totalPage gt 1}">
-        <ul class="pagination">
-            <li th:if="*{pageNum gt 1}"><a th:href="'more-7-' + *{pageNum - 1} + '-12.html'">«</a></li>
-            <li th:if="*{pageNum gt 3}">
-                <a th:href="'more-7-1-12.html'">1</a>
+<!--页码-->
+<div class="pagination-container" id="pagination" th:if="${moreData.totalPage > 1}">
+    <ul class="pagination" v-if="totalPage > 1">
+        <!--左侧固定-->
+        <li v-if="pageNum > 1"><a :href="makeUrl(pageNum - 1)" @click.prevent="pageChange(pageNum - 1)">«</a></li>
+        <li v-if="pagination[0] > 1"><a :href="makeUrl(1)" @click.prevent="pageChange(1)">1</a></li>
+        <li class="ellipsis" v-if="pagination[0] > 2"><span>···</span></li>
+        <!--可变动-->
+        <template v-for="num in pagination">
+            <li :class="{ active: pageNum === num }" v-if="num >= 1  && num <= totalPage">
+                <a :href="makeUrl(num)" @click.prevent="pageChange(num)" v-text="num"></a>
             </li>
-            <li class="ellipsis" th:if="*{pageNum gt 4}"><span>···</span></li>
-            <li th:if="*{pageNum gt 2}">
-                <a th:href="'more-7-' + *{pageNum - 2} + '-12.html'" th:text="*{pageNum - 2}"></a>
-            </li>
-            <li th:if="*{pageNum gt 1}">
-                <a th:href="'more-7-' + *{pageNum - 1} + '-12.html'" th:text="*{pageNum - 1}"></a>
-            </li>
-            <li class="active"><a href="#" th:text="*{pageNum}"></a></li>
-            <li th:if="*{pageNum lt totalPage - 1}">
-                <a th:href="'more-7-' + *{pageNum + 1} + '-12.html'" th:text="*{pageNum + 1}"></a>
-            </li>
-            <li th:if="*{pageNum lt totalPage - 2}">
-                <a th:href="'more-7-' + *{pageNum + 2} + '-12.html'" th:text="*{pageNum + 2}"></a>
-            </li>
-            <li class="ellipsis" th:if="*{pageNum lt totalPage - 3}"><span>···</span></li>
-            <li th:if="*{pageNum lt totalPage}">
-                <a th:href="'more-7-' + *{totalPage} + '-12.html'" th:text="*{totalPage}"></a>
-            </li>
-            <li th:if="*{pageNum lt totalPage}"><a th:href="'more-7-' + *{pageNum + 1} + '-12.html'">»</a></li>
-        </ul>
-        <div class="tool">
-            <div class="total">共<span th:text="*{totalPage}"></span>页</div>
-            <div class="jump">
-                <div class="pagenum-input">跳至<input type="text" value="1"/>页</div>
-                <a href="#" class="jump-btn">点击跳转</a>
-            </div>
+        </template>
+        <!--右侧固定-->
+        <li class="ellipsis" v-if="pagination[pagination.length - 1] < totalPage - 1"><span>···</span></li>
+        <li v-if="pagination[pagination.length - 1] < totalPage">
+            <a :href="makeUrl(totalPage)" @click.prevent="pageChange(totalPage)" v-text="totalPage"></a>
+        </li>
+        <li v-if="pageNum < totalPage" :class="{ active: pageNum === totalPage }">
+            <a :href="makeUrl(pageNum + 1)" @click.prevent="pageChange(pageNum + 1)">»</a>
+        </li>
+    </ul>
+    <div class="tool">
+        <div class="total">共<span v-text="totalPage"></span>页</div>
+        <div class="jump">
+            <div class="pagenum-input">跳至<input type="text" v-model="jumpInput"/>页</div>
+            <a :href="makeUrl(jumpInput)" class="jump-btn" @click.prevent="pageChange(jumpInput)">点击跳转</a>
         </div>
     </div>
-</th:block>
+</div>
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
+<script src="/lib/vue2.6.12.min.js"></script>
+<script th:inline="javascript">
+// 从 Thymeleaf 域中获取数据使用[[${prototype}]]
+function getMoreData() { return [[${moreData}]]}
+</script>
+<script th:src="@{/js/encyclopedia/moreFloor.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/encyclopedia/product.html

@@ -35,11 +35,11 @@
 </div>
 <!-- 分类楼层 -->
 <div class="floor-list">
-    <div class="floor" th:each="floor : ${typeData}">
+    <div class="floor" th:each="floor,floorStat : ${typeData}">
         <div class="floor-title">
             <h2 th:text="${floor?.name}"></h2>
             <div class="h5-more-btn">
-                <a th:href="'more-' + ${floor.typeId} + '-1-12.html'">
+                <a th:href="'more-' + ${floor.typeId} + '-1-12.html'" th:if="${floorStat.size >= 6}">
                     <span>更多</span>
                     <i class="icon arrowright"></i>
                 </a>
@@ -74,7 +74,7 @@
             </section>
         </article>
         <!-- 查看更多 -->
-        <div class="more">
+        <div class="more" th:if="${floorStat.size >= 6}">
             <a th:href="'more-' + ${floor.typeId} + '-1-12.html'">
                 <div class="more-btn">
                     <span class="">查看更多</span>

src/main/resources/templates/encyclopedia/search.html

@@ -17,8 +17,8 @@
 <template th:replace="encyclopedia/components/header"></template>
 <!-- 分类楼层 -->
 <div class="floor container search-floor" id="search">
-    <p class="search-title">为您找到相关结果<span v-text="total"></span>条</p>
-    <div class="emtyp" v-if="searchList.length <= 0">
+    <p class="search-title">为您找到相关结果<span v-text="totalRecord"></span>条</p>
+    <div class="emtyp" v-if="totalRecord <= 0">
         <img src="/img/encyclopedia/pc-icon-empty.png" alt="搜索结果为空"/>
         <p>未找到相关结果！</p>
     </div>
@@ -49,24 +49,28 @@
             </a>
         </section>
     </article>
+
     <!--页码-->
-    <div class="pagination-container" v-if="totalPage >1">
+    <div class="pagination-container" v-if="totalPage > 1">
         <ul class="pagination">
-            <li><a href="#" @click.prevent="pageChange(listQuery.pageNum - 1)">«</a></li>
-            <li :class="{active: listQuery.pageNum === 1}" v-if="listQuery.pageNum >= 4">
-                <a href="#" @click.prevent="pageChange(1)">1</a>
-            </li>
-            <li class="ellipsis" v-if="listQuery.pageNum - 2 > 2"><span>···</span></li>
+            <!--左侧固定-->
+            <li v-if="listQuery.pageNum > 1"><a href="#" @click.prevent="pageChange(listQuery.pageNum - 1)">«</a></li>
+            <li v-if="pagination[0] > 1"><a href="#" @click.prevent="pageChange(1)">1</a></li>
+            <li class="ellipsis" v-if="pagination[0] > 2"><span>···</span></li>
+            <!--可变动-->
             <template v-for="num in pagination">
-                <li :class="{active: listQuery.pageNum === num}" v-if="num >= 1 && num <= totalPage">
-                    <a href="#" v-text="num" @click.prevent="pageChange(num)"></a>
+                <li :class="{ active: listQuery.pageNum === num }" v-if="num >= 1  && num <= totalPage">
+                    <a href="#" @click.prevent="pageChange(num)" v-text="num"></a>
                 </li>
             </template>
-            <li class="ellipsis" v-if="listQuery.pageNum + 3 < totalPage"><span>···</span></li>
-            <li :class="{active: listQuery.pageNum === totalPage}" v-if="listQuery.pageNum + 2 < totalPage">
-                <a href="#" v-text="totalPage" @click.prevent="pageChange(totalPage)"></a>
+            <!--右侧固定-->
+            <li class="ellipsis" v-if="pagination[pagination.length - 1] < totalPage - 1"><span>···</span></li>
+            <li v-if="pagination[pagination.length - 1] < totalPage">
+                <a href="#" @click.prevent="pageChange(totalPage)" v-text="totalPage"></a>
+            </li>
+            <li v-if="listQuery.pageNum < totalPage" :class="{ active: listQuery.pageNum === totalPage }">
+                <a href="#" @click.prevent="pageChange(listQuery.pageNum + 1)">»</a>
             </li>
-            <li><a href="#" @click.prevent="pageChange(listQuery.pageNum + 1)">»</a></li>
         </ul>
         <div class="tool">
             <div class="total">共<span v-text="totalPage"></span>页</div>