微信小程序图书交易商城云开发实例——书易（七）：购物车

微信小程序商城云开发实例——书易

总览博客地址：https://blog.csdn.net/qq_44827933/article/details/130672061
项目github地址：https://github.com/xsfmGenius/BookChange

wxml

<view class="title">
  <text>购物车</text>
</view>
<view class='right-container'>
    <block wx:for="{{categoryBook}}" wx:key="index">
      <view class='category-box' bindtap='gotoxiangqing' data-bookname="{{item.bookname}}">
        <view class='category-left'>
          <image src="{{item.bookcover}}"></image>
        </view>
        <view class='category-right'>  
          <text class='bookname'>{{item.bookname}}</text>
          <view class="deleteicon" catchtap="delete" data-bookname="{{item.bookname}}" data-num="{{item.num}}" data-price="{{item.price}}" data-index="{{index}}">
            <image src="../../image/delete.png"></image>
          </view>
          <view class="numcontrol">
            <view catchtap="add" data-bookname="{{item.bookname}}" data-num="{{item.num}}" data-price="{{item.price}}" data-index="{{index}}">
              <image src="../../image/jia.png"></image>
            </view>
            <view class="booknum">
              <text>{{item.num}}</text>
            </view>
            <view catchtap="minus" data-bookname="{{item.bookname}}" data-num="{{item.num}}" data-price="{{item.price}}" data-index="{{index}}">
              <image src="../../image/jian.png"></image>
            </view>
          </view>
          <text class="bookprice">￥{{filters.toFix(item.price)}}</text>
        </view>
      </view>
    </block>
  </view>

<!-- 底边栏 -->
<view class='bottom-container'>
  <view></view>
  <view>
    <text class="bookprice">￥{{filters.toFix(allprice)}}</text>
  </view>
  <view>
    <button class='go' bindtap="buy">立即购买</button>
  </view>
</view>

wxss

.title{
  font-size: 38rpx;
  margin-bottom:5rpx;
  color: #000;
  background-color: #fff;
  letter-spacing:10rpx;
  font-weight:bold;
  padding-left:30rpx;
  padding:10rpx 0 10rpx 40rpx;
  /* letter-spacing:7rpx; */
}

