ADD

添加搜索分页，添加关键词高亮

miniprogram/components/itemCard/itemCard.js

@@ -10,7 +10,8 @@ Component({
    * 组件的属性列表
    */
   properties: {
-    item: Object
+    item: Object,
+    keyword: String
   },
 
   /**
@@ -20,6 +21,17 @@ Component({
     show: true
   },
 
+  lifetimes: {
+    ready: function () {
+      if (this.data.keyword) {
+        this.setData({
+          'item.name': this.data.item.name.replace(new RegExp(this.data.keyword, 'gi'), '<span style="color: #009195;">$&</span>'),
+          'item.brief': this.data.item.brief.replace(new RegExp(this.data.keyword, 'gi'), '<span style="color: #009195;">$&</span>')
+        })
+      }
+    }
+  },
+
   /**
    * 组件的方法列表
    */

miniprogram/components/itemCard/itemCard.wxml

@@ -10,10 +10,14 @@
     </view>
   </view>
   <view class="title-time">
-    <view class="title">{{item.name}}</view>
+    <view class="title">
+      <rich-text nodes="{{item.name}}"></rich-text>
+    </view>
     <view class="time primary-text-color">{{item.publish_time}}</view>
   </view>
-  <view class="sub-title">{{item.brief}}</view>
+  <view class="sub-title">
+    <rich-text nodes="{{item.brief}}"></rich-text>
+  </view>
   <imagePicker wx:if="{{item.poster.length}}" value="{{item.poster}}" max="1" image-width="698" image-height="330"
     readonly />
   <imagePicker wx:if="{{!item.poster.length && item.photo.length}}" value="{{item.photo}}" max="1"

miniprogram/pages/search/search.js

@@ -1,5 +1,3 @@
-const hotTagData = require('../../data/hotTagData.js')
-const hotBarData = require('../../data/hotBarData.js')
 const util = require('../../utils/util.js')
 
 Page({
@@ -12,6 +10,7 @@ Page({
     toggleEnable: true,
     searchEnable: false,
     searchText: '',
+    searched: false,
     hotTagData: [],
     hotBarData: [],
     pageToken: 0,
@@ -23,14 +22,17 @@ Page({
   update: function (e) {
     this.setData({
       searchText: e.detail.value,
+      searched: false,
       searchResult: []
     })
   },
 
   focus: function () {
-    if (!this.data.toggleEnable || this.data.searchEnable) return
-    this.data.toggleEnable = false
+    if (!this.data.toggleEnable || this.data.searchEnable) {
+      return
+    }
     this.setData({
+      toggleEnable: false,
       searchEnable: true
     })
     this.animate('.cancel-button', [{
@@ -55,11 +57,15 @@ Page({
   },
 
   blur: function () {
-    if (this.data.searchText !== '') return
-    this.cancel()
+    if (this.data.searchText === '') {
+      this.cancel()
+    }
   },
 
   search: function () {
+    if (this.data.searchText === '') {
+      return
+    }
     let history = this.data.searchHistory
     if (history === undefined) history = []
     const index = history.indexOf(this.data.searchText)
@@ -71,6 +77,7 @@ Page({
     }
     history.splice(0, 0, this.data.searchText)
     this.setData({
+      searched: true,
       searchHistory: history
     })
     wx.setStorage({
@@ -142,10 +149,11 @@ Page({
   },
 
   cancel: function () {
-    if (!this.data.toggleEnable || !this.data.searchEnable) return
-    this.data.toggleEnable = false
+    if (!this.data.toggleEnable || !this.data.searchEnable) {
+      return
+    }
     this.setData({
-      searchText: '',
+      toggleEnable: false,
     })
     this.animate('.cancel-button', [{
         opacity: 1
@@ -165,6 +173,8 @@ Page({
       this.setData({
         toggleEnable: true,
         searchEnable: false,
+        searchText: '',
+        searched: false,
         searchResult: []
       })
     }.bind(this), 200)

miniprogram/pages/search/search.wxml

@@ -42,11 +42,11 @@
   bindscrolltolower="loadMore">
   <view class="result-bar">
     <view wx:for="{{searchResult}}" wx:for-item="msg" wx:key="_id">
-      <itemCard item="{{msg}}" />
+      <itemCard item="{{msg}}" keyword="{{searchText}}" />
     </view>
   </view>
-  <view wx:if="{{searchText == '' && searchResult.length == 0}}" wx:for="{{searchHistory}}" wx:for-item="keyword"
-    wx:key="*this" class="search-history" data-search-tag="{{keyword}}" catchtap="searchTag">
+  <view wx:if="{{!searched}}" wx:for="{{searchHistory}}" wx:for-item="keyword" wx:key="*this" class="search-history"
+    data-search-tag="{{keyword}}" catchtap="searchTag">
     <view>{{keyword}}</view>
     <view data-search-tag="{{keyword}}" catchtap="removeHistory">×</view>
   </view>