'增加搜索页面'

app.json

@@ -6,7 +6,8 @@
     "pages/user/user",
     "pages/index/bangdan/bangdan",
     "pages/details/details",
-    "pages/user/phoneLogin/phoneLogin"
+    "pages/user/phoneLogin/phoneLogin",
+    "pages/search/search"
   ],
   "window": {
     "navigationBarTitleText": "喜马拉雅",
@@ -15,33 +16,35 @@
     "navigationBarTextStyle": "black"
   },
   "tabBar": {
-    "color":"#cdcdcd",
+    "color": "#cdcdcd",
     "selectedColor": "#ff520f",
-    "list": [{
-      "pagePath": "pages/index/index",
-      "text": "首页",
-      "iconPath": "image/icon/home-icon.png",
-      "selectedIconPath": "image/icon/home-selecticon.png"
-    },
-    {
-      "pagePath": "pages/classification/classification",
-      "text": "分类",
-      "iconPath": "image/icon/fen-icon.png",
-      "selectedIconPath": "image/icon/fen-selecticon.png"
-    },
-    {
-      "pagePath": "pages/collection/collection",
-      "text": "收藏",
-      "iconPath": "image/icon/collection-icon.png",
-      "selectedIconPath": "image/icon/collection-selecticon.png"
-    },
-    {
-      "pagePath": "pages/user/user",
-      "text": "我的",
-      "iconPath": "image/icon/user-icon.png",
-      "selectedIconPath": "image/icon/user-selecticon.png"
-    }]
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页",
+        "iconPath": "image/icon/home-icon.png",
+        "selectedIconPath": "image/icon/home-selecticon.png"
+      },
+      {
+        "pagePath": "pages/classification/classification",
+        "text": "分类",
+        "iconPath": "image/icon/fen-icon.png",
+        "selectedIconPath": "image/icon/fen-selecticon.png"
+      },
+      {
+        "pagePath": "pages/collection/collection",
+        "text": "收藏",
+        "iconPath": "image/icon/collection-icon.png",
+        "selectedIconPath": "image/icon/collection-selecticon.png"
+      },
+      {
+        "pagePath": "pages/user/user",
+        "text": "我的",
+        "iconPath": "image/icon/user-icon.png",
+        "selectedIconPath": "image/icon/user-selecticon.png"
+      }
+    ]
   },
-  "debug":true,
+  "debug": true,
   "sitemapLocation": "sitemap.json"
 }

component/search/search.js

