小程序制作笔记-商品清单及购物车功能

今天试着自己写了1页商品清单及购物车功能也，虽然还需要美观，但是基本功能应该算是实现了：

• 商品选择后添加到购物车，再次选择就将数字+1，同时显示该商品已添加；
• 点击购物车图标弹出自制弹出遮罩层（没有自带弹窗功能），用于显示购物车内商品清单；
• 购物车内增加、减少商品数量、可手动修改；
• 每次修改，购物车总价都会自动变化更新

以下是完整代码（目前商品数据设置的静态的）

WXML部分

<view class="goodslist">
  <view class="goodsitems" wx:for="{{goods}}" wx:key="id">
    <view class="goodsimg">
      <image src="{{item.goodsimg}}"></image>
    </view>
    <view class="goodsdetail">
      <view class="goodsname">
        {{item.goodsname}}
      </view>
      <view class="goodsdesc">
        {{item.goodsdesc}}
      </view>
      <view class="select">
        <view class="goodsprice">
          {{item.goodsprice}} \t ({{item.goodsunit}})
        </view>
        <view class="selectgoods"  id="{{item.id}}" data-name="{{item.goodsname}}" data-price="{{item.goodsprice}}" bindtap="selectgoods">
          <image src="../../images/add.png"></image>
        </view>
      </view>
    </view>
    <view wx:if="{{hasbeenselected[0][item.goodsname]==1}}" class="beenselected">已添加</view>
  </view>
</view>
<view class="loadingmsg">{{loadingmsg}}</view>



<!--购物车图标-->
<view class="goodcart">
  <image src="../../images/goodscart.png" bindtap="showcart"></image>
  <view class="listnum" wx:if="{{selectedgoods.length>0}}">{{selectedgoods.length}}</view>
</view>

<!--透明遮罩层-->
<view class="cartdetails" wx:if="{{showcart}}"></view>
<!--购物车清单层-->
<view class="cartitems"  wx:if="{{showcart}}">
  <view class="closethis" bindtap="closecart">
    <image src="../../images/closethis.png"></image>
  </view>
  <scroll-view class="cartlists" scroll-y="true" style="height: 500rpx;">
    <view wx:if="{{selectedgoods==''}}">购物车为空</view>
    <view wx:for="{{selectedgoods}}" wx:key="id" wx:if="{{item.selectnum>=0}}">
      <view class="cartlist">
        <view class="cgoodsname">{{item.goodsname}}</view>
        <view class="cgoodsprice">{{item.goodprice}}</view>
        <view class="selectnum">
          <image bindtap="{{item.selectnum>=1 ? 'cartreduce':''}}" id="{{index}}" src="../../images/reduce.png"></image>
          <input class="nums" value="{{item.selectnum<1? 1 :item.selectnum}}" id="{{index}}" bindinput="cartnuminput"></input>
          <image bindtap="cartadd" id="{{index}}" src="../../images/add.png"></image></view>
      </view>
    </view>
  </scroll-view>
  <view class="chartbottom">
    <view class="totalfee">总金额：{{totalfee}}</view>
    <view class="gotopay" bindtap="cartconfirm">确认选择</view>
  </view>
</view>

JS部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    goods: [
      { id: 1, goodsimg:"../../images/goodsimg.jpg", goodsname: "五常大米",  goodsdesc:"这个是商品说明",  goodsprice: "50.00", goodsunit: "元/千克" }, 
      { id: 2, goodsimg:"../../images/goodsimg.jpg", goodsname: "橄榄油",  goodsdesc:"这个是商品说明",  goodsprice: "150.00", goodsunit: "元/桶" },
      { id: 3, goodsimg:"../../images/goodsimg.jpg", goodsname: "白猫洗洁精",  goodsdesc:"这个是商品说明",  goodsprice: "10.00", goodsunit: "元/瓶" },
      { id: 4, goodsimg:"../../images/goodsimg.jpg", goodsname: "精品砂锅",  goodsdesc:"这个是商品说明",  goodsprice: "30.00", goodsunit: "元/个" },
      { id: 5, goodsimg:"../../images/goodsimg.jpg", goodsname: "保温桶",  goodsdesc:"这个是商品说明",  goodsprice: "6.50", goodsunit: "元/个" },
      { id: 6, goodsimg:"../../images/goodsimg.jpg", goodsname: "美的电磁炉",  goodsdesc:"这个是商品说明",  goodsprice: "350.50", goodsunit: "元/台" },
      { id: 7, goodsimg:"../../images/goodsimg.jpg", goodsname: "九阳豆浆机",  goodsdesc:"这个是商品说明",  goodsprice: "650.00", goodsunit: "元/台" },
      { id: 8, goodsimg:"../../images/goodsimg.jpg", goodsname: "牛排礼盒",  goodsdesc:"这个是商品说明",  goodsprice: "200.00", goodsunit: "元/套" },
      ],
    loadingmsg:"没有更多数据啦！",
    selectedgoods:[],  //购物车添加明细清单
    hasbeenselected:[{}],  //这个是用来显示该商品是不是已经添加用的
    showcart:false,   //显示、隐藏购物车明细
    totalfee:0.00   //购物车金额合计，初始为0
  },

