Commit aadd2d82898958a8a262dc225131583bcb6eb039
1 parent
b3f9a9bc
1、关键字标红
2、细节优化
Showing
8 changed files
with
80 additions
and
5 deletions
src/common/helper.class.js
| ... | ... | @@ -173,4 +173,27 @@ export default class Helper { |
| 173 | 173 | |
| 174 | 174 | /* 数字格式化 结束 */ |
| 175 | 175 | |
| 176 | + /* 数据格式处理 开始 */ | |
| 177 | + | |
| 178 | + /** | |
| 179 | + * 对象内指定字符串内容替换 | |
| 180 | + * @param {Object} o [目标对象] | |
| 181 | + * @param {String} key [目标字段名] | |
| 182 | + * @param {String} oldString [原始字符串] | |
| 183 | + * @param {String} newString [新字符串] | |
| 184 | + */ | |
| 185 | + objectStringReplaceAll(o, key, oldString, newString) { | |
| 186 | + | |
| 187 | + // 判断对象是否为数组 | |
| 188 | + if (typeof o === "object" && o !== null && o.length) { | |
| 189 | + | |
| 190 | + // 遍历数组，替换内容 | |
| 191 | + for (let i = 0; i < o.length; i++) { | |
| 192 | + o[i][key] = o[i][key].replace(new RegExp(oldString, "gm"), newString); | |
| 193 | + } | |
| 194 | + } | |
| 195 | + } | |
| 196 | + | |
| 197 | + /* 数据格式处理 结束 */ | |
| 198 | + | |
| 176 | 199 | } |
| 177 | 200 | \ No newline at end of file | ... | ... |
src/components/darenList/darenList.less
| ... | ... | @@ -9,6 +9,8 @@ |
| 9 | 9 | display: flex; |
| 10 | 10 | justify-content: flex-start; |
| 11 | 11 | align-items: center; |
| 12 | + width: 570px; | |
| 13 | + height: auto; | |
| 12 | 14 | .avatar-box { |
| 13 | 15 | width: 80px; |
| 14 | 16 | height: 80px; |
| ... | ... | @@ -22,19 +24,28 @@ |
| 22 | 24 | } |
| 23 | 25 | .user-info { |
| 24 | 26 | margin-left: 30px; |
| 27 | + width: 460px; | |
| 25 | 28 | .name { |
| 26 | 29 | color: #4A4A4A; |
| 27 | 30 | font-size: 28px; |
| 28 | 31 | font-weight: 400; |
| 32 | + width: 100%; | |
| 29 | 33 | white-space: nowrap; |
| 30 | 34 | text-overflow: ellipsis; |
| 31 | 35 | overflow: hidden; |
| 36 | + /deep/ .k { | |
| 37 | + color: #FC1541; | |
| 38 | + } | |
| 32 | 39 | } |
| 33 | 40 | .desc { |
| 34 | 41 | margin-top: 10px; |
| 35 | 42 | color: #B4B4B4; |
| 36 | 43 | font-size: 22px; |
| 37 | 44 | font-weight:400; |
| 45 | + width: 100%; | |
| 46 | + white-space: nowrap; | |
| 47 | + text-overflow: ellipsis; | |
| 48 | + overflow: hidden; | |
| 38 | 49 | } |
| 39 | 50 | } |
| 40 | 51 | } | ... | ... |
src/components/darenList/darenList.vue
| ... | ... | @@ -7,9 +7,7 @@ |
| 7 | 7 | <img v-lazy="item.user_img || item.logo" class="avatar-img" /> |
| 8 | 8 | </div> |
| 9 | 9 | <div class="user-info"> |
| 10 | - <div class="name"> | |
| 11 | - {{item.title}} | |
| 12 | - </div> | |
| 10 | + <div class="name" v-html="item.title"></div> | |
| 13 | 11 | <div class="desc"> |
| 14 | 12 | {{item.fans_count}}粉丝 |
| 15 | 13 | </div> | ... | ... |
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
| ... | ... | @@ -7,7 +7,7 @@ |
| 7 | 7 | </div> |
| 8 | 8 | <div class="content-box"> |
| 9 | 9 | <div class="top-box"> |
| 10 | - <div class="title">{{item.title}}</div> | |
| 10 | + <div class="title" v-html="item.title"></div> | |
| 11 | 11 | <div class="desc-box"> |
| 12 | 12 | <div class="desc">评价：{{item.grade}}</div> |
| 13 | 13 | <div class="desc">月销：{{item.sale_count}}</div> | ... | ... |
src/pages/search/search.vue
| ... | ... | @@ -234,6 +234,11 @@ |
| 234 | 234 | |
| 235 | 235 | // 设置商品数据 |
| 236 | 236 | if (datas.goods.length) { |
| 237 | + | |
| 238 | + // 替换标题中的keyword | |
| 239 | + this.keywordHigh(datas.goods, ext.keyword); | |
| 240 | + | |
| 241 | + // 设置数据 | |
| 237 | 242 | this.$set(this.goodsLists, "list", datas.goods); |
| 238 | 243 | this.$set(this.titles.goods, "title", ext.keyword + "-商品"); |
| 239 | 244 | this.$set(this.titles.goods, "more", this.displayPage.status.GOODS); |
| ... | ... | @@ -241,6 +246,11 @@ |
| 241 | 246 | |
| 242 | 247 | // 设置达人数据 |
| 243 | 248 | if (datas.shop.length) { |
| 249 | + | |
| 250 | + // 替换标题中的keyword | |
| 251 | + this.keywordHigh(datas.shop, ext.keyword); | |
| 252 | + | |
| 253 | + // 设置数据 | |
| 244 | 254 | this.$set(this.darenLists, "list", datas.shop); |
| 245 | 255 | this.$set(this.titles.daren, "title", ext.keyword + "-达人"); |
| 246 | 256 | this.$set(this.titles.daren, "more", this.displayPage.status.DAREN); |
| ... | ... | @@ -248,6 +258,11 @@ |
| 248 | 258 | |
| 249 | 259 | // 设置美食数据 |
| 250 | 260 | if (datas.foodsShop.length) { |
| 261 | + | |
| 262 | + // 替换标题中的keyword | |
| 263 | + this.keywordHigh(datas.foodsShop, ext.keyword); | |
| 264 | + | |
| 265 | + // 设置数据 | |
| 251 | 266 | this.$set(this.foodLists, "list", datas.foodsShop); |
| 252 | 267 | this.$set(this.foodLists, "coordinate", ext.coordinate); |
| 253 | 268 | this.$set(this.titles.food, "title", ext.keyword + "-美食"); |
| ... | ... | @@ -369,6 +384,9 @@ |
| 369 | 384 | // 设置商品数据 |
| 370 | 385 | if (datas.goods.length) { |
| 371 | 386 | |
| 387 | + // 替换标题中的keyword | |
| 388 | + this.keywordHigh(datas.goods, ext.keyword); | |
| 389 | + | |
| 372 | 390 | // 判断数据处理方式 |
| 373 | 391 | if (this.paging.page > 1) { // 追加数据 |
| 374 | 392 | this.$set(this.goodsLists, "list", [...this.goodsLists.list, ...datas.goods]); |
| ... | ... | @@ -390,6 +408,9 @@ |
| 390 | 408 | // 设置达人数据 |
| 391 | 409 | if (datas.shop.length) { |
| 392 | 410 | |
| 411 | + // 替换标题中的keyword | |
| 412 | + this.keywordHigh(datas.shop, ext.keyword); | |
| 413 | + | |
| 393 | 414 | // 判断数据处理方式 |
| 394 | 415 | if (this.paging.page > 1) { |
| 395 | 416 | this.$set(this.darenLists, "list", [...this.darenLists.list, ...datas.shop]); |
| ... | ... | @@ -411,6 +432,9 @@ |
| 411 | 432 | // 设置美食数据 |
| 412 | 433 | if (datas.foodsShop.length) { |
| 413 | 434 | |
| 435 | + // 替换标题中的keyword | |
| 436 | + this.keywordHigh(datas.foodsShop, ext.keyword); | |
| 437 | + | |
| 414 | 438 | // 判断数据处理方式 |
| 415 | 439 | if (this.paging.page > 1) { |
| 416 | 440 | this.$set(this.foodLists, "list", [...this.foodLists.list, ...datas.foodsShop]); |
| ... | ... | @@ -669,6 +693,19 @@ |
| 669 | 693 | }, |
| 670 | 694 | |
| 671 | 695 | /** |
| 696 | + * 搜索结果关键字title高亮 | |
| 697 | + * @param {Object} o [目标对象] | |
| 698 | + * @param {String} keyword [关键字] | |
| 699 | + */ | |
| 700 | + keywordHigh(o, keyword) { | |
| 701 | + | |
| 702 | + // 判断是否有字符串替换工具函数 | |
| 703 | + if (typeof this.$parent.helper === "object" && typeof this.$parent.helper.objectStringReplaceAll === "function") { | |
| 704 | + this.$parent.helper.objectStringReplaceAll(o, "title", keyword, "<span class='k'>" + keyword + "</span>"); | |
| 705 | + } | |
| 706 | + }, | |
| 707 | + | |
| 708 | + /** | |
| 672 | 709 | * 获取历史搜索结果Storage |
| 673 | 710 | */ |
| 674 | 711 | getSearchHistoryArr() { | ... | ... |