微信小程序购物车页面实现

已于 2023-06-06 09:56:13 修改
阅读量6.8k 收藏 118
点赞数 21
文章标签： 微信小程序 小程序
于 2023-05-31 20:09:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62280810/article/details/130976226
版权

目录

32.商品加入购物车逻辑实现（前端）

33.购物车页面收货地址实现

34.购物车商品列表显示实现

37.购物车商品复选框选中业务处理

38.购物车全选复选框选中业务处理

39.购物车商品数量编辑实现

40.购物车商品数量为0判定是否删除

42.商品详情立即购买逻辑实现

32.商品加入购物车逻辑实现（前端）

1.先在product_detail下的index.wxml的view标签下添加bindtap

<view class="tool_item btn_cart" bindtap="handleCartAdd">
    <view>加入购物车</view>
</view>

2.对应在js文件夹下写点击事件handleCartAdd:商品加入购物车

3.需要判断商品加入购物车的逻辑：一种是已经存在购物车中，如果再加，数量加一即可；还有是不存在购物车中的。

```Java
 // 点击事件 商品加入购物车
  handleCartAdd(){
   let cart=wx.getStorageSync('cart')||[];
    console.log("cart="+cart);
    let index=cart.findIndex(v=>v.id===this.productInfo.id);
    if(index===-1){ // 购物车里面不存在当前商品 
      this.productInfo.num=1;
      cart.push(this.productInfo);
    }else{ // 已经存在
      cart[index].num++;//数量加一
    }
    wx.setStorageSync('cart', cart); // 把购物车添加到缓存中
    //设置提示，加入成功
    wx.showToast({
      title: '加入成功',
      icon:'success',
      mask:true
    })
  },
```

4.上面代码优化：可以将上面代码封装为setCartadd

// 点击事件 商品加入购物车
  handleCartAdd(){
    this.setCartadd();
    wx.showToast({
      title: '加入成功',
      icon:'success',
      mask:true
    })
  },
  // 加入购物车
  setCartadd(){
    let cart=wx.getStorageSync('cart')||[];
    console.log("cart="+cart);
    let index=cart.findIndex(v=>v.id===this.productInfo.id);
    if(index===-1){ // 购物车里面不存在当前商品 
      this.productInfo.num=1;
      cart.push(this.productInfo);
    }else{ // 已经存在
      cart[index].num++;
    }
    wx.setStorageSync('cart', cart); // 把购物车添加到缓存中
  },

33.购物车页面收货地址实现

1.先在第三个标签“购物车”cart下的index.json添加顶部标题

{
  "usingComponents": {},
  "navigationBarTitleText": "购物车"
}

2.开始在cart下的index.wxml写“获取收货地址”标签bindtap="handleChooseAddress" 作为点击事件，并在index.less设置样式。index.js写具体的handleChooseAddress方法

1）index.wxml

```Java
<!-- 收货地址 开始 -->
<view class="recevie_address_row">
  <view class="address_btn" wx:if="{{!address}}">
    <button type="warn" plain bindtap="handleChooseAddress" >获取收货地址</button>
  </view>

  <view wx:else class="user_info_row">
    <view class="user_info">
      <view>收货人：{{address.userName}},{{address.telNumber}}</view>
      <view>{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
    </view>

    <view class="change_address_btn">
      <button size="mini" plain>更换地址</button>
    </view>
  </view>
</view>
<!-- 收货地址 结束 -->
```

2）index.less：设置样式包括：获取收货地址按钮，更换地址按钮。左右分采用伸缩盒子flex

.recevie_address_row{
  .address_btn{
    padding: 20rpx;
    button{
      width: 60%;
    }
  }

  .user_info_row{
    display: flex;
    padding: 20rpx;
    .user_info{
      flex:5;
    }
    .change_address_btn{
      flex:3;
      text-align: right;
      button{
        border: 1px solid gray;
        font-weight: normal;
      }
    }
  }
}

3）index.js

写具体的handleChooseAddress方法:先在data里定义，再具体写。由于获取收货地址基本不变。可存入缓存中：  wx.setStorageSync('address', result)

 data: {
    address:{}
  },

  handleChooseAddress(){
    wx.chooseAddress({
      success: (result) => {
        console.log(result)
        wx.setStorageSync('address', result)
      },
    })
  },

