updated

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

@@ -593,3 +593,17 @@ dl,dd,dt{zoom:1}
 		100%{bottom:0;opacity: 1;}
 	}
 }
+@media screen and (min-width: 768px) {
+	.auto-input ul.auto-select-list{margin: 0;position:absolute;left:0;top:50px;width:50%;padding:8px 0;background:#fff; z-index: 999;box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.1);max-height: 420px;overflow-y:auto;}
+	.auto-input ul.auto-select-list::-webkit-scrollbar { width: 8px; background-color: #fff;}
+	.auto-input ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #e2e2e2;}
+	.auto-input ul.auto-select-list li{padding:0 16px;font-size:14px;line-height:36px;height:36px;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+	.auto-input ul.auto-select-list li:hover{background:#FEF6F3;}
+}
+@media screen and (max-width: 768px) {
+	.auto-input ul.auto-select-list{margin: 0;position:absolute;left:0;top:5vw;width:50%;padding:2.4vw 0;background:#fff; z-index: 999;box-shadow: 0px 0.6vw 1.2vw 0.1vw rgba(0,0,0,0.1);max-height:82vw;overflow-y:auto;}
+	.auto-input ul.auto-select-list::-webkit-scrollbar { width: 1.6vw; background-color: #fff;}
+	.auto-input ul.auto-select-list::-webkit-scrollbar-thumb { border-radius: 0.8vw; background-color: #e2e2e2;}
+	.auto-input ul.auto-select-list li{padding:0 3.2vw;font-size:3.4vw;line-height:8vw;height:8vw;color:#2c3e50;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+	.auto-input ul.auto-select-list li:hover{background:#ecf0f1;}
+}

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

@@ -1,13 +1,14 @@
 /*var articleTypeNav = new Swiper('#articleTypeNav');*/
-const handleFileUrl = (url) => {
-    const fileUrl = url.split('?')[0]
-    let index = fileUrl.lastIndexOf('.');
-    let suffix = fileUrl.substring(index);
-    if (suffix === '.doc' || suffix === '.ppt' || suffix === '.pptx' || suffix === '.docx') {
-        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url), '_black') // 下载
-    } else {
-        window.open(fileUrl, '_blank')
-    }
+const handleFileUrl = (id) => {
+    window.location.href = `/product-${id}.html?tabsIndex=4`
+    // const fileUrl = url.split('?')[0]
+    // let index = fileUrl.lastIndexOf('.');
+    // let suffix = fileUrl.substring(index);
+    // if (suffix === '.doc' || suffix === '.ppt' || suffix === '.pptx' || suffix === '.docx') {
+    //     window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url), '_black') // 下载
+    // } else {
+    //     window.open(fileUrl, '_blank')
+    // }
 }
 
 var articleSide = new Vue({

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

@@ -436,10 +436,52 @@ let searchTop = new Vue({
         searchKeys: "",
         right_drawer: false,
         activeNames: '', // active names
+        keywords: '',
+        keywordsList: [],
+        selectUlKeys: null,
     },
     mounted() {
     },
+    watch: {
+    //    关键词搜索
+        keywords(val) {
+            if (val) {
+                setTimeout(() => {
+                    this.getKeywordsList(val)
+                }, 500)
+            }
+        },
+    },
     methods: {
+        async getKeywordsList(key) {
+            const {data} = await PublicApi.fetchQueryKeywordList({keyword: key})
+            this.keywordsList = data
+            this.selectUlKeys = document.getElementsByClassName('auto-select-list')[0]
+            if (data.length > 0) {
+                this.renderList()
+                this.selectUlKeys.style.display = 'block'
+            } else {
+                this.selectUlKeys.style.display = 'none'
+            }
+        },
+        renderList() {
+            this.selectUlKeys.innerHTML = ''
+            this.keywordsList.forEach((text) => {
+                const li = document.createElement('li');
+                li.innerHTML = text.keyword.replace(new RegExp(this.keywords, 'ig'), (match)=> '<span style="color: #FF5B00;">' + match + '</span>');
+                li.addEventListener('click', () => this.listItemClick(text));
+                this.selectUlKeys.appendChild(li);
+            })
+        },
+        listItemClick(text) {
+            this.keywords = text.keyword
+            this.selectUlKeys.innerHTML = ''
+            this.selectUlKeys.style.display = 'none'
+            this.itemClick(text.keyword)
+        },
+        itemClick: function (keyword) {
+            window.location.href = '/info/search-1.html?keyword='+keyword + '&linkageFlag=1';
+        },
         // h5弹窗搜索
         handlerH5Search() {
             let tip = this.searchKeys === '' ? '请输入文章关键字！' : this.searchKeys.length < 2 ? '请至少输入两个关键字！' : true;

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

@@ -187,15 +187,16 @@ var recommendation = new Vue({
             }
         },
         // 文件链接跳转
-        handleFileUrl(url) {
-            const fileUrl = url.split('?')[0]
-            let index = fileUrl.lastIndexOf('.');
-            let suffix = fileUrl.substring(index);
-            if (suffix === '.doc' || suffix === '.ppt' || suffix === '.pptx' || suffix === '.docx') {
-                window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url), '_black') // 下载
-            } else {
-                window.open(fileUrl, '_blank')
-            }
+        handleFileUrl(id) {
+            window.location.href = `/product-${id}.html?tabsIndex=4`
+            // const fileUrl = url.split('?')[0]
+            // let index = fileUrl.lastIndexOf('.');
+            // let suffix = fileUrl.substring(index);
+            // if (suffix === '.doc' || suffix === '.ppt' || suffix === '.pptx' || suffix === '.docx') {
+            //     window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url), '_black') // 下载
+            // } else {
+            //     window.open(fileUrl, '_blank')
+            // }
         }
     }
 })

src/main/resources/static/js/product/detail.js

@@ -737,6 +737,16 @@ var productDetail = new Vue({
         this.queryProductDetilsCoupons();
         this.getCommodityCombinationList();
         console.log('GLOBAL_CLUB_TYPE',GLOBAL_CLUB_TYPE)
+        const tabsIndex = window.location.search.split('=')[1]
+        if (tabsIndex) {
+            this.tabsIndex = tabsIndex
+        }
+        setTimeout(() => {
+            const cate_import = document.getElementById('category-import')
+            if (cate_import) {
+                cate_import.scrollIntoView({ behavior: "smooth" })
+            }
+        }, 500)
         // $('.productInfo').slide({
         //     mainCell:".tabCon"
         //     ,titCell:".tabTit span"

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

@@ -31,7 +31,7 @@
         </div>
       </div>
     </div>
-    <div class="hot-recommend" th:if="${productSellNumbers}">
+    <div class="hot-recommend" th:if="${#arrays.length(productSellNumbers)} > 0">
       <div class="hot-recommend-title">
         <div>你可能感兴趣的商品</div>
         <div>
@@ -51,7 +51,7 @@
         </div>
       </div>
     </div>
-    <div class="hot-recommend" th:if="${archiveFiles}">
+    <div class="hot-recommend" th:if="${#arrays.length(archiveFiles)} > 0">
       <div class="hot-recommend-title">
         <div>您可能感兴趣的美业资料</div>
         <div>
@@ -61,10 +61,10 @@
       <div class="hot-recommend-content">
         <div class="hot-recommend-content-item" th:each="file: ${archiveFiles}">
           <div>
-            <a href="javascript:void(0)" target="_blank" th:onclick="handleFileUrl([[${file.ossUrl}]])">
-              <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.ossUrl, 'pdf')}">
-              <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.ossUrl, 'doc')}">
-              <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.ossUrl, 'ppt')}">
+            <a href="javascript:void(0)" target="_blank" th:onclick="handleFileUrl([[${file.productId}]])">
+              <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'pdf')}">
+              <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'doc')}">
+              <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'ppt')}">
             </a>
           </div>
           <div>

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

