1、关键字标红

2、细节优化

1、关键字标红
2、细节优化
王强
1 parent b3f9a9bc
Showing 8 changed files with 80 additions and 5 deletions
src/common/helper.class.js
src/components/darenList/darenList.less
src/components/darenList/darenList.vue
src/components/goodsItem_4/goodsItem_4.less
src/components/goodsItem_4/goodsItem_4.vue
src/components/goodsItem_5/goodsItem_5.less
src/components/goodsItem_5/goodsItem_5.vue
src/pages/search/search.vue
@@ -173,4 +173,27 @@ export default class Helper {
 	/* 数字格式化 结束 */
+	/* 数据格式处理 开始 */
+
+	/**
+	 * 对象内指定字符串内容替换
+	 * @param {Object} o [目标对象]
+	 * @param {String} key [目标字段名]
+	 * @param {String} oldString [原始字符串]
+	 * @param {String} newString [新字符串]
+	 */
+	objectStringReplaceAll(o, key, oldString, newString) {
+
+		// 判断对象是否为数组
+		if (typeof o === "object" && o !== null && o.length) {
+
+			// 遍历数组，替换内容
+			for (let i = 0; i < o.length; i++) {
+				o[i][key] = o[i][key].replace(new RegExp(oldString, "gm"), newString);
+			}
+		}
+	}
+
+	/* 数据格式处理 结束 */
+
 }
 \ No newline at end of file
@@ -9,6 +9,8 @@
             display: flex;
             justify-content: flex-start;
             align-items: center;
+            width: 570px;
+            height: auto;
             .avatar-box {
                 width: 80px;
                 height: 80px;
@@ -22,19 +24,28 @@
             }
             .user-info {
                 margin-left: 30px;
+                width: 460px;
                 .name {
                     color: #4A4A4A;
                     font-size: 28px;
                     font-weight: 400;
+                    width: 100%;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     overflow: hidden;
+                    /deep/ .k {
+                        color: #FC1541;
+                    }
                 }
                 .desc {
                     margin-top: 10px;
                     color: #B4B4B4;
                     font-size: 22px;
                     font-weight:400;
+                    width: 100%;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
                 }
             }
         }
@@ -7,9 +7,7 @@
                     <img v-lazy="item.user_img || item.logo" class="avatar-img" />
                 </div>
                 <div class="user-info">
-                    <div class="name">
-                        {{item.title}}
-                    </div>
+                    <div class="name" v-html="item.title"></div>
                     <div class="desc">
                         {{item.fans_count}}粉丝
                     </div>
@@ -42,6 +42,9 @@
 					white-space: nowrap;
 					text-overflow: ellipsis;
 					overflow: hidden;
+					/deep/ .k {
+						color: #FC1541;
+					}
 				}
 			}
 			.bottom-box {
@@ -6,7 +6,7 @@
 			</div>
 			<div class="content-box">
 				<div class="top-box">
-					<div class="title">{{item.title}}</div>
+					<div class="title" v-html="item.title"></div>
 				</div>
 				<div class="bottom-box">
 					<div class="price-box">
@@ -47,6 +47,9 @@
 						white-space: nowrap;
 						text-overflow: ellipsis;
 						overflow: hidden;
+						/deep/ .k {
+							color: #FC1541;
+						}
 					}
 					.desc-box {
 						display: flex;
@@ -7,7 +7,7 @@
 				</div>
 				<div class="content-box">
 					<div class="top-box">
-						<div class="title">{{item.title}}</div>
+						<div class="title" v-html="item.title"></div>
 						<div class="desc-box">
 							<div class="desc">评价：{{item.grade}}</div>
 							<div class="desc">月销：{{item.sale_count}}</div>
@@ -234,6 +234,11 @@
                     // 设置商品数据
                     if (datas.goods.length) {
+
+                        // 替换标题中的keyword
+                        this.keywordHigh(datas.goods, ext.keyword);
+
+                        // 设置数据
                         this.$set(this.goodsLists, "list", datas.goods);
                         this.$set(this.titles.goods, "title", ext.keyword + "-商品");
                         this.$set(this.titles.goods, "more", this.displayPage.status.GOODS);
@@ -241,6 +246,11 @@
                     // 设置达人数据
                     if (datas.shop.length) {
+
+                        // 替换标题中的keyword
+                        this.keywordHigh(datas.shop, ext.keyword);
+
+                        // 设置数据
                         this.$set(this.darenLists, "list", datas.shop);
                         this.$set(this.titles.daren, "title", ext.keyword + "-达人");
                         this.$set(this.titles.daren, "more", this.displayPage.status.DAREN);
@@ -248,6 +258,11 @@
                     // 设置美食数据
                     if (datas.foodsShop.length) {
+
+                        // 替换标题中的keyword
+                        this.keywordHigh(datas.foodsShop, ext.keyword);
+
+                        // 设置数据
                         this.$set(this.foodLists, "list", datas.foodsShop);
                         this.$set(this.foodLists, "coordinate", ext.coordinate);
                         this.$set(this.titles.food, "title", ext.keyword + "-美食");
@@ -369,6 +384,9 @@
                             // 设置商品数据
                             if (datas.goods.length) {
+                                // 替换标题中的keyword
+                                this.keywordHigh(datas.goods, ext.keyword);
+
                                 // 判断数据处理方式
                                 if (this.paging.page > 1) {    // 追加数据
                                     this.$set(this.goodsLists, "list", [...this.goodsLists.list, ...datas.goods]);
@@ -390,6 +408,9 @@
                             // 设置达人数据
                             if (datas.shop.length) {
+                                // 替换标题中的keyword
+                                this.keywordHigh(datas.shop, ext.keyword);
+
                                 // 判断数据处理方式
                                 if (this.paging.page > 1) {
                                     this.$set(this.darenLists, "list", [...this.darenLists.list, ...datas.shop]);
@@ -411,6 +432,9 @@
                             // 设置美食数据
                             if (datas.foodsShop.length) {
+                                // 替换标题中的keyword
+                                this.keywordHigh(datas.foodsShop, ext.keyword);
+
                                 // 判断数据处理方式
                                 if (this.paging.page > 1) {
                                     this.$set(this.foodLists, "list", [...this.foodLists.list, ...datas.foodsShop]);
@@ -669,6 +693,19 @@
             },
             /**
+             * 搜索结果关键字title高亮
+             * @param {Object} o [目标对象]
+	         * @param {String} keyword [关键字]
+             */
+            keywordHigh(o, keyword) {
+
+                // 判断是否有字符串替换工具函数
+                if (typeof this.$parent.helper === "object" && typeof this.$parent.helper.objectStringReplaceAll === "function") {
+                    this.$parent.helper.objectStringReplaceAll(o, "title", keyword, "<span class='k'>" + keyword + "</span>");
+                }
+            },
+
+            /**
              * 获取历史搜索结果Storage
              */
             getSearchHistoryArr() {