項目實戰-點餐小程序-23 點餐(購物車)

一、功能需求

• 1、購物車固定顯示在點餐頁面底部
• 2、實時統計購物車總數量和總金額
• 3、已選菜品展示在購物車
• 4、添加菜品到購物車（菜品列表增加和購物車內增加同步）
• 5、減少菜品到購物車（菜品列表減少和購物車內減少同步）
• 6、購物車蒙層的顯示和隱藏
• 7、購物車列表加載緩存菜品信息、已點菜品總數量、總金額
• 8、清空購物車

 

二、代碼實現

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>
<!-- 底部區域 -->
<view class="cartRoot">
  <view class="cartBackground">
      <image class="cartPackage" src="/images/package.png" bindtap="showCart">
        <view class="cartNumber">
          <text class="totalNumber">{{totalNumber}}</text>
        </view>
      </image>
    <text class="totalMoney">{{totalMoney}}</text>
  </view>
  <view class="payMoney">選好了</view>
</view>
<!-- 購物車蒙層 -->
<view class="maskBackground" hidden="{{isHideMask}}">
</view>
<!-- 購物車列表 -->
<view class="cartDetail" hidden="{{isHideMask}}">
<!-- 標題 -->
  <view class="cartTitle">
    <text class="foodTitle" bindtap="hideCart">返回</text>
    <view class="delete" bindtap="clearCart">
      <image src="/images/delete.png"></image>
      <text>清空</text>
    </view>
  </view>
  <!-- 數據 -->
  <scroll-view class="cartData">
    <view wx:for="{{cartList}}" class="cartItem">
      <image src="{{item.icon}}" class="cartImg"></image>
      <view class="cartText">
        <view class="cartName">{{item.name}}</view>
        <view class="cartMsg">
          <view class="cartPrice">{{item.price}}</view>
          <!-- 菜品數量的加減 -->
          <view class="addMinus">
              <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>
  </scroll-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{
  /*設置下內邊距，防止固定的購物車擋住最后一個菜品*/
  padding-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;
}
/*底部區域*/
.cartRoot{
  width: 100%;
  display: flex;
  justify-content: center;
  /*固定在底部*/
  position: fixed;
  bottom: 20rpx;
  z-index: 201;
}
.cartBackground{
  width: 450rpx;
  height: 100rpx;
  background-color:#fff;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  box-shadow:  0 0 5px gainsboro;
  display:flex;
  justify-content: flex-start;
  align-items: center;
}
.cartPackage{
  width: 80rpx;
  height: 80rpx;
  margin: 0 30rpx;
  position: relative;
}
.cartNumber{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color:red;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.totalNumber{
  font-size: 24rpx;
  color: #fff;
  line-height: 30rpx;
}
.totalMoney{
  font-size: 30rpx;
  color: #ff9966;
}
.totalMoney::before{
  content: '¥';
  font-size: 20rpx;
  color: #ff9966;
}
/*去結算*/
.payMoney{
  width: 200rpx;
  height: 100rpx;
  background-color:#FF9966;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  box-shadow:  0 0 5px gainsboro;
  text-align: center;
  line-height: 100rpx;
  color: #fff;
}
/*購物車蒙層*/
.maskBackground{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: gray;
    /*設置背景顏色透明度*/
    opacity: .4;
    /*設置層級*/
    z-index: 100;
}

/*購物車詳情*/
.cartDetail{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 600rpx;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  z-index: 200;
  /*解決滑動沖突的問題*/
  overflow: auto;
  /*底部內邊距，為購物車預留空間*/
  padding-bottom: 140rpx;
}
/*購物車標題*/
.cartTitle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f2f2f2;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  background-color: #fff;
  height: 80rpx;
  z-index: 201;
  /*固定購物車標題*/
  position: fixed;
  left: 0;
  right: 0;
}
.cartTitle .foodTitle{
  font-size: 28rpx;
  margin-left: 20rpx;
  color: #FF9966;
}
.cartTitle .delete{
  display: flex;
  align-items: center;
  margin: 20rpx;
}
.delete image{
  width: 40rpx;
  height: 40rpx;
  margin-right: 5rpx;
}
.delete text{
  font-size: 28rpx;
  color: #c3c3c3;
}
/*購物車數據*/
.cartData{
  margin-top: 80rpx;
}
.cartItem{
  display: flex;
  margin: 20rpx 20rpx 0 20rpx;
  border-bottom: 1rpx solid rgb(245, 245, 245);
}
.cartItem .cartImg{
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  /*防止標題過長把圖片擠走*/
  min-width: 100rpx;
}
.cartText{
  display: flex;
  flex-direction: column;
  justify-content:space-around;
}
.cartItem .cartName{
  font-size: 32rpx;
  /*設置菜品名稱超過一行時顯示省略號*/
  width: 500rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

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

3、food.js

  //定義db
  const db = wx.cloud.database()
  //搜索的菜品信息
  let foodList = ''
  //首頁傳遞過來的用戶輸入的搜索關鍵詞
  let searchKey = ''

Page({
  //頁面的初始數據
  data: {
    //搜索內容
    searchKey:'',
    //搜索到的菜品數據
    foodList:[],
    //購物車的總數量、總金額、菜品信息
    totalNumber:0,
    totalMoney:0,
    cartList:[],
    //購物車蒙版是否隱藏
    isHideMask:true
  },

  //生命周期函數--監聽頁面加載
  onLoad: function (options) {
    //從首頁攜帶搜索詞
    console.log("從首頁攜帶過來的搜索內容",options.searchKey);
    searchKey = options.searchKey
    //如果用戶輸入關鍵詞搜索
    if(searchKey&&searchKey.length>0){  
      this.setData({
        searchKey:searchKey
      })
    }else{    //如果用戶不輸入關鍵詞搜索，則搜索所有菜品
      searchKey = ''
    }
    //獲取購物車緩存數據(如果有緩存，則取緩存數據；如果無緩存，則為空數組)
    let cart = wx.getStorageSync('cart') || []
    //將購物車緩存信息渲染到頁面上
    this.setData({
      cartList:cart
    })
    //調用自定義方法，執行搜索功能
    this.searchFood();
  },

  //獲取用戶輸入的搜索內容
  getSearchContent(e){
    console.log("用戶輸入的搜索內容",e.detail.value);
    searchKey = e.detail.value
  },

  //點擊搜索按鈕實現功能
  searchFood(){
    console.log("用戶點擊了搜索按鈕，輸入的關鍵詞為",searchKey);
    //購物車菜品信息
    let cartList = this.data.cartList
      //使用正則查詢
      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
            if(cartList&&cartList.length>0){
              //檢查當前購物車里是否存在當前所選的菜品
              var res = cartList.find(cart=>{
                return cart._id == item._id
              })
              if(res){
                item.number = res.number
              }else{
                item.number = 0
              }
            }
          })
          this.setData({
            foodList:foodList,
          })
          //調用自定義方法，計算購物車總數量和總價格
          this.getTotal()
        }
      }).catch(err=>{
        console.log("搜索失敗",err);
      })
  },

  //點擊增加菜品數量
  add(e){
    console.log("點擊了加",e.currentTarget.dataset.id);
    let id = e.currentTarget.dataset.id
    //購物車菜品信息
    let cartList = this.data.cartList
    //遍歷當前菜品數組
    foodList.forEach(item=>{
      if(item._id==id){
        item.number+=1
        //購物車所選菜品的信息
        if(cartList&&cartList.length>0){  //如果購物車中有數據
        //檢查當前購物車里是否存在當前所選的菜品
         var res = cartList.find(cart=>{
           return cart._id == id
         })
         console.log("當前所選的菜品是否存在於購物車里",res);
         console.log("+++以后購物車的菜品列表",cartList);
         //如果所選的菜品不在購物車里，直接添加到數組
         if(!res){
          cartList.push(item)
         }else{
           res.number = item.number
         }
        }else{  //如果購物車中無數據，直接push到數組
          cartList.push(item)
        }
      }
    })
    console.log("遍歷以后的當前菜品列表",foodList);
    console.log("添加到購物車的菜品列表",cartList);
    this.setData({
      //點擊添加之后的菜品列表信息
      foodList:foodList,
      //購物車所選商品列表
      cartList:cartList
    })
    //調用自定義方法，計算購物車總數量和總價格
    this.getTotal()
    //將數據存入緩存
    wx.setStorageSync('cart', cartList)
  },

  //點擊減少菜品數量
  minus(e){
    console.log("點擊了減",e.currentTarget.dataset.id);
    let id = e.currentTarget.dataset.id
    //購物車菜品信息
    let cartList = this.data.cartList    
    //遍歷當前菜品數組
    foodList.forEach(item=>{
      if(item._id==id){
        if(item.number>0){
          item.number-=1
          //購物車所選菜品的信息
          if(cartList&&cartList.length>0){  //如果購物車中存在已選菜品
          //查詢當前購物車里是否存在當前所選的菜品
          var index = cartList.findIndex(cart=>{
            return cart._id == id
          })
          if(index>-1){
            cartList[index].number = item.number
          }
          if(item.number == 0){
            cartList.splice(index,1)  //刪除下標為index的1個元素
          }
        }
        }else{
          wx.showToast({
            title: '數量不能小於0',
            icon:'none'
          })
        }
      }
    })
    console.log("遍歷以后的當前菜品列表",foodList);
    console.log("---以后購物車的菜品列表",cartList);
    this.setData({
      foodList:foodList,
      //購物車所選商品列表
      cartList:cartList
    })
    //調用自定義方法，計算購物車總數量和總價格
    this.getTotal()
    //將數據存入緩存
    wx.setStorageSync('cart', cartList)
  },

  //自定義，計算購物車的總價格和總數量
  getTotal(){
    //購物車的總數量、總金額、購物車菜品信息
    let totalNumber = 0
    let totalMoney = 0
    let cartList = this.data.cartList   
    cartList.forEach(item=>{
      totalNumber+=item.number
      totalMoney+=item.number*item.price
    })
    this.setData({
      totalNumber:totalNumber,
      totalMoney:totalMoney
    })
  },

  //打開購物車蒙層
  showCart(){
    this.setData({
      isHideMask:false
    })   
  },
  //關閉購物車蒙層
  hideCart(){
    this.setData({
      isHideMask:true
    })
  },
  
  //清空購物車
  clearCart(){
    //把菜品列表所有菜品的數量置於0
    let foodList = this.data.foodList //把菜品數據取出來
    foodList.forEach(item=>{          //遍歷數組，把每個數量設為0
      item.number =0
    })
    //把購物車數組設為空數組
    this.setData({
      foodList:foodList,
      cartList:[],
      totalNumber:0,
      totalMoney:0
    })
    //清空購物車緩存數據
    wx.setStorageSync('cart', null)
  },
})

三、效果展示