@@ -13,14 +13,14 @@
         <div class="search auto-input" id="topSearch">
             <div class="search-info">
                 <label>
-                    <input class="keyword label-keyword" type="search" placeholder="搜索文章" autocomplete="off" />
+                    <input class="keyword label-keyword" v-model="keywords" type="text" placeholder="搜索文章" autocomplete="off" />
                 </label>
                 <a class="searchBtn icon" href="javascript:void(0);">搜索</a>
             </div>
             <div class="keywords">
-                <div th:each="label,count : ${labels}" th:if="${count.index} le 7">
+                <div th:each="label,count : ${labels}" th:if="${count.index} le 9">
                     <a th:labelId="${label.id}" th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}" th:class="${labelId==label.id}?'label-active':''"></a>
-                    <span th:if="${count.index} le 6"> / </span>
+                    <span th:if="${count.index} le 9"> / </span>
                 </div>
             </div>
         </div>
@@ -45,7 +45,7 @@
             <a class="searchBtn icon" href="javascript:void(0);" @click="handlerH5Search">搜索</a>
         </div>
         <div class="keywords">
-            <div th:each="label,count : ${labels}" @click.stop="show = !show" th:if="${count.index} le 7">
+            <div th:each="label,count : ${labels}" @click.stop="show = !show" th:if="${count.index} le 9">
                 <a th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}"></a>
             </div>
         </div>
