采美百科页面接口调试

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

@@ -4,7 +4,7 @@
     .bk-list-empty{position:absolute;left:0;top:0;right:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;margin-top:80px;margin-bottom:48px}
     .bk-list-empty img{display:block;width:180px;height:180px}
     .bk-list-empty .bk-title{font-size:14px;color:#B2B2B2}
-    .bk-list{display:none;padding:0 32px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .bk-list{padding:0 32px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
     .bk-list .bk-list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:24px 0;border-bottom:1px solid #E0E7EB}
     .bk-list .bk-list-item:last-child{border-bottom:0}
     .bk-list .bk-list-item .bk-cover{position:relative;z-index:2;width:260px;height:168px;-ms-flex-negative:0;flex-shrink:0}

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

@@ -51,5 +51,9 @@ $(function () {
     $('.bk-login .mask').click(function () {
         $('.bk-login').fadeOut();
     });
+    $('#searchForm').on('submit', function(){
+        location.href = '/encyclopedia/search.html?keyword=' + $('#searchInput').val()
+        return false
+    })
 })
 

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

@@ -0,0 +1,48 @@
+new Vue({
+    el: '#searchList',
+    data: {
+        listQuery: {
+            shopId: '',
+            id: '', //词条id,
+            name: '', //词条名称
+            typeId: '', //分类id
+            auditStatus: '', //百科审核状态：1待审核，2审核通过，3审核失败
+            onlineStatus: '', //百科上线状态：1待上线，2已上线，3已下线
+            status: '', //状态：0保存草稿箱，1已发布
+            pageNum: 1, //页数
+            pageSize: 10 //条数
+        },
+        totalPage: 0,
+        totalRecord: 0,
+        hasNextPage: false,
+        list: [],
+    },
+    created(){
+        this.listQuery.name = decodeURIComponent(CAIMEI.getUrlParam('keyword'))
+        this.$nextTick(()=>{
+            $('#searchInput').val(this.listQuery.name)
+        })
+        this.getList()
+    },
+    methods: {
+        filterList() {
+            this.listQuery.pageNum = 1
+            this.getList()
+        },
+        getList(){
+            const self = this
+            if(this.listQuery.pageNum > this.totalPage){
+                this.listQuery.pageNum = this.totalPage
+            }
+            if(this.listQuery.pageNum < 1){
+                this.listQuery.pageNum = 1
+            }
+            shopBikeApi.FetchEntryList(this.listQuery, function (res) {
+                self.list = res.data.results
+                self.totalPage = res.data.totalPage
+                self.hasNextPage = res.data.hasNextPage
+                self.totalRecord = res.data.totalRecord
+            })
+        }
+    }
+})

src/main/resources/static/js/supplier-center/encyclopedia/edit.js

@@ -266,6 +266,7 @@ const edit = new Vue({
                 this.formData.videoList = this.filterVideoList(this.fileList)
                 await this.$refs.ruleForm.validate()
                 const params = {
+                    shopId: this.formData.shopId,
                     id: this.formData.id, // 词条id
                     name: this.formData.name, // 词条名称
                     alias: this.formData.alias, // 义项名
@@ -292,6 +293,7 @@ const edit = new Vue({
             shopBikeApi.SaveEntrySumbit(params, function (res) {
                 CAIMEI.dialog('词条保存成功', false);
                 setTimeout(function () {
+                    debugger
                     self.handleBack()
                 }, 500)
             })

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

@@ -18,14 +18,14 @@
                     <span class="bk-name">菜单</span>
                     <span class="bk-search-close"></span>
                 </div>
-                <form method="get" action="/encyclopedia/search.html">
+                <form method="get" id="searchForm">
                     <div class="bk-search-control">
-                        <label><input type="text" placeholder="搜索词条"/></label>
+                        <label><input id="searchInput" type="text" placeholder="搜索词条"/></label>
                         <button type="submit">搜索</button>
                     </div>
                 </form>
                 <ul class="bk-hot-keyword">
-                    <li th:each="item : ${hotSeracherWords}" th:object="${item}">
+                    <li th:each="item : ${hotSeracherWords}" th:object="${item}" th:if="${(item.jumpType eq 1) or (item.jumpType eq 4)}">
                         <a th:href="'/encyclopedia/search.html?keyword=' + *{keyWord}" th:if="*{jumpType eq 1}" th:text="*{keyWord}"></a>
                         <a th:href="*{jumpLink}" th:if="*{jumpType eq 4}" th:text="*{keyWord}"></a>
                     </li>
@@ -35,7 +35,7 @@
     </div>
     <div class="bk-nav">
         <ul class="bk-navbar bk-container">
-            <li th:each="item : ${TypeList}" th:object="${item}">
+            <li th:each="item,stat : ${TypeList}" th:object="${item}" th:if="${stat.index < 8}">
                 <a th:href="'/encyclopedia/list-' + *{typeId} + '.html'" th:text="*{name}"></a>
             </li>
             <li><a href="/encyclopedia/about.html">走进百科</a></li>

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

@@ -11,46 +11,38 @@
     <link rel="stylesheet" th:href="@{/css/encyclopedia/search.css(v=${version})}">
 </head>
 <body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
 <!-- 顶部公共区域 -->
 <template th:replace="encyclopedia/components/header"></template>
 <!-- 顶部公共区域 end -->
 
-<main>
-    <div class="bk-list-result bk-container">为您找到相关结果<span>9</span>条</div>
-    <div class="bk-list-empty bk-container">
+<main id="searchList" v-cloak>
+    <div class="bk-list-result bk-container">为您找到相关结果<span v-text="totalRecord"></span>条</div>
+    <div class="bk-list-empty bk-container" v-if="totalRecord === 0">
         <img src="/img/encyclopedia/assets/pc-icon-empty.png">
         <div class="bk-title">未找到相关结果</div>
     </div>
-    <div class="bk-list bk-container">
-        <a href="/encyclopedia/detail-1.html" class="bk-list-item">
-            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
-            <div class="bk-info">
-                <h2>如何有效提升产研效率和质量？</h2>
-                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
-                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
-            </div>
-        </a>
-        <a href="#" class="bk-list-item">
-            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
-            <div class="bk-info">
-                <h2>如何有效提升产研效率和质量？</h2>
-                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
-                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
-            </div>
-        </a>
-        <a href="#" class="bk-list-item">
-            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
-            <div class="bk-info">
-                <h2>如何有效提升产研效率和质量？</h2>
-                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
-                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
-            </div>
-        </a>
+    <div class="bk-list bk-container" v-else>
+        <template v-for="item in list">
+            <a :href="'/encyclopedia/detail-' + item.id + '.html'" class="bk-list-item" :key="item.id">
+                <div class="bk-cover"><img :src="item.image" :alt="item.name"/></div>
+                <div class="bk-info">
+                    <h2 v-html="item.name"></h2>
+                    <p v-html="item.discription"></p>
+                    <div class="bk-info-footer"><span>浏览量：{{item.pv}}</span><span>{{item.publishTime}}</span></div>
+                </div>
+            </a>
+        </template>
     </div>
 </main>
 
 <!-- 底部区域 -->
 <template th:replace="encyclopedia/components/footer"></template>
 <!-- 底部区域 end -->
+<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/utils.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/shopBaike.service.js(v=${version})}"></script>
+<script th:src="@{/js/encyclopedia/search.js(v=${version})}"></script>
 </body>
 </html>