微信小程序购物车功能

最新推荐文章于 2024-04-26 21:59:34 发布

空空的瓶子酱

最新推荐文章于 2024-04-26 21:59:34 发布

阅读量1.4k

点赞数 4

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/eva_feng/article/details/105180312

版权

本文介绍了微信小程序中实现购物车功能的详细步骤，包括购物车商品列表的结构，如商品ID、图片、名称、单价、数量和选择状态等。同时，提到了全选按钮、总价、总数量的字段，并讨论了购物车是否为空的判断。还涵盖了购物车的主要功能，如商品数量的增减、单选、全选、总价和总数量的计算以及商品删除的操作实现。

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

实现一个购物车页面，需要哪些数据。整理下大概如下：
一个购物车商品列表(carts)，列表里的单个item包含：商品id(id)，商品图(image)，商品名(title)，单价(price)，数量(amount)，单选按钮(selected)；
全选按钮，需要一个字段(selectAllStatus)表示是否全选；
总价(totalPrice)；
总数量（totalNum）。
还有一个需要判断的是购物车是否为空(hasList)的字段。
购物车主要的几个功能：商品数量的加减、单选、全选、计算总价格、总数量、商品删除。

wxml代码：

<!-- 购物车商品列表 -->
<view class="list">
  <view wx:if="{
  {hasList}}">
    <block wx:for="{
  {carts}}" wx:key="id">
      <view class="item-section" bindlongpress="delItem" data-index="{
  {index}}">
        <!-- 单选按钮 是否选中显示不同的图标 -->
        <view class="radio-section" wx:if="{
  {item.selected}}" data-index="{
  {index}}" bindtap="changeSelect">
          <icon type="success_circle" color="#f00"></icon>
        </view>
        <view class="radio-section" wx:else  data-index="{
  {index}}" bindtap="changeSelect">
          <icon type="circle" color="#ccc"></icon>
        </view>
        
        <view class="cart-info">
          <view class="img">
          <!-- 图片跳转到详情页 -->
          <navigator  url="/pages/good-detail/good-detail?productId={
  {item.prodId}}">
            <image src="{
  {item.prodPic}}" mode="aspectFill" />
          </navigator>
          </view>
          <view class="info-rt">
            <view class="title">{
  {item.prodName}}</view>
            <view>
              <view class="price">￥{
  {item.prodPrice}}</view>
              <!-- 数量加减操作 -->
              <view class="numarea">
                <text class="sign num-minus" data-types="minus" data-index="{
  {index}}" bindtap="changeNum">-</text>
                <text class="num-input">{
  {item.amount}}</text>
                <text class="sign num-plus" data-types="plus" data-index="{
  {index}}" bindtap="changeNum">+</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>

  <view wx:else>
    <view>购物车还没有商品哦~~</view>
    <navigator open-type='switchTab' url="/pages/allproduct/allproduct" class="toShopping">去逛逛</navigator>
  </view>
</view>

<!-- 底部操作栏 -->
<view class="bottom-box">
  <view class="select-all" wx:if="{
  {selectAllStatus}}" data-select="{
  {selectAllStatus}}" bindtap="selectAll">
    <icon type="success_circle" color="#f00"></icon>
    <text>全选</text>
  </vi