@@ -64,13 +64,6 @@
 
     <!--导航栏-->
     <div class="nav">
-<!--        <div class="h5-head">-->
-<!--            <a class="index" href="/"><img src="/img/info/mall.png"></a>-->
-<!--&lt;!&ndash;            <a class="hotWord" href="javascript:void(0);">热搜词</a>&ndash;&gt;-->
-<!--        </div>-->
-<!--        <div class="logo">-->
-<!--            <a href="/" target="_blank"><img src="/img/base/logo_article@2x.png"/></a>-->
-<!--        </div>-->
         <div class="type">
             <div class="type-content" th:if="${articleType}">
                 <!-- <a class="home" href="/" target="_blank">商城</a> -->

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

@@ -25,7 +25,7 @@
             </div>
         </div>
     </div>
-    <div v-if="isPC" class="recommend">
+    <div v-if="isPC" class="recommend" th:if="${#arrays.length(productSellNumbers)} > 0">
         <p class="classify readerSify">
             你可能感兴趣的商品
             <span class="more-product">
@@ -47,7 +47,7 @@
             </div>
         </div>
     </div>
-    <div v-if="isPC" class="recommend">
+    <div v-if="isPC" class="recommend" th:if="${#arrays.length(archiveFiles)} > 0">
         <p class="classify readerSify">
             您可能感兴趣的美业资料
             <span class="more-product">
@@ -58,10 +58,10 @@
         </p>
         <div class="row" th:each="file: ${archiveFiles}">
             <div class="new-img xiao">
-                <a href="javascript:void(0);" th:onclick="handleFileUrl([[${file.ossUrl}]])" target="_blank">
-                    <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.ossUrl, 'pdf')}">
-                    <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.ossUrl, 'doc')}">
-                    <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.ossUrl, 'ppt')}">
+                <a href="javascript:void(0);" th:onclick="handleFileUrl([[${file.productId}]])" target="_blank">
+                    <img src="/img/article/PC--pdf.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'pdf')}">
+                    <img src="/img/info/PC-doc.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'doc')}">
+                    <img src="/img/info/PC-ppt.png" th:if="${#strings.containsIgnoreCase(file.fileName, 'ppt')}">
                 </a>
             </div>
             <div class="new-blurb xiao">

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

@@ -18,8 +18,16 @@
 <div class="tip-bar">
     <!--<div class="tip">提示：产品详情请到采美商城搜索</div>-->
     <!--面包屑-->
