分类和搜索功能完善

scr/food/app.json

@@ -16,7 +16,8 @@
     "pages/turning/turning",
     "pages/addAddress/addAddress",
     "pages/myorder/myorder",
-    "pages/orderdetail/orderdetail"
+    "pages/orderdetail/orderdetail",
+    "pages/searchfood/searchfood"
   ],
   "tabBar": {
     "custom": false,

scr/food/pages/detail/detail.js

@@ -14,38 +14,17 @@ Page({
     userid:null,
     num:null,
     commentlist:[
-      {
-        name:"Exungsh",
-        comment:"傻逼微信小程序"
-      },
-      {
-        name:"Wbb",
-        comment:"快两点半有点困"
-      },
-      {
-        name:"Exungsh",
-        comment:"傻逼微信小程序"
-      },
-      {
-        name:"Wbb",
-        comment:"快两点半有点困"
-      },
-      {
-        name:"Exungsh",
-        comment:"傻逼微信小程序"
-      },
+  
       {
         name:"Wbb",
-        comment:"快两点半有点困"
-      },
-      {
-        name:"Exungsh",
-        comment:"傻逼微信小程序"
+        comment:"好吃，强推"
       },
+      
       {
         name:"Wbb",
         comment:"快两点半有点困"
       },
+      
     ]
   },
 

scr/food/pages/index/index.js

@@ -8,32 +8,129 @@ Page({
    */
   data: {
     foodlist:[],
-    tabs: ['主食', '甜品', '小吃','吃得快','辣味','甜味','清淡'],
+    tabs: ['全部','主食', '甜品', '小吃','吃得快','辣味','甜味','清淡'],
     cateList:[],
-    index:null
+    index:null,
+   current:'',
+    re:[],
+    selectlist:[]
   },
 
+  /**
+   * 搜索
+   */
+  GetSearchInput: function(e) {
+    this.setData({
+        search: e.detail.value
+    })
+  
+  },
+  ToSearch: function(e) {
+    //let search = e.detail.value;
+   
+    if(this.data.search == '') {
+        wx.showToast({
+          title: '请输入',
+          icon: 'none'
+        })
+        return
+    }
+    wx.showLoading({
+      title: '搜索中',
+    })
+    const _ = wx.cloud.database().command
+    wx.cloud.database().collection('food').where(_.or([
+    {
+      food_shop: wx.cloud.database().RegExp({
+        regexp: this.data.search,
+        options: 'i',
+    }),
+    },
+    {
+      food_name: wx.cloud.database().RegExp({
+        regexp: this.data.search,
+        options: 'i',
+    }),
+    }
+  ]))
+  
+  .get()
+  .then(res => {
+      if (res.data.length != 0) {
+          this.setData({
+              re: res.data,
+          })
+          wx.setStorageSync('re', res.data)
+          let re= wx.getStorageSync('re')
+          console.log(re)
+          let that = this;
+          wx.hideLoading({
+            success: (res) => {
+              that.setData({
+                search: '',
+              })
+             }})
+             console.log(re)
+          wx.navigateTo({
+            url: '/pages/searchfood/searchfood?re='+JSON.stringify(re),//要跳转到的页面路径
+            
+      })  
+    }})
+  },
 
   tabSelect:function(e){
-    var current = e.currentTarget.dataset.id
+    var current = e.currentTarget.dataset.tab
     this.setData({
       current:current
     })
-  },
-  //分类
- geCateListe(){
-  db.collection('food').aggregate()
-  .group({
-    _id: '$tab'
+    if(current=='全部'){    //如果是全部则获取所有数据
+      db.collection('food').get({
+        //如果查询成功的话    
+        success: res => {
+          console.log(res.data)
+          //这一步很重要，给ne赋值，没有这一步的话，前台就不会显示值      
+          this.setData({
+            foodlist: res.data
+          })
+        }
+      })
+    }else{//如果不是全部进行筛选
+      wx.showLoading({
+        title: '分类中',
       })
-  .end()
+    const _ = wx.cloud.database().command
+    console.log(current)
+    wx.cloud.database().collection('food').where(_.or([
+      {
+        tab: wx.cloud.database().RegExp({
+          regexp: this.data.current,
+          options: 'i',
+      }),
+      },
+      {
+        taste: wx.cloud.database().RegExp({
+          regexp: this.data.current,
+          options: 'i',
+      }),
+      }
+    ]))
+    .get()
     .then(res => {
-    console.log('食物列表', res)
             this.setData({
-      foodList: res.list
+                foodlist: res.data,
             })
+            wx.hideLoading({
               })
-  },
+            wx.setStorageSync('foodlist', res.data)
+            let foodlist= wx.getStorageSync('foodlist')
+            console.log(foodlist)
+         
+  })}
+},
+  //分类
+
+  
+
   //跳转详情页
   toDetail: function (event) {
     // 获取 event 事件对象

scr/food/pages/index/index.wxml

@@ -8,13 +8,23 @@
 <navigator class="imagesize">
   <image src="/images/zhuanpang.jpg" style="width:440px" class="in-select" mode="widthFix" bindtap="toturning"></image>
 </navigator>
-
-<view class="divLine"></view>
+<!-- 搜索 -->
+<view class="sousuokuang">
+    <view class="sousuo">
+      <view class="shurukuang">
+        <input placeholder="搜索" value="{{inputValue}}" bindinput="GetSearchInput"></input>
+      </view>
+      <view class="sousuo_anniu" bindtap="ToSearch">
+        <text>搜索</text>
+        <icon type="search" size="20"></icon>
+      </view>
+    </view>
+  </view>
 <!-- 导航栏 -->
 
 <scroll-view class="navbar" scroll-x="true" scroll-left="{{tabs}}">
-  <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect">
-    <view class="nav-text {{item==tabCur?'tab-on':''}}">{{item}}</view>
+  <view class="nav-item" wx:for="{{tabs}}" wx:key="id" >
+    <view class="nav-text {{item==tabCur?'tab-on':''}}" bindtap="tabSelect" data-tab="{{item}}">{{item}}</view>
   </view>
 </scroll-view>
 

scr/food/pages/index/index.wxss

@@ -52,15 +52,6 @@ page {
   font-weight: 600;
   border-bottom: 4rpx solid #000080 !important;
 }
-
-
-
-
-
-
-
-
-
 .P_input {
   position: relative;
 }
@@ -88,7 +79,7 @@ page {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 400rpx;
+  width: 600rpx;
   margin: 0 auto;
 }
 
@@ -172,3 +163,49 @@ navigator {
   display: flex;
   text-align: center;
 }
+
+/* 搜索框*/
+.search{
+  width: 80%;
+}
+
+.sousuokuang {
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+}
+.sousuo {
+  width: 92%;
+  height: 100rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-items: center;
+}
+.shurukuang {
+  width: 80%;
+  height: 64rpx;
+  border-radius: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f6f6f6;
+}
+.shurukuang input {
+  width: 90%;
+  height: 100%;
+  font-size: 32rpx;
+}
+.sousuo_anniu {
+  width: 20%;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sousuo_anniu text {
+  font-size: 30rpx;
+}

scr/food/pages/searchfood/searchfood.js

@@ -0,0 +1,84 @@
+// pages/searchfood/searchfood.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+   re:[]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    console.log(JSON.parse(options.re),"1")
+    let re = JSON.parse(options.re);
+     let that = this
+    that.setData({
+      re: re
+     })
+     console.log(re)
+    },
+  
+    toDetail: function (event) {
+      // 获取 event 事件对象
+      // 获取点击对应的下标
+      var index = event.currentTarget.dataset.foodid; 
+       console.log(index);
+   //抓取id进行赋
+      //wx.navigateTo 会触发页面隐藏onHide
+      console.log('11111')
+      wx.navigateTo({
+        url:'/pages/detail/detail?id='+ index,
+      })
+    },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

scr/food/pages/searchfood/searchfood.json

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

scr/food/pages/searchfood/searchfood.wxml

@@ -0,0 +1,18 @@
+<!--pages/searchfood/searchfood.wxml-->
+<view class="foodlist">
+  <view class='a' wx:for="{{re}}">
+    <!--wx:for是微信数据绑定的一种方式，该数组有多少数据就显示多少个view-->
+    <!--item就相当于数组名+下标的结合体，适用于调用数组所有数据-->
+    <view catchtap="toDetail" data-foodid="{{item._id}}">
+      <view class='img'>
+        <image src="{{item.url}}" style="border-radius:20px;"></image>
+      </view>
+      <view class='info'>
+        <view class='title'>{{item.food_name}}</view>
+        <view class='price'>￥{{item.price}}</view>
+        <view class='num'>{{item.food_shop}}</view>
+      </view>
+    </view>
+    <view class='clear'></view>
+  </view>
+</view>

scr/food/pages/searchfood/searchfood.wxss

@@ -0,0 +1,52 @@
+/* pages/searchfood/searchfood.wxss */
+.foodist {
+  margin-top: 10px;
+}
+
+.foodlist .a {
+  padding: 20px;
+  border-bottom: #b4b3b3 solid 1px;
+  background-color: #fff9f9;
+}
+
+.foodlist .a .img {
+  float: left;
+  margin-right: 20px;
+}
+
+.foodlist .a .img image {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.foodlist .a .info {
+  float: left;
+  height: 200rpx;
+  width: 60%;
+  position: relative;
+}
+
+.foodlist .a .info .title {
+  margin-top: 5px;
+  color: black;
+  font-size: 16px;
+}
+
+.foodlist .a .info .price {
+  color: #FF2727;
+  margin-top: 8px;
+  font-size: 15px;
+}
+
+.foodlist .a .info .num {
+  position: absolute;
+  left: 0px;
+  bottom: 5px;
+  color: #747474;
+  font-size: 15px;
+}
+
+.clear {
+  clear: both;
+  overflow: hidden;
+}