feat: support search

Author: LeeJim

README.md

@@ -81,7 +81,7 @@ module.exports = {
 
 ### v2.0.0
 
-- [ ] 支持搜索
+- [x] 支持搜索 `v1.1.0`
 - [ ] 支持个人分享 （可能受限个人小程序无法做到）
 
 ## 补充

miniprogram/app.json

@@ -8,7 +8,8 @@
     "pages/changelog/detail",
     "pages/learn/index",
     "pages/learn/detail",
-    "pages/cart/index"
+    "pages/cart/index",
+    "pages/search/index"
   ],
   "window": {
     "backgroundColor": "#f6f6f6",
@@ -34,6 +35,8 @@
     "t-tab-panel": "tdesign-miniprogram/tabs/tab-panel",
     "t-loading": "tdesign-miniprogram/loading/loading",
     "t-message": "tdesign-miniprogram/message/message",
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
+    "t-search": "tdesign-miniprogram/search/search",
     "t-switch": "tdesign-miniprogram/switch/switch",
     "t-steps": "tdesign-miniprogram/steps/steps",
     "t-step": "tdesign-miniprogram/steps/step-item"

miniprogram/pages/changelog/log.js

@@ -1,4 +1,11 @@
 export default [{
+  version: '1.1.0',
+  detail: [{
+    type: 'feature',
+    value: '支持搜索'
+  }],
+  date: '2022-03-19'
+}, {
   version: '1.0.0',
   detail: [{
     type: 'feature',

miniprogram/pages/index/index.js

@@ -6,6 +6,7 @@ Page({
   data: {
     list: [],
     value: 'index',
+    searchKeyword: '',
     tabbars: [{
       text: '首页',
       value: 'index',
@@ -60,6 +61,15 @@ Page({
     })
   },
 
+  handleToSearch() {
+    const content = this.data.searchKeyword.trim();
+    wx.navigateTo({
+      url: '/pages/search/index?keyword=' + content,
+    }).then(() => {
+      this.setData({ searchKeyword: '' })
+    })
+  },
+
   onShareAppMessage() {
     return {
       title: '程序员做饭指南',

miniprogram/pages/index/index.json

@@ -1,5 +1,6 @@
 {
   "navigationBarTitleText": "程序员做饭",
+  "navigationStyle": "custom",
   "usingComponents": {
   }
 }

miniprogram/pages/index/index.less

@@ -1,3 +1,33 @@
 page {
-  padding: 48rpx 32rpx 200rpx;
+  padding: 0 0 200rpx;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+}
+
+.header {
+  // background-color: #fff;
+  padding: 24rpx 32rpx 0;
+}
+
+.search {
+  background: rgba(221, 221, 221, .7) !important;
+}
+
+.container {
+  margin-top: 32rpx;
+  padding: 0 32rpx;
 }

miniprogram/pages/index/index.wxml

@@ -1,4 +1,15 @@
 <!--index.wxml-->
+<t-navbar home-icon="slot" title="" >
+  <view class="brand" slot="home-icon">
+    <image class="logo" src="cloud://cloud1-9g17b7v0e010c809.636c-cloud1-9g17b7v0e010c809-1309933988/primary/240_F_292003584_6Zc3rf7qmIdGY2FMGrA1pQ7hjxYAZs0V.jpeg" />
+  </view>
+  <view class="name" slot="home-icon">做饭指南</view>
+</t-navbar>
+
+<view class="header">
+  <t-search t-class-input-container="search" model:value="{{searchKeyword}}" shape="round" placeholder="搜索菜谱" center bind:submit="handleToSearch" />
+</view>
+
 <view class="container">
   <list 
     wx:for="{{list}}" 

miniprogram/pages/search/index.js

@@ -0,0 +1,89 @@
+import cookbook from '../../data.js';
+import config from '../../config/index'
+
+Page({
+  data: {
+    keyword: '',
+    result: [],
+    isLoading: false,
+    focus: false,
+    chineseMap: config.chineseMap,
+    themeMap: {
+      dessert: 'danger',
+      breakfast: 'success',
+      staple: 'warning'
+    }
+  },
+
+  onLoad(options) {
+    let keyword = options.keyword.trim()
+    if (keyword) {
+      this.setData({ keyword });
+      this.doSearch(keyword)
+    }
+  },
+
+  handleSearchClear() {
+    this.setData({
+      result: [],
+      keyword: '',
+      focus: true
+    })
+  },
+
+  handleSearch({ detail }) {
+    if (detail.value == '') {
+      this.setData({ result: [] })
+      return
+    };
+
+    this.setData({ isLoading: true })
+    if (this.lastTrigger) {
+      clearTimeout(this.lastTrigger)
+    }
+    this.lastTrigger = setTimeout(() => {
+      this.doSearch(detail.value)
+    }, 500)
+  },
+
+  doSearch(keyword) {
+    const fuzzySearch = (key) => {
+      if (typeof key == 'string') return key.indexOf(keyword) > -1
+      if (Array.isArray(key)) {
+        return key.some(item => fuzzySearch(item))
+      }
+      if (typeof key == 'object') {
+        return Object.keys(key).some(item => fuzzySearch(item))
+      }
+      return false
+    }
+    const result = cookbook.filter(cb => {
+      const isTitleMatch = cb.name.indexOf(keyword) > -1;
+      // const isDescMatch = fuzzySearch(cb.desc)
+
+      return isTitleMatch;
+    })
+    this.setData({
+      result,
+      isLoading: false
+    })
+    this.updateViews(keyword)
+  },
+
+  updateViews(key) {
+    wx.cloud.callFunction({
+      name: 'updateViews',
+      data: {
+        id: key,
+        type: 'search'
+      },
+    })
+  },
+
+  onShareAppMessage() {
+    return {
+      title: '我推荐的菜谱',
+      path: '/pages/search/index?keyword=' + this.data.keyword
+    }
+  }
+})

miniprogram/pages/search/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

miniprogram/pages/search/index.less

@@ -0,0 +1,24 @@
+page {
+  background-color: #fff;
+}
+
+.container {
+  padding: 32rpx;
+}
+
+.result {
+  margin-top: 24rpx;
+}
+
+.tips {
+  text-align: center;
+  font-size: 28rpx;
+  color: #999;
+  margin-bottom: 24rpx;
+}
+
+.loading-box {
+  margin-top: 24rpx;
+  display: flex;
+  justify-content: center;
+}