-    <div class="bar">
-        <a href="/" target="_blank">首页</a> &gt; <a  th:each="type: *{articleType}" th:if="${typeId}==${type.id}" th:text="${type.name}" href="javascript:void(0);" class="title newTitle"></a>&gt; 正文
+    <div th:if="${typeId}>0" class="bar">
+        <a th:each="type: ${articleType}" th:if="${typeId}==${type.id}" th:text="${type.name}" th:href="'/info/center-' + ${type.id} + '-1.html'" class="title newTitle"></a>
+        <a th:each="type: ${articleType}" th:if="${typeId}==${type.id}">> 正文</a>
+        <span th:each="type: ${articleType}">
+            <span th:each="childLink: ${type.linkList}" th:if="${typeId}==${childLink.id}">
+                <a th:text="${type.name}" th:href="'/info/center-' + ${type.id} + '-1.html'" class="title newTitle"></a>
+                <a th:if="${typeId}==${childLink.id}" th:href="'/info/center-' + ${childLink.id} + '-1.html'" class="title newTitle" th:text="'>' + ${childLink.name}"></a>
+                <a>> 正文</a>
+            </span>
+        </span>
     </div>
 </div>
 <!--主体内容-->

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

@@ -23,35 +23,6 @@
         </span>
     </div>
 </div>
-<!--<div class="info-banner PcBanner" th:if="${isSearch} and ${articleImages}">-->
-<!--    <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1" >-->
-<!--        <a th:href="${type.jumpLink}">-->
-<!--            <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />-->
-<!--        </a>-->
-<!--    </div>-->
-<!--    <div class="sider-banner">-->
-<!--        <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2">-->
-<!--            <a th:href="${type.jumpLink}">-->
-<!--                <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />-->
-<!--            </a>-->
-<!--        </div>-->
-<!--    </div>-->
-<!--    <div class="info-Notice" id="infoNotice">-->
-<!--        <div class="notice-title">-->
-<!--            <div>公告</div>-->
-<!--            <div>-->
-<!--                <a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a>-->
-<!--            </div>-->
-<!--        </div>-->
-<!--        <div class="notice-content" v-cloak>-->
-<!--            <ul class="notice-content-list">-->
-<!--                <li class="notice-content-li" v-for="(list ,index) in newsList" :key="index" @click="hanldDetails(list.id)">-->
-<!--                    {{ list.title }}-->
-<!--                </li>-->
-<!--            </ul>-->
-<!--        </div>-->
-<!--    </div>-->
-<!--</div>-->
 <div class="info-banner AppBanner" th:if="${isSearch} and ${articleImages}">
     <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1 and ${type.headAppBanner}" >
         <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">

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

@@ -90,10 +90,10 @@
                     </ul>
                     <ul v-else>
                         <li v-for="item in articlerecommendationData">
-                            <a class="info-item" @click="handleFileUrl(item.ossUrl)">
+                            <a class="info-item" @click="handleFileUrl(item.productId)">
                                 <div>
-                                    <img src="/img/article/PC--pdf.png" v-if="/\.pdf/.test(item.ossUrl)">
-                                    <img src="/img/info/PC-doc.png" v-else-if="/\.doc/.test(item.ossUrl)">
+                                    <img src="/img/article/PC--pdf.png" v-if="/\.pdf/.test(item.fileName)">
+                                    <img src="/img/info/PC-doc.png" v-else-if="/\.doc/.test(item.fileName)">
                                     <img src="/img/info/PC-ppt.png" v-else>
                                 </div>
                                 <div v-html="item.fileName"></div>

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

@@ -674,7 +674,7 @@
                     </div>
                     <!-- 视频区域 -->
                     <div class="cm-category">
-                        <div class="cm-category-title">视频资料</div>
+                        <div class="cm-category-title" id="category-import">视频资料</div>
                         <div class="cm-content">
                             <div class="cm-none" v-if="videoArchiveList.length<=0">暂无相关资料</div>
                             <template v-else>