微信小程序购物车

最新推荐文章于 2021-09-08 15:57:37 发布

「已注销」

最新推荐文章于 2021-09-08 15:57:37 发布

阅读量368

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/clear_code/article/details/106668845

版权

本文详细介绍了如何在微信小程序中实现购物车功能，包括从列表获取商品ID传递到详情页面，通过接口获取详情并渲染，以及利用本地存储管理购物车数据。在购物车部分，涵盖了增加、减少商品数量，选择商品，全选，计算总价及删除商品等功能。涉及到的关键操作都详细解释了逻辑处理，并提到了使用Slideview组件进行删除操作。

摘要由CSDN通过智能技术生成

列表

获取到api中的值，进行渲染列表，给每一项赋值一个id，点击的时候得到这个id，传到详情页面中，在详情页面的onload里面接收，在调用详情的api渲染详情；

data

   list:[{
      id:1,
      name:'多乐士[家丽安-净味]18L',
      price:"100",
      img:'https://img10.360buyimg.com/babel/s590x470_jfs/t1/143175/30/214/84179/5ede1117E0ab06640/8a9c910e422af778.jpg.webp',
    },
    {
      id:2,
      name:'多乐士[家丽安-净味]10L',
      price:"50",
      img:'https://img10.360buyimg.com/babel/s590x470_jfs/t1/143175/30/214/84179/5ede1117E0ab06640/8a9c910e422af778.jpg.webp',
    }
  ]

wxml

  <scroll-view scroll-y="true">
    <view class="goodslist">
      <block>
        <view class="goodsitem" bindtap="intoDetails" wx:for="{
  {list}}" wx:key="index" data-id="{
  {item.id}}">
          <image src="{
  {item.img}}" class="goodspic"></image>
          <view class="goodsname">{
  {item.name}}</view>
          <view class="hangb">
            <view class="price"><text>￥</text>{
  {item.price}}</view>
            <image src="{
  {basicImg}}/index/shopcars.png" class="shopcars" catchtap="goNorms"></image>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>

点击商品进入详情

  intoDetails:function(e){
    wx.navigateTo({
      url: '../goodsDetails/goodsDetails?id='+e.currentTarget.dataset.id,
    })
  },

详情

根据id调用接口，在页面上进行渲染值；然后添加到购物车（利用本地存储来存数据）；
先判断存储里有没有这个数组，如果有这个数组，循环遍历，查看id是否相同，id相同就把数量等条件替换成用户现在选择的条件，如果id相同就代表用户选择的是同一种商品，替换一下他所选择的条件就可以了；
存储中有这个数组但是id不相同，把当前对象push进数组，如果id不相同，就代表用户选择的不是一件商品，所以需要把当前选择的push进数组里面；
存储中没有这个数组，就直接push进去，用户还没有将任何商品添加到购物车，直接push进去就好；

添加购物车

因为我写的大部分是假数据，所以html和css就不写出来了，见谅！！！


  //加入购物车
  addCards: function () {
    var storageGoods = wx.getStorageSync('goods');    //先获取本地存储中的数组
    var goods = [];         //  定义一个数组										
    var obj = {        // 需要存入本地存储的值；
      id: this.data.ids,
      name: this.data.name,
      price: this.data.price,
      type: this.data.mname,
      colors: this.data.cname,
      num: this.data.num,
      img: this.data.banner[0].img
    }
    if (storageGoods) {