商品资料库修改

src/main/resources/static/css/document/beauty-archive.css

@@ -137,6 +137,7 @@ body{color:#4A4F58;background:#fff;padding-top: 26vw;}
 .cm-tab-content .cm-list .cm-section .cm-content{width:69vw;padding-left:3.2vw;-webkit-box-sizing:border-box;box-sizing:border-box}
 .cm-tab-content .cm-list .cm-section.no-border{border:0}
 .cm-tab-content .cm-list .cm-section .cm-content .cm-title{display:-webkit-box;height:11vw;margin-bottom:2.8vw;font-size:3.6vw;color:#4A4F58;line-height:1.5;word-break:break-all;text-align:justify;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2;overflow:hidden}
+.cm-tab-content .cm-list .cm-section .cm-content .cm-title span{color: #E15616} /*搜索结果的标题用span标签包裹*/
 .cm-tab-content .cm-list .cm-section .cm-content .cm-param{font-size:3vw;font-weight:400;color:#4A4F58;margin-top:1.6vw}
 .cm-tab-content .cm-list .cm-section .cm-content .cm-param span:nth-child(1){color:#9AA5B5}
 /*加载更多*/

src/main/resources/static/js/document/beauty-archive.js

@@ -116,6 +116,12 @@ var beautyArchive = new Vue({
             this.productList = [];
             this.getList();
         },
+        // 高亮文字
+        formatTitle: function(val){
+            var reg = new RegExp(this.listQuery.keyword, 'g');
+            var str = '<span>' + this.listQuery.keyword + '</span>';
+            return val.replace(reg, str);
+        },
         //搜索
         handleSearch: function (keyword) {
             this.listQuery.keyword = keyword;
@@ -123,6 +129,7 @@ var beautyArchive = new Vue({
             this.productList = [];
             this.openSearch = true;
             this.getList();
+            console.log(this.listQuery.keyword);
         },
         //跳转到商品详情
         handleToDetail: function (product) {

src/main/resources/templates/document/beauty-archive-detail.html

@@ -34,13 +34,13 @@
         <!--顶部产品介绍-->
         <div class="cm-header cm-container cm-clearfix">
             <div class="cm-cover">
-                <img :src="archiveProductInfo.productImage" alt="">
+                <img :src="archiveProductInfo.productImage ? archiveProductInfo.productImage : '/img/base/placeholder.png'" alt="">
             </div>
             <div class="cm-content">
                 <div class="cm-title" v-html="archiveProductInfo.productName"></div>
                 <div class="cm-param">
                     <span>供应商：</span>
-                    <span>{{ archiveProductInfo.shopName }}</span>
+                    <span>{{ archiveProductInfo.shopName  || '暂无' }}</span>
                 </div>
                 <div class="cm-param">
                     <span>商品属性：</span>
@@ -125,8 +125,8 @@
                     <template v-else>
                         <div class="cm-section clear" v-for="(item, index) in fileArchiveList">
                             <div class="cm-cover">
-                                <img src="/img/info/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-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 class="cm-detail">

src/main/resources/templates/document/beauty-archive.html

@@ -20,7 +20,7 @@
                 <div class="cm-fl cm-title" v-if="isPC">美业资料</div>
                 <div class="cm-fr">
                     <div class="cm-search">
-                        <input class="cm-keyword" v-model="keyword" placeholder="请输入商品名称/供应商名" type="text"/>
+                        <input class="cm-keyword" v-model="keyword" placeholder="请输入商品名称/供应商名" @keyup.enter="handleSearch(keyword)" type="text"/>
                         <a href="javascript:void(0)" @click="handleSearch(keyword)" class="cm-search-btn icon"></a>
                     </div>
                 </div>
@@ -47,13 +47,14 @@
                 <div class="cm-section cm-clearfix " :class="{'no-border': index === 0}" :key="index"
                      @click="handleToDetail(product)">
                     <div class="cm-fl cm-cover">
-                        <img :src="product.productImage" alt="product.shopName">
+                        <img :src="product.productImage ? product.productImage : '/img/base/placeholder.png'" :alt="product.shopName">
                     </div>
                     <div class="cm-fl cm-content">
-                        <div class="cm-title" v-html="product.productName"></div>
+                        <div class="cm-title" v-if="openSearch" v-html="formatTitle(product.productName)"></div>
+                        <div class="cm-title" v-html="product.productName" v-else></div>
                         <div class="cm-param">
                             <span>供应商：</span>
-                            <span v-html="product.shopName"></span>
+                            <span v-html="product.shopName || '暂无'"></span>
                         </div>
                         <div class="cm-param">
                             <span>商品属性：</span>

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

@@ -376,8 +376,8 @@
                             <template v-else>
                                 <div class="clear cm-section" v-for="(item, index) in fileArchiveList">
                                     <div class="cm-cover">
-                                        <img src="/img/info/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-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 class="cm-detail">