.right-container{
  width:750rpx;
  display: block;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.category-box{
  display: flex;
  height:250rpx;
  background:#fff;
}
.category-left{
  display: flex;
  width:30%;
  height:100%;
}
.category-left image{
  width: 90%;
  height: 90%;
  margin: auto;
}
.category-right{
  width: 70%;
  height:100%;
  margin:34rpx 0 0 10rpx;
  flex-flow: column;
  justify-content: space-between;
}
.deleteicon{
  height:50rpx;
  width:50rpx;
  position: relative;
  bottom:40rpx;
  left:430rpx;
}
.deleteicon image{
  width:100%;
  height:100%;
}
.numcontrol{
  display:inline-block;
  height:50rpx;
  width:200rpx;
  margin-left:10rpx;
  /* background-color: #3bcab2; */
  border-radius: 40rpx;
  border-style: solid;
  border-color:rgb(220,220,220);
}
.numcontrol view{
  display:inline-block;
  align-items: center;
  justify-content: center;
  text-align: center; 
  vertical-align:middle;
}
.numcontrol image{
  width:80%;
  height:80%;
  align-items: center;
  justify-content: center;
  text-align: center; 
  vertical-align:middle;
}
.numcontrol view:first-child{
  width:25%;
  height:100%;
  border-right-style: solid;
  border-color:rgb(220,220,220);
}
.numcontrol view:nth-child(2){
  width:45%;
  height:100%;
  text-align: center; 
  vertical-align:bottom;
  /* padding-bottom:20rpx; */
}

.booknum text{
  height:80%;
  width:100%;
  font-size: 38rpx;
  
}
.numcontrol view:nth-child(3){
  width:25%;
  height:100%;
  border-left-style: solid;
  border-color:rgb(220,220,220);
}
.bookname{
  display:block;
  font-size: 30rpx;
  margin:20rpx 40rpx 0 10rpx; 
  color: #000;
}
.bookprice{
  margin-left:120rpx;
  color:#3bcab2;
  font-size:40rpx;
}


/* 底边栏 */
.bottom-container{
  height:90rpx;
  width:750rpx;
  display: flex;
  line-height:80rpx;
  position:fixed;
  bottom:0px;
  left:0px;
  background-color: #fff;
  border-top: solid;
  border-color:rgb(220,220,220);
  border-width: 3rpx;
}
.bottom-container view:first-child{
  height:100%;
  width:20%;
  display:flex;
  align-items:center;
  justify-content: center;
  /* border-right:solid;
  border-color:rgb(220,220,220);
  border-width:1rpx;  */
}
.bottom-container view:nth-child(2){
  height:100%;
  width:50%;
  display:flex;
  align-items:center;
  justify-content: center;

}
.bookprice{
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
.bottom-container view:nth-child(3){
  display:flex;
  height:100%;
  width:30%;
}
.go{
  width:100%;
  height:100%;
  font-size: 28rpx;
  letter-spacing:2rpx;
  background-color: #45b97c;
  color:#fff;
  border-radius: 0rpx;
  border-style: none;
}
.go:active{
  background-color: #52ac7c;
}

javascript

加载界面时查询cart数据库获取用户购物车数据，并计算价格总和，显示在界面上。

  onLoad(options) {
    // console.log(app.globalData.userInfo)
    db.collection('cart').where({
        username:app.globalData.userInfo.nickName
    }).get()
    .then(res => {
      this.setData({
        categoryBook:res.data
       })
       var all=0;
       var keys = Object.keys(this.data.categoryBook)
       keys.forEach((item)=> {
        //  console.log('ssssssssssssssssssss',item)
        //  console.log("参数名:" + item,"参数值:"+this.data.categoryBook[item])
         all+=this.data.categoryBook[item].num*this.data.categoryBook[item].price
       })
        // console.log("输出",all)
        this.setData({
          allprice:all
        })
        // console.log("输出",this.data.allprice)
      })
      .catch(err => {
        console.log(err)
      })
  }

点击图书跳转至对应详情页

  // 购物车->界面跳转
  gotoxiangqing(e){
    // console.log(e.currentTarget.dataset.bookname)
    wx.navigateTo({
      url: '/pages/xiangqing/xiangqing?name='+e.currentTarget.dataset.bookname,
    })
},

点击删除图标删除数据库cart的数据，并修改界面中图书总价及图书数据。

  // 删除图书
  delete(e){
    // console.log(e)
    var nowprice=this.data.allprice-e.currentTarget.dataset.num*e.currentTarget.dataset.price
    var nowcate= this.data.categoryBook
    nowcate.splice(e.currentTarget.dataset.index,1)
    this.setData({
      categoryBook:nowcate
    })
    // this.data.categoryBook.splice(this.data.allprice-e.currentTarget.dataset.key,1)
    this.setData({
      allprice:nowprice
    })
    db.collection('cart').where({
      username:app.globalData.userInfo.nickName,
      bookname:e.currentTarget.dataset.bookname
    }).remove()
    .then(res => {
    })
    .catch(err => {
      console.log(err)
    })
  },

点击加号，使对应图书数量加一，修改购物车数据及界面数量、总价数据；点击减号，判断当前图书数量是否大于1，大于1则使对应图书数量减一，修改购物车数据及界面数量、总价数据。

  // 图书加一
  add(e){
    // console.log(e)
    var nowprice=this.data.allprice+e.currentTarget.dataset.price
    var nowcate= this.data.categoryBook
    nowcate[e.currentTarget.dataset.index].num++
    var newnum=nowcate[e.currentTarget.dataset.index].num
    this.setData({
      categoryBook:nowcate
    })
    // this.data.categoryBook.splice(this.data.allprice-e.currentTarget.dataset.key,1)
    this.setData({
      allprice:nowprice
    })
    db.collection('cart').where({
      username:app.globalData.userInfo.nickName,
      bookname:e.currentTarget.dataset.bookname
    }).update({
      data:{
        num:newnum
      }
    })
    .then(res => {
    })
    .catch(err => {
      console.log(err)
    })
  },

  // 图书减一
  minus(e){
    if(e.currentTarget.dataset.num>1){
      var nowprice=this.data.allprice-e.currentTarget.dataset.price
      var nowcate= this.data.categoryBook
      nowcate[e.currentTarget.dataset.index].num--
      var newnum=nowcate[e.currentTarget.dataset.index].num
      this.setData({
        categoryBook:nowcate
     })
      // this.data.categoryBook.splice(this.data.allprice-e.currentTarget.dataset.key,1)
      this.setData({
        allprice:nowprice
     })
      db.collection('cart').where({
       username:app.globalData.userInfo.nickName,
       bookname:e.currentTarget.dataset.bookname
     }).update({
        data:{
         num:newnum
       }
      })
      .then(res => {
     })
      .catch(err => {
       console.log(err)
      })
     }
    
  },

点击“立即购买”按钮，将所有该用户购物车数据加入purchase数据库，并删除cart数据库内容，清空界面显示价格及图书数据，提示“购买成功”。

  // 立即购买
  buy(e){
    console.log(this.data.categoryBook)
    var keys = Object.keys(this.data.categoryBook)
    keys.forEach((item)=> {
      db.collection('purchase').add({
        data:{
          bookname:this.data.categoryBook[item].bookname,
          username:app.globalData.userInfo.nickName,
          bookcover:this.data.categoryBook[item].bookcover,
          num:this.data.categoryBook[item].num,
          price:this.data.categoryBook[item].price
        }
      }).then(res => {
      })
      .catch(err => {
        console.log(err)
      })

      db.collection('cart').where({
        username:app.globalData.userInfo.nickName,
        bookname:e.currentTarget.dataset.bookname
      }).remove()
      .then(res => {
      })
      .catch(err => {
        console.log(err)
      })
    })
    wx.showToast({
      title: '购买成功',
    })
    this.setData({
      categoryBook:[],
      allprice:0,
    })
  },