然后onShow中监听页面显示，从缓存中获取地址

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("show")
    const address=wx.getStorageSync('address');
    this.setData({
      address
    })
  },

3.然后在页面显示，在index.wxml中写，引入wx:if="{{!address}}"判断没有值的话显示“获取收货地址”，有值的话显示的是wx:else class="user_info_row"

<!-- 收货地址 开始 -->
<view class="recevie_address_row">
  <view class="address_btn" wx:if="{{!address}}">
    <button type="warn" plain bindtap="handleChooseAddress" >获取收货地址</button>
  </view>

  <view wx:else class="user_info_row">
    <view class="user_info">
      <view>收货人：{{address.userName}},{{address.telNumber}}</view>
      <view>{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
    </view>

    <view class="change_address_btn">
      <button size="mini" plain>更换地址</button>
    </view>
  </view>
</view>
<!-- 收货地址 结束 -->

效果如下图：

34.购物车商品列表显示实现

1.首先数据要显示在页面上，先在index.js的data里定义数据cart:[]。然后可以在onShow里获取，如果购物车是空的，可以||一个空数组。编译后可以在AppData中查看是否存入数据：
 

onShow: function () {
    console.log("show")
    const address=wx.getStorageSync('address');
    const cart=wx.getStorageSync('cart')||[];
    this.setData({
      address,
      cart
    })
  },

2.在cart包index.wxml下写view标签，购物车列表包括的要素有：复选框，商品图片，商品信息。同时点击商品图片，点击商品名可以跳转，做法是navigator标签里写url:"/pages/product_detail/index?id={{item.id}}"。大致思路仍然先写标签，再设样式

index.wxml:

<!-- 购物车清单 开始 -->
<view class="cart_content">
  <view class="cart_main">
    <view class="cart_item"
      wx:for="{{cart}}"
      wx:key="id"
    >
      <!-- 复选框 开始 -->
      <view class="cart_chk_wrap">
        <checkbox-group>
          <checkbox></checkbox>
        </checkbox-group>
      </view>
      <!-- 复选框 结束 -->

      <!-- 商品图片 开始 -->
      <navigator class="cart_img_wrap" url="/pages/product_detail/index?id={{item.id}}">
        <image mode="widthFix" src="{{baseUrl+'/image/product/'+item.proPic}}"></image>
      </navigator>
      <!-- 商品图片 结束 -->

      <!-- 商品信息 开始 -->
      <view class="cart_info_wrap">
        <navigator url="/pages/product_detail/index?id={{item.id}}">
          <view class="goods_name">{{item.name}}</view>
        </navigator>
        <view class="goods_price_wrap">
          <view class="goods_price">
            ¥{{item.price}}
          </view>
          <view class="cart_num_tool">
            <view class="num_edit">-</view>
            <view class="goods_num">{{item.num}}</view>
            <view class="num_edit">+</view>
          </view>
        </view>
      </view>
      <!-- 商品信息 结束 -->
    </view>
  </view>
</view>
<!-- 购物车清单 结束 -->

设置样式，在index.less中

.cart_content{
  background-color: #F5F5F5;
  .cart_main{
    padding: 2rpx 10rpx 10rpx 10rpx;
    .cart_item{
      display: flex;
      background-color: white;
      border-radius: 10px;
      margin: 20rpx;
      padding-right: 20rpx;
      .cart_chk_wrap{
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20rpx;
      }
      .cart_img_wrap{
        flex:2;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F5F5F5;
        margin: 20rpx;
        border-radius: 10px;
        image{
          width: 80%;
        }
      }
      .cart_info_wrap{
        flex:4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods_name{
          font-weight: bolder;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .goods_price_wrap{
          display: flex;
          justify-content: space-between;
          .goods_price{
            color: var(--themeColor);
            font-size: 34rpx;
          }
          .cart_num_tool{
            display: flex;
            .num_edit{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 55rpx;
              height: 55rpx;
            }
            .goods_num{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 85rpx;
              height: 55rpx;
              background-color: #F5F5F5;
            }
          }
        }
      }
    }
  }
}

37.购物车商品复选框选中业务处理

复选框中，并设定点击事件bindchange命名为：handleItemChange，在index.js下写具体的商品选中事件处理方法：e作为事件源。e.currentTarget.dataset表示事件发生的当前元素的数据集合，包含了该元素的属性值。通过获取该数据集合中的id属性值，可以确定当前用户操作的是购物车中哪一项商品。

 // 商品选中事件处理
  handleItemChange(e){
    const {id}=e.currentTarget.dataset;
    let {cart}=this.data;
    let index=cart.findIndex(v=>v.id===id);
    console.log(index)
    cart[index].checked=!cart[index].checked;

    this.setCart(cart);
  },

设置缓存方便下次打开时存在缓存

  // 设置购物车状态 重新计算 底部工具栏 全选 总价 总数量 重新设置缓存
  setCart(cart){
    let allChecked=true;
    let totalPrice=0;
    let totalNum=0;
    cart.forEach(v=>{
      if(v.checked){
        totalPrice+=v.price*v.num;
        totalNum+=v.num;
      }else{
        allChecked=false;
      }
    })
    allChecked=cart.length!=0?allChecked:false;
    this.setData({
      cart,
      allChecked,
      totalNum,
      totalPrice
    })
    // cart设置到缓存中
    wx.setStorageSync('cart', cart);
  }

38.购物车全选复选框选中业务处理

在cart包下的，index.js写具体的商品全选事件handleItemAllCheck,点了之后是false状态，需要取反，取反后每个新的属性值allcheck设置到每个cart商品的属性（foreach遍历设置）

handleItemAllCheck(){
    let {cart,allChecked}=this.data;
    console.log(cart,allchecked)
    allChecked=!allChecked;
    cart.foreach(v=>v.checked=allChecked);
    this.setCart(cart);
}

39.购物车商品数量编辑实现

购物车里的商品数量的加和减需要绑定tab事件，加1还是减1要带operation参数，绑定参数

40.购物车商品数量为0判定是否删除

当把商品数量减为0时，出现弹窗提示：您是否要删除。设定弹窗出现条件：数量为1且操作为减一：cart[index].num===1 && operation === -1。删除完之后重新this.setCart(cart)显示页面

// 商品数量的编辑功能
  handleItemNumEdit(e){
    const {id,operation}=e.currentTarget.dataset;
    console.log(id,operation)
    let {cart}=this.data;
    let index=cart.findIndex(v=>v.id===id);
    if(cart[index].num===1 && operation === -1){
      wx.showModal({
        title:'系统提示',
        content:'您是否要删除？',
        // 点击取消
        cancelColor: 'cancelColor',
        // 点击确定
        success:(res)=>{
          if(res.confirm){
            // 调用方法，指定索引删除
            cart.splice(index,1);
            this.setCart(cart);
          }
        }
      })
    }else{
      cart[index].num+=operation;
      this.setCart(cart);
    }
  },

42.商品详情立即购买逻辑实现

在product_detail包下

点击商品下的立即购买，会实现跳转到购物车页面。

首先在html的“立即购买”的view标签里添加bindtap="bandleBuy"事件

  <view class="tool_item btn_buy" bindtap="handleBuy">
    <view>立即购买</view>
  </view>

然后在index.js里写具体的handleBuy方法

// 点击 立即购买
  handleBuy(){
    this.setCartadd();
    wx.switchTab({
      url: '/pages/cart/index',
    })
  },

limbo prime
关注
  • 21
    点赞
  • 踩
  • 118
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序购物车功能
eva_feng的博客
03-29 1456
一个购物车展示的是一个列表(carts)，列表里的单个item包含：商品id(id)，商品图(image)，商品名(title)，单价(price)，数量(amount)，单选按钮(selected)；全选按钮，需要一个字段(selectAllStatus)表示是否全选；总价(totalPrice)；总数量（totalNum）。 还有一个需要判断的是购物车是否为空(hasList)。 购物车主要有...
微信小程序实现购物车功能
01-22
本文实例为大家分享了微信小程序实现购物车功能的具体代码，供大家参考，具体内容如下 1、购物车界面功能实现 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时，页面会变为空购物车的布局 根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。 首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id) 然后左下角的全选，需要一个字段(selectAllStatus)
微信小程序开发（百货商战）实战项目的购物车和个人中心的创建
最新发布
php优质创造者
07-24 633
👨‍💻。
微信小程序购物车实现
10-04
微信小程序购物车实现，可供学习使用，学习小程序的朋友可以下载哈。
微信小程序实现购物车页面
weixin_33711647的博客
10-17 1543
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序简单实现购物车功能
weixin_45465881的博客
04-26 4136
实现在微信小程序中对每一个购物车界面的商品订单，进行勾选结算和取消结算的功能，相关界面截图如下： 具体实现示例代码为： 1、js代码： 2、wxml代码： 3、wxss代码： 本示例代码较为简单，适合初学的友友们借鉴，编写不易，关注博主，分享更多实用好用示例代码给大家，谢谢大家的支持和指导。
微信小程序购物车功能实现，代码详解！
专注java二开部署
12-08 1702
在最开始的时候，我们会从本地存储中获取购物车的数据。因为我们会频繁地切换不同的页面，而在页面切换的过程中，我们需要实时地重新加载购物车的最新数据。因此，我们将获取数据的方法写在。实际上，购物车的实现方式在大体上是相似的，不过小程序有其特有的一套数据层和业务层架构。在此，我将记录并分享之前我们采用的方法，希望对有需求的朋友们能提供一些参考价值。纯js代码，可能有一定小程序代码经验的会看得轻松一点。以上便可以实现在对购物车的商品进行加减和全选与反选，以及对商品进行数量合计并计算价格。
微信小程序购物车功能实现（干货满满）
热门推荐
qq_41317414的博客
08-28 4万+
微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！ 1. 应用场景 2. 思路分析 3. 代码分析 4. 具体实现代码 1.应用场景 适用于商城、秒杀、商品购买等类型的小程序，负责将顾客浏览的商品保存下来，方便客户集合比较商品与购买商品。 2.思路分析 实现购物车功能前请思考以下问题： 1.小程序如何布局？使用什么布局能提升页面开发效率？？ 2.将购物车功能分为四个小功能：(1)一键全选/取消商品 （2）动态添加商品可手动输入 （3）计算结算商品金额 （4）左滑动删除商品 答：（1）
【微信小程序】 实现购物车
还没入门Java的博客
10-12 2964
原生实现，不使用任何框架，网上没有啥好看的购物车，而且都是抄来抄去的，我来写一个好点的作为参考吧，拿来就能用。接口自行添加。链接：购物车代码片段购物车功能包括：
小程序实现购物车
09-30
实现小程序本地模拟小程序商城，电商，产品，产品详情，立即购买等功能，如实需要，下载瞎改地址，既可以用
微信小程序之购物车功能
12-11
前言 以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。 需求 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时，页面会变为空购物车的布局 根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。 首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id) 然后
微信小程序 - 商城项目 - 购物车
qq_25906119的博客
01-27 3338
微信小程序 - 购物车模块的结构解析
微信小程序（五）购物车
zhoulina815的博客
04-06 7842
微信小程序（五）购物车
微信小程序(黑马优购:购物车页面)
jklzbc的博客
03-29 1262
收货人: {{address.userName}}</view><view class="phone">电话: {{address.telNumber}}
微信小程序实现电商的购物车页面
紫月i的博客
10-26 2511
效果如图： 思路讲解： {id:1,name:‘西瓜’,src:’…/…/img/01.png’,color:‘white’,dprice:40,zprice:0,num:0}, 通过颜色来判断是否被选中，color为白色表示没有被选中，green表示选中，dprice表示单价，zprice:0表示总价，单价*数量就是总价，点击一次+或者-钱的总量就+或者-单价，num表示商品的数量 // pages/gouwuche/gouwuche.js Page({ data: { //sum用来计算钱
小程序购物车实现
liangtaox8的博客
09-11 1万+
前言 以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。 需求 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时，页面会变为空购物车的布局 原文作者：林鑫，作者博客：https://github.com/lin...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值