//在页面中添加商品至购物车
  selectgoods(e){
    var selectedgoods = this.data.selectedgoods;
    var goodsid = e.currentTarget.id;
    var goodsname = e.currentTarget.dataset.name;
    var goodprice = e.currentTarget.dataset.price;
    //获取已经选择商品数组
    var hasbeenselected = this.data.hasbeenselected; 
    //Number是将字符串转话为数字用的
    var totalfee = Number(this.data.totalfee);  
    //如果购物车为空是,或者已选择购物清单为空时，先push当前选择进购物车数组
    if (selectedgoods.length == 0 || selectedgoods.length == null || hasbeenselected[0][goodsname] !== 1) {  
      selectedgoods.push({ "id": goodsid, "goodsname": goodsname, "goodprice": goodprice, "selectnum": 1 });
      //+=是用来给totalfee加数字后求和用的
      totalfee += Number(goodprice);   
      //将当前商品名：1添加到已选择商品数组，用于前端显示已选择及后面判断
      hasbeenselected[0][goodsname] = 1;  
    }else{   //当购物车数组不为空时
      for (var i = 0; i<selectedgoods.length; i++){    //循环历遍购物车数组
        if (selectedgoods[i].goodsname == goodsname){
          var selectnum = selectedgoods[i].selectnum;   //当数组中有当前商品的购物数量时，获取已添加数量
          selectedgoods[i].selectnum = selectnum + 1;   //将数组中有当前商品的购物数量在原来基础上+1
          totalfee += Number(goodprice);
        }
      }
    }
    var that = this;
    that.setData({
      selectedgoods: selectedgoods,
      hasbeenselected: hasbeenselected,
      totalfee: (Number(totalfee)).toFixed(2)
    })
//    console.log(selectedgoods)
//    console.log(totalfee)
//    console.log(hasbeenselected)
  },

  //在购物车中减少
  cartreduce(e) {
    var selectedgoods = this.data.selectedgoods;
    var goodsid = e.currentTarget.id;
    ///将数组中有当前商品的购物数量在原来基础上-1
    selectedgoods[goodsid].selectnum = selectedgoods[goodsid].selectnum - 1;
    var totalfee = Number(this.data.totalfee);
    var hasbeenselected = this.data.hasbeenselected;
    var goodsname = selectedgoods[goodsid].goodsname;
    totalfee -= (Number(selectedgoods[goodsid].goodprice));
    console.log(selectedgoods)
    //当购物车数组内该商品选择数量为0时，通过splice从数组中删除对应数据，同时将已选择商品清单中对应的商品值设成0
    if (selectedgoods[goodsid].selectnum==0){  
      selectedgoods.splice(goodsid, 1);
      hasbeenselected[0][goodsname] = 0;
    }
    console.log(totalfee)
    var that = this;
    that.setData({
      selectedgoods: selectedgoods, 
      hasbeenselected: hasbeenselected,
      totalfee: (Number(totalfee)).toFixed(2)
    })
  },

  //在购物车中添加
  cartadd(e){
    var selectedgoods = this.data.selectedgoods;
    var goodsid = e.currentTarget.id;
    var totalfee = Number(this.data.totalfee);
    totalfee += (Number(selectedgoods[goodsid].goodprice));
    selectedgoods[goodsid].selectnum = selectedgoods[goodsid].selectnum+1;
    console.log(selectedgoods)
    var that=this;
    that.setData({
      selectedgoods: selectedgoods,
      totalfee: (Number(totalfee)).toFixed(2)
    })
  },

  //购物车里直接更改数字
  cartnuminput(e){
    var selectedgoods = this.data.selectedgoods;
    var goodsid = e.currentTarget.id;
    //下面是设置当用户自己输入数值小于1时，自动将input值变成1，防止用户误删以及数量变成0之后商品还在购物清单中的bug
    if (e.detail.value<1){
      var inputvalue=1;
    }else{
      var inputvalue = e.detail.value
    }
    selectedgoods[goodsid].selectnum = Number(inputvalue);
    console.log(selectedgoods)
    var that = this; 
    //下面是将购物车总价重置成0之后，循环历遍购物车数组，将商品*数量，得出的商品价格相加后算出总价
    var totalfee = 0.00;
    for(var i=0; i<selectedgoods.length; i++){
      totalfee += selectedgoods[i].goodprice * selectedgoods[i].selectnum
    }
    that.setData({
      selectedgoods: selectedgoods,
      totalfee: (Number(totalfee)).toFixed(2)
    })
  },

  //显示购物车
  showcart(e){
    var that=this;
    that.setData({
      showcart:true,
    })
  },
  //隐藏购物车
  closecart(e) {
    var that = this;
    that.setData({
      showcart: false,
    })
  },
  
})

WXSS部分

.goodslist{
  margin:20rpx auto;
  width:95%;
}
.goodsitems{
  display: flex;
  flex-direction: row;
  background: #fff;
  height:200rpx;
  padding:10rpx;
  margin:20rpx auto;
  border-radius: 10rpx;
  box-shadow: 10rpx 10rpx 15rpx #DCDCDC;/*for Android*/
  -webkit-box-shadow:10rpx 10px 15px #DCDCDC;/*for IOS*/
}
.goodsimg image{
  width:180rpx;
  height:180rpx;
  margin-top:10rpx;
}
.goodsdetail{
  display: flex;
  flex-direction: column;
  margin:0rpx 20rpx;
  width:80%;
}
.goodsname{
  display: flex;
  flex-direction: row;
  font-size:30rpx;
  font-weight: bolder;
  margin: 5rpx;
  padding:5rpx 0rpx;
  overflow: hidden;
}
.goodsdesc{
  font-size:28rpx;
  height:80rpx;
  margin: 5rpx;
  overflow: hidden;
}
.select{
  display: flex;
  flex-direction: row;
}
.selectgoods{
  width:60rpx;
  display: flex;
  float:right;
}
.selectgoods image{
  width:60rpx;
  height:60rpx;
  margin:10rpx auto;
}
.beenselected{
  width:120rpx;
  height: 50rpx;
  font-size:30rpx;
  color:#50aaff;
  text-align: right;
  margin-left:-100rpx;
}

.goodsprice{
  font-size:30rpx;
  margin: 20rpx 0rpx 10rpx;
  width:90%;
}
.loadingmsg{
  margin:30rpx auto;
  width:95%;
  font-size:30rpx;
  color:#7d7d7d;
  text-align: center;
}

.goodcart{
  position: fixed;
  display: flex;
  flex-direction: row;
  bottom:5rpx;
  right:10rpx;
}
.goodcart image{
  width:80rpx;
  height:80rpx;
  margin:10rpx auto;
  float: right;
}
.cartdetails{
  background: #000;
  width:100%;
  height:100%;
  position: fixed;
  top:0;
  left:0;
  opacity: 0.3;
}
.cartitems{
  background: #fff;
  border-radius: 10rpx;
  width:85%;
  height:620rpx;
  position: fixed;
  display: flex;
  flex-direction: column;
  top:50%;
  left:5%;
  margin-top:-300rpx;
  padding:20rpx;
}
.closethis image{
  margin-top:-30rpx;
  margin-right:-30rpx;
  width: 60rpx;
  height: 60rpx;
  float: right;
}
.cartlists{
  background-color: #f5f5f5;
}
.cartlist{
  display: flex;
  flex-direction: row;
  border-radius: 10rpx;
  background:#fff;
  padding:10rpx;
  width:95%;
  margin:10rpx;
  font-size:28rpx;
  align-items: center;  /**垂直对齐*/
  justify-content: center;  /**水平对齐*/
}
.cgoodsname{
  width:60%;
  margin-left:10rpx;
}
.cgoodsprice{
  width:20%;
}
.selectnum{
  width:20%;
  display: flex;
  flex-direction: row;
}
.selectnum image{
  width:50rpx;
  height:50rpx;
  margin-top:8rpx;
}
.nums{
  width:70rpx;
  margin:5rpx;
  border:1rpx solid #DCDCDC;
  padding:5rpx;
}
.listnum{
  position: fixed;
  display: flex;
  bottom:60rpx;
  right:10rpx;
  color:#fff;
  background: #0787ff;
  border-radius: 50%;
  width:34rpx;
  height:34rpx;
  font-size:24rpx;
  align-items: center;  /**垂直对齐*/
  justify-content: center;  /**水平对齐*/
}
.chartbottom{
  display: flex;
  flex-direction: row;
}
.gotopay{
  width:200rpx;
  height:60rpx;
  display: inline-block;
  margin:10rpx;
  padding:20rpx;
  text-align: center;
  align-items: center;  /**垂直对齐*/
  justify-content: center;  /**水平对齐*/
  color:#fff;
  background: #50aaff;
  border-radius: 10rpx;
}
.totalfee{
  display: inline-block;
  width:60%;
}

后面有时间的时候，再把购物车清单提交、我的购物清单、以及后端接口给做上，可惜小程序是个人的，没法使用微信支付功能，不然就可以尝试自己做个小商城了，呵呵