[UI] 添加搜索界面

app.json

@@ -5,7 +5,9 @@
     "pages/author-list/author-list",
     "pages/favorite/favorite",
     "pages/poem-detail/poem-detail",
-    "pages/author-detail/author-detail"
+    "pages/author-detail/author-detail",
+    "pages/search/search",
+    "pages/search-result/search-result"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/poem-list/poem-list.js

@@ -43,6 +43,11 @@ Page({
       })
     })
   },
+  search: function () {
+    wx.navigateTo({
+      url: '/pages/search/search',
+    })
+  },
   // 更换分类
   changeCategorys(e) {
     let select = e.detail.value

pages/poem-list/poem-list.json

@@ -3,6 +3,7 @@
   "t-tabs": "tdesign-miniprogram/tabs/tabs",
   "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
   "poem-list": "/components/poem-list/poem-list",
-  "poem-translate": "/components/poem-translate/poem-translate"
+  "poem-translate": "/components/poem-translate/poem-translate",
+  "t-search": "tdesign-miniprogram/search/search"
   }
 }

pages/poem-list/poem-list.wxml

@@ -8,5 +8,8 @@
     wx:key="id" 
     value="{{item.id}}" />
   </t-tabs>
+  <view class="search-box">
+    <t-search placeholder="搜索诗词/作者/内容" center bind:focus="search" />
+  </view>
   <poem-list poems="{{poems}}" status="{{status}}" />
 </view>

pages/poem-list/poem-list.wxss

@@ -1,3 +1,7 @@
 .tabs {
   height: 100vh;
+}
+
+.search-box {
+  padding: 20rpx 20rpx;
 }

pages/search-result/search-result.js

@@ -0,0 +1,66 @@
+// pages/search-result/search-result.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/search-result/search-result.json

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

pages/search-result/search-result.wxml

@@ -0,0 +1,2 @@
+<!--pages/search-result/search-result.wxml-->
+<text>pages/search-result/search-result.wxml</text>

pages/search-result/search-result.wxss

@@ -0,0 +1 @@
+/* pages/search-result/search-result.wxss */

pages/search/search.js

@@ -0,0 +1,68 @@
+// pages/search/search.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    recommend: [
+      '此处均为测试数据！', '黄鹤楼', '扬州', '春', '黄鹤楼送孟浩然之广陵', '瀑布', '李白', '忆江南'
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/search/search.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "t-search": "tdesign-miniprogram/search/search",
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}

pages/search/search.wxml

@@ -0,0 +1,9 @@
+<view class="search-container">
+  <t-search placeholder="搜索诗句/作者/内容" center />
+  <view class="recommend-title">最多搜索:</view>
+  <view class="recommend-list">
+    <t-tag class="recommend-tag" 
+      wx:for="{{recommend}}"
+      wx:for-item="tag">{{tag}}</t-tag>
+  </view>
+</view>

pages/search/search.wxss

@@ -0,0 +1,16 @@
+.search-container {
+  padding: 20rpx;
+}
+
+.recommend-title {
+  margin-top: 20rpx;
+  margin-left: 10rpx;
+}
+
+.recommend-list {
+  margin-top: 10rpx;
+}
+
+.recommend-tag {
+  margin: 10rpx 10rpx;
+}

project.private.config.json

@@ -28,6 +28,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "search",
+          "pathName": "pages/search/search",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }