項目實戰-點餐小程序-21 點餐(搜索菜品)

一、功能需求

1、用戶在【首頁】輸入搜索關鍵詞，點擊【搜索】按鈕：

• 攜帶搜索關鍵詞跳轉到【搜索菜品】頁面
• 在【搜索菜品】頁面顯示關鍵詞
• 在【搜索菜品】頁面顯示搜索出來的菜品列表

2、用戶在【搜索菜品】頁面

• 接收【首頁】傳遞過來的關鍵詞並顯示到頁面
• 根據傳遞過來的關鍵詞正則查詢出符合條件的菜品列表
• 用戶在【菜品搜索】頁面輸入關鍵詞，點擊【搜索】正則查詢出符合條件的數據
• 用戶在【菜品搜索】頁面手動點擊+和-，分別增加和減少菜品的數量

 

二、代碼實現

1、food.wxml

<!-- 搜索 -->
<view class="searchRoot">
<input type="text" value="{{searchKey}}" class="searchInput" placeholder="搜索菜品" bindinput="getSearchContent" confirm-type="search" bindconfirm="searchFood"></input>
<image src="/images/search.png" class="searchIcon" bindtap="searchFood"></image>
</view>

<!-- 菜品列表 -->
<view class="hotFoodRoot">
  <view class="hotFoodItem" wx:for="{{foodList}}">
    <image src="{{item.icon}}"></image>
    <view class="hotFoodText">
      <view class="itemName">{{item.name}}</view>
      <view class="itemSell">銷量：{{item.sell}}</view>
      <view class="addAndMinusRoot">
        <view class="itemPrice">{{item.price}}</view>
        <!-- 菜品數量的加減 -->
        <view class="addAndMinus">
          <image class="img" src="/images/minus.png" bindtap="minus" data-id="{{item._id}}"></image>
          <text class="number">{{item.number}}</text>
          <image class="img" src="/images/add.png" bindtap="add" data-id="{{item._id}}"></image>
        </view>
      </view>
    </view>
  </view>
</view>

2、food.wxss

/*搜索*/
.searchRoot{
  display: flex;
  flex-direction: row;
  /*彈性盒內各項元素沿着主軸居中顯示*/
  align-items: center;
  padding: 20rpx;
}
.searchInput{
  border: 1rpx solid #FF9966;
  border-radius: 20rpx;
  padding: 0 30rpx;
  flex: 1;
  height: 76rpx;
}
.searchIcon{
  width: 60rpx;
  height: 60rpx;
  margin-left: 20rpx;
}
/*菜品數據*/
.hotFoodRoot{
  /*設置下外邊距，防止固定的購物車擋住最后一個菜品*/
  margin-bottom: 140rpx;
}
.hotFoodItem{
  display: flex;
  margin: 20rpx 20rpx 0 20rpx;
  border-bottom: 1rpx solid rgb(245, 245, 245);
}
.hotFoodItem image{
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  /*防止標題過長把圖片擠走*/
  min-width: 120rpx;
}

.hotFoodItem .itemName{
  font-size: 32rpx;
  /*設置菜品名稱超過一行時顯示省略號*/
  width: 500rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.hotFoodItem .itemSell{
  font-size: 28rpx;
  color: gray;
}

/*數量加減*/
.addAndMinusRoot{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.addAndMinusRoot .itemPrice{
  font-size: 30rpx;
  color: #FF9966;
}
.addAndMinusRoot .itemPrice::before{
  /*人民幣符號*/
  content: "¥";
  color:#FF9966;
}
.addAndMinusRoot .addAndMinus{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.addAndMinus .img{
  margin: 0;
  width: 50rpx;
  /*必須加上min-width*/
  min-width: 50rpx;
  height: 50rpx;
}
.addAndMinus .number{
  margin: 0 20rpx;
}

3、food.js

  //定義db
  const db = wx.cloud.database()
  //搜索的菜品信息
  let foodList = ''
  //用戶輸入的搜索詞
  let searchKey = ''
Page({
  //頁面的初始數據
  data: {
    //搜索內容
    searchKey:'',
    //搜索到的菜品數據
    foodList:[]
  },

  //生命周期函數--監聽頁面加載
  onLoad: function (options) {
    //從首頁攜帶搜索詞
    console.log("從首頁攜帶過來的搜索內容",options.searchKey);
    searchKey = options.searchKey
    //調用自定義方法，執行搜索功能
    this.searchFood();
    //如果用戶輸入關鍵詞搜索
    if(searchKey&&searchKey.length>0){  
      this.setData({
        searchKey:searchKey
      })
    }else{    //如果用戶不輸入關鍵詞搜索，則搜索所有菜品
      searchKey=''
    }
  },
  //獲取用戶輸入的搜索內容
  getSearchContent(e){
    console.log("用戶輸入的搜索內容",e.detail.value);
    searchKey = e.detail.value
  },
  //點擊搜索按鈕實現功能
  searchFood(){
    console.log("用戶點擊了搜索按鈕，輸入的關鍵詞為",searchKey);
      //使用正則查詢
      db.collection("food").where({
        name:db.RegExp({
          regexp:searchKey, //搜索池
          options:'i' //不區分大小寫
        })
      }).get()
      .then(res=>{
        console.log("搜索成功",res);
        foodList = res.data
        if(foodList&&foodList.length>0){
          foodList.forEach(item=>{
            //遍歷數組foodList，為數組添加新字段number，賦值為0
            item.number = 0
          })
          this.setData({
            foodList:foodList
          })
        }
      }).catch(err=>{
        console.log("搜索失敗",err);
      })
  },

  //點擊減少菜品數量
  minus(e){
    console.log("點擊了加",e.currentTarget.dataset.id);
    let id = e.currentTarget.dataset.id
    //遍歷當前菜品數組
    foodList.forEach(item=>{
      if(item._id==id){
        if(item.number>0){
          item.number-=1
        }else{
          wx.showToast({
            title: '數量不能小於0',
            icon:'none'
          })
        }
      }
    })
    console.log("遍歷以后的當前菜品列表",foodList);
    this.setData({
      foodList:foodList
    })
  },

  //點擊增加菜品數量
  add(e){
    console.log("點擊了加",e.currentTarget.dataset.id);
    let id = e.currentTarget.dataset.id
    //遍歷當前菜品數組
    foodList.forEach(item=>{
      if(item._id==id){
        item.number+=1
      }
    })
    console.log("遍歷以后的當前菜品列表",foodList);
    this.setData({
      foodList:foodList
    })
  },
})

三、效果展示