@@ -11,7 +11,11 @@ Component({
 
     },
     methods: {
-        
+        goToSearch(){
+            wx.navigateTo({
+              url: '/pages/search/search',
+            })
+        }
     },
     created: function(){
 

component/search/search.wxml

@@ -1,4 +1,4 @@
-<view class="search marginTopBottom">
+<view class="search marginTopBottom" bindtap="goToSearch">
+  <text class="icon-search"></text>
   <view class="search-item">搜索你想听的节目</view>
-  <!-- <input placeholder="搜索你想听的节目"></input> -->
 </view>

component/search/search.wxss

@@ -3,6 +3,7 @@
     width: 90%;
     height: 50rpx;
     margin: 0rpx auto;
+    padding: 10rpx;
     border-radius: 10rpx;
     font-size: 25rpx;
     display: flex;
@@ -11,23 +12,6 @@
     background-color: rgb(240, 240, 240);
     margin-bottom: 20rpx;
   }
-  .search-box{
-    width: 95%;
-    height: 25rpx;
-    margin-left: 10rpx;
-  }
-  .icon-search{
-    margin-left: 20rpx;
-    line-height: 35rpx;
-  }
-  .search>input{
-    width: 90%;
-    height: 25rpx;
-    font-size: 25rpx;
-    position: relative;
-    top: -5rpx;
-    left: 10rpx;
-  }
   .search-item{
     width: 95%;
     height: 100%;

pages/search/search.js

@@ -0,0 +1,73 @@
+// pages/search/search.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    hotData:[
+      {title:"宝宝巴士",icon:"icon-top",color:"text-orange"},
+      {title:"孟鹤堂",icon:"icon-refresharrow",color:"text-red"},
+      {title:"三体",icon:"icon-top",color:"text-red"},
+      {title:"龙王殿",icon:"icon-top",color:"text-red"},
+      {title:"儿童恐龙故事",icon:"icon-top",color:"text-red"},
+      {title:"儿童版三国演义",icon:"icon-top",color:"text-red"},
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/search/search.json

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

pages/search/search.wxml

@@ -0,0 +1,38 @@
+<!-- 搜索框 -->
+<view class="search">
+  <view class="search-left">
+    <text class="icon-search"></text>
+    <input placeholder="搜索你想听的节目"></input>
+  </view>
+  <view class="search-right">
+    取消
+  </view> 
+</view>
+<!-- 搜索历史 -->
+<view class="history">
+  <!-- 提示标题 -->
+  <view class="title">
+    <view class="title-text">搜索历史</view>
+    <text class="icon-search"></text>
+  </view>
+  <!-- 内容 -->
+  <view class="history-content">
+    <view class="content-item">庆余年</view>
+  </view>
+</view>
+<!-- 热门搜索 -->
+<view class="hot">
+  <!-- 提示标题 -->
+  <view class="title">
+    <view class="title-text">热门搜索</view>
+  </view>
+  <view class="hot-content">
+    <view class="hot-items" wx:for="{{hotData}}" wx:key="index">
+      <view class="item-left">
+        <view class="text-red">{{index}}</view>
+        <view class="itemTitle">{{item.title}}</view>
+      </view>
+      <text class="{{item.icon}} itemIcon {{item.color}}"></text>
+    </view>
+  </view>
+</view>

pages/search/search.wxss

@@ -0,0 +1,111 @@
+/* 
+  ======== 
+  搜索部分css 
+  ========
+*/
+.search{
+  width: 90%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  margin: 0rpx auto;
+}
+
+.search-left{
+  flex: 4;
+  background-color: rgb(240, 240, 240);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10rpx 20rpx;
+  border-radius: 15rpx;
+}
+
+.search input{
+  width: 90%;
+  height: 100%;
+  font-size: 29rpx;
+  margin-left: 20rpx;
+}
+.search-right{
+  flex: 0.5;
+  font-size:30rpx;
+  color: #aaa;
+  text-align: center;
+  margin-left: 30rpx;
+}
+/* 
+  ======== 
+  搜索历史和热门搜索部分css 
+  ========
+*/
+
+.history{
+  width: 90%;
+  height: auto;
+  margin: 0rpx auto;
+  margin-top: 80rpx;
+}
+.history-content{
+  width: 100%;
+  height: auto;
+  margin-top: 30rpx;
+}
+.content-item{
+  width: 150rpx;
+  font-size: 33rpx;
+  text-align: center;
+  padding: 10rpx 20rpx;
+  border-radius: 25rpx;
+  color: #333;
+  background-color: rgb(240, 240, 240);
+}
+
+.hot{
+  width: 90%;
+  height: auto;
+  margin: 0rpx auto;
+  margin-top: 80rpx;
+}
+.hot-content{
+  width: 100%;
+  height: auto;
+  margin-top: 30rpx;
+}
+.hot-items{
+  width: 100%;
+  height: 50rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+.item-left{
+  display: flex;
+  justify-content: flex-start;
+  font-size: 32rpx;
+}
+.itemTitle{
+  margin-left: 40rpx;
+}
+/* 公共样式 */
+
+.title{
+  width: 100%;
+  height: 50rpx;
+  /* padding-right: 20rpx; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.title-text{
+  color: #000;
+  font-weight: 700;
+}
+.text-red{
+  color: #f00;
+}
+.text-orange{
+  color: orange;
+}

pages/user/user.wxml

@@ -9,8 +9,7 @@
         <!-- 在本小程序中只实现了微信登录 -->
         <view class="wechatLogin">
             <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
-                <text class="icon-github"></text>
-                微信登录
+                <text class="icon-github"></text>微信登录
             </button>
         </view>
         <view class="phoneLogin" bindtap="phoneLogin">
@@ -35,16 +34,12 @@
                         <text class="icon-vip" style="margin-left:30rpx"></text>
                     </view>
                 </view>
-                <view class="kefu">
-                    <text class="icon-service"></text>
-                    客服服务
-                </view>
+                <view class="kefu"><text class="icon-service"></text>客服服务</view>
             </view>
             <!-- 签到 -->
             <view class="qiandao">
                 <view class="qianText">
-                    <text class="icon-calendar text-gray"></text>
-                    签到
+                    <text class="icon-calendar text-gray"></text>签到
                 </view>
                 <view class="icon_">
                     <text class="icon-right text-gray"></text>
@@ -56,29 +51,25 @@
             <!-- 选项卡item -->
             <view class="choiceItem">
                 <view class="">
-                    <text class="icon-time text-gray"></text>
-                    定时关闭
+                    <text class="icon-time text-gray"></text>定时关闭
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>
             <view class="choiceItem">
                 <view class="">
-                    <text class="icon-creative text-gray"></text>
-                    夜间模式
+                    <text class="icon-creative text-gray"></text>夜间模式
                 </view>
-                <text class="icon-right text-gray"></text>
+                <switch></switch>
             </view>
             <view class="choiceItem">
                 <view class="">
-                    <text class="icon-post text-gray"></text>
-                    意见反馈
+                    <text class="icon-post text-gray"></text>意见反馈
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>
             <view class="choiceItem" bindtap="gotoLogin">
                 <view class="">
-                    <text class="icon-order text-gray"></text>
-                    切换账号
+                    <text class="icon-order text-gray"></text>切换账号
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>

pages/user/user.wxss

@@ -73,4 +73,5 @@
     height: 60rpx;
     padding: 20rpx 30rpx;
     justify-content: space-between;
+    align-items: center;
 }

project.config.json

@@ -93,6 +93,13 @@
 					"id": -1,
 					"name": "phoneLogin",
 					"pathName": "pages/user/phoneLogin/phoneLogin",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "搜索页",
+					"pathName": "pages/search/search",
 					"scene": null
 				}
 			]