微信小程序加入购物车流程

加入购物车的流程

1.先给按钮一个点击事件

 <view class="asd2">
    <view class="asd12" bindtap="goodlistadd">加入购物车</view>
    <view class="asd12">立即购买</view>
  </view>

2.然后进行往本地存储

  **1.先判断本地存储里面是否有数据如果没有初始化一个空的数组**
	**2.然后在进行利用js中的findindex来判断本地数据和本地存储中的数据是否存在，如果存在就让数量+1，如何没有就直接添加到本地数据**

 goodlistadd(){
      console.log('方法已经触发')
      let carts = wx.getStorageSync('goodlist')||[]
      console.log(carts)
      let index = carts.findIndex(item =>{
        return item.goods_id == this.data.goodslist.goods_id
      })
      console.log(index)
      if(index===-1){
        
        this.data.goodslist.num=1
        this.data.goodslist.change = true
        // console.log(this.data.goodlist)
        carts.push(this.data.goodslist)
      wx.setStorageSync('goodlist', carts)
      }else{
        carts[index].num++
      }
      wx.setStorageSync('goodlist',carts)
     wx.showToast({
      title: '添加成功',
     })
  },

在购物车页面进行渲染

1. 首先在购物车页面进行中的就是代码中进行取值

  data: {
    list:[],
    zongjia:0
  },


  onLoad: function (options) {
  var a =wx.getStorageSync('goodlist')
  console.log(a);
  
  this.setData({
    list:a
  })
  console.log(this.data.list)
  },

2.渲染页面

<!--pages/cart/cart.wxml-->
<view class="a">
  <button>+添加收获地址</button>
</view>
<view class="b">
  <view class="q">
    <text >
  优购生活馆
  </text>
  </view>
  <view class="b1" wx:for="{{list}}" wx:key='index'>
    <view class="b2">
      <checkbox />  
    </view>
    <view class="b3">
      <image src="{{item.goods_small_logo}}" class="imgs"></image>
    </view>
    <view class="b4">
      <text>{{item.goods_name}}</text>
    </view>
  </view>
</view>
<view class="c">
  <view class="c1">
    全选<checkbox />
  </view>
  <view class="c2">
    <text>总价:￥{{zongjia}}</text>
</view>
<view class="c3">
  <button>结算</button>
</view>
</view>

3.购物车页面的样式css

/* pages/cart/cart.wxss */
.a{
  width: 100%;
  height: 50px;
  background-color: white;
  border-bottom:1px solid black ;
}
.b1{
  width: 100%;
  height: 140px;
  /* background-color: tomato; */
  border:1px solid black ;
  display: flex;
}
.b2{
  width: 10%;
  height: 100%;
  /* background-color: red; */
}
.b3{
  width: 40%;
  height: 100%;
  /* background-color: seagreen; */
}
.b4{
  width: 60%;
  height: 100%;
  /* background-color: yellow; */
}
.c{
  width: 100%;
  height: 50px;
  background-color: white;
  position: fixed;
  bottom: 0;
  display: flex;
  border-top:1px solid black ;
}
.c1{
  width: 20%;
  height: 100%;
  /* background-color: violet; */
}
.c2{
  width: 40%;
  height: 100%;
  line-height: 50px;
  text-align: center;
  /* background-color: red; */
}
.c2 >text{
  color: red;
}
.c3{
  width: 40%;
  height: 100%;
  /* background-color:aliceblue; */
}
.imgs{
  width: 100%;
  height: 80%;
}
.q{
  width: 100%;
  height: 40px;
}