1 <!-- 搜索 -->
 2 <view class="searchRoot">
 3 <input type="text" value="{{searchKey}}" class="searchInput" placeholder="搜索菜品" bindinput="getSearchContent" confirm-type="search" bindconfirm="searchFood"></input>
 4 <image src="/images/search.png" class="searchIcon" bindtap="searchFood"></image>
 5 </view>
 6 
 7 <!-- 菜品列表 -->
 8 <view class="hotFoodRoot">
 9   <view class="hotFoodItem" wx:for="{{foodList}}">
10     <image src="{{item.icon}}"></image>
11     <view class="hotFoodText">
12       <view class="itemName">{{item.name}}</view>
13       <view class="itemSell">销量：{{item.sell}}</view>
14       <view class="addAndMinusRoot">
15         <view class="itemPrice">{{item.price}}</view>
16         <!-- 菜品数量的加减 -->
17         <view class="addAndMinus">
18           <image class="img" src="/images/minus.png" bindtap="minus" data-id="{{item._id}}"></image>
19           <text class="number">{{item.number}}</text>
20           <image class="img" src="/images/add.png" bindtap="add" data-id="{{item._id}}"></image>
21         </view>
22       </view>
23     </view>
24   </view>
25 </view>

 1 /*搜索*/
 2 .searchRoot{
 3   display: flex;
 4   flex-direction: row;
 5   /*弹性盒内各项元素沿着主轴居中显示*/
 6   align-items: center;
 7   padding: 20rpx;
 8 }
 9 .searchInput{
10   border: 1rpx solid #FF9966;
11   border-radius: 20rpx;
12   padding: 0 30rpx;
13   flex: 1;
14   height: 76rpx;
15 }
16 .searchIcon{
17   width: 60rpx;
18   height: 60rpx;
19   margin-left: 20rpx;
20 }
21 /*菜品数据*/
22 .hotFoodRoot{
23   /*设置下外边距，防止固定的购物车挡住最后一个菜品*/
24   margin-bottom: 140rpx;
25 }
26 .hotFoodItem{
27   display: flex;
28   margin: 20rpx 20rpx 0 20rpx;
29   border-bottom: 1rpx solid rgb(245, 245, 245);
30 }
31 .hotFoodItem image{
32   width: 120rpx;
33   height: 120rpx;
34   margin-right: 20rpx;
35   border-radius: 10rpx;
36   /*防止标题过长把图片挤走*/
37   min-width: 120rpx;
38 }
39 
40 .hotFoodItem .itemName{
41   font-size: 32rpx;
42   /*设置菜品名称超过一行时显示省略号*/
43   width: 500rpx;
44   white-space: nowrap;
45   text-overflow: ellipsis;
46   overflow: hidden;
47 }
48 .hotFoodItem .itemSell{
49   font-size: 28rpx;
50   color: gray;
51 }
52 
53 /*数量加减*/
54 .addAndMinusRoot{
55   display: flex;
56   justify-content: space-between;
57   align-items: center;
58 }
59 .addAndMinusRoot .itemPrice{
60   font-size: 30rpx;
61   color: #FF9966;
62 }
63 .addAndMinusRoot .itemPrice::before{
64   /*人民币符号*/
65   content: "¥";
66   color:#FF9966;
67 }
68 .addAndMinusRoot .addAndMinus{
69   display: flex;
70   justify-content: flex-end;
71   align-items: center;
72 }
73 .addAndMinus .img{
74   margin: 0;
75   width: 50rpx;
76   /*必须加上min-width*/
77   min-width: 50rpx;
78   height: 50rpx;
79 }
80 .addAndMinus .number{
81   margin: 0 20rpx;
82 }

  1   //定义db
  2   const db = wx.cloud.database()
  3   //搜索的菜品信息
  4   let foodList = \'\'
  5   //用户输入的搜索词
  6   let searchKey = \'\'
  7 Page({
  8   //页面的初始数据
  9   data: {
 10     //搜索内容
 11     searchKey:\'\',
 12     //搜索到的菜品数据
 13     foodList:[]
 14   },
 15 
 16   //生命周期函数--监听页面加载
 17   onLoad: function (options) {
 18     //从首页携带搜索词
 19     console.log("从首页携带过来的搜索内容",options.searchKey);
 20     searchKey = options.searchKey
 21     //调用自定义方法，执行搜索功能
 22     this.searchFood();
 23     //如果用户输入关键词搜索
 24     if(searchKey&&searchKey.length>0){  
 25       this.setData({
 26         searchKey:searchKey
 27       })
 28     }else{    //如果用户不输入关键词搜索，则搜索所有菜品
 29       searchKey=\'\'
 30     }
 31   },
 32   //获取用户输入的搜索内容
 33   getSearchContent(e){
 34     console.log("用户输入的搜索内容",e.detail.value);
 35     searchKey = e.detail.value
 36   },
 37   //点击搜索按钮实现功能
 38   searchFood(){
 39     console.log("用户点击了搜索按钮，输入的关键词为",searchKey);
 40       //使用正则查询
 41       db.collection("food").where({
 42         name:db.RegExp({
 43           regexp:searchKey, //搜索池
 44           options:\'i\' //不区分大小写
 45         })
 46       }).get()
 47       .then(res=>{
 48         console.log("搜索成功",res);
 49         foodList = res.data
 50         if(foodList&&foodList.length>0){
 51           foodList.forEach(item=>{
 52             //遍历数组foodList，为数组添加新字段number，赋值为0
 53             item.number = 0
 54           })
 55           this.setData({
 56             foodList:foodList
 57           })
 58         }
 59       }).catch(err=>{
 60         console.log("搜索失败",err);
 61       })
 62   },
 63 
 64   //点击减少菜品数量
 65   minus(e){
 66     console.log("点击了加",e.currentTarget.dataset.id);
 67     let id = e.currentTarget.dataset.id
 68     //遍历当前菜品数组
 69     foodList.forEach(item=>{
 70       if(item._id==id){
 71         if(item.number>0){
 72           item.number-=1
 73         }else{
 74           wx.showToast({
 75             title: \'数量不能小于0\',
 76             icon:\'none\'
 77           })
 78         }
 79       }
 80     })
 81     console.log("遍历以后的当前菜品列表",foodList);
 82     this.setData({
 83       foodList:foodList
 84     })
 85   },
 86 
 87   //点击增加菜品数量
 88   add(e){
 89     console.log("点击了加",e.currentTarget.dataset.id);
 90     let id = e.currentTarget.dataset.id
 91     //遍历当前菜品数组
 92     foodList.forEach(item=>{
 93       if(item._id==id){
 94         item.number+=1
 95       }
 96     })
 97     console.log("遍历以后的当前菜品列表",foodList);
 98     this.setData({
 99       foodList:foodList
100     })
101   },
102 })