项目实战-点餐小程序-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)
  },
})

三、效果展示