615 技术社区[云栖]

【分享】小程序购物车demo演示实例(全选与不全选、数量加减、价格汇总、删除提示)

<!--pages/shopCart/shopCart.wxml-->
<!-- 小程序购物车demo -->

<view >
  <!-- <>购物车列表 -->
  <view >
    <view wx:for="{{carts}}"  data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
      <!-- //复选框 -->
      <view >
        <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
        <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" />
      </view>
      <!-- //商品信息 -->
      <view >
        <image  src="{{item.image}}" mode="aspectFill" />
        <view >
          <view >{{item.title}}</view>
          <view >
            <text >￥{{item.price}}</text>
          </view>
        </view>
      </view>
      <!-- //数量加减 -->
      <view >
        <text  data-index="{{index}}" data-type="-" bindtap="bindCartNum">-</text>
        <input type="number" data-index="{{index}}" bindinput="bindIptCartNum" value="{{item.num}}" />
        <text  data-index="{{index}}" data-type="+" bindtap="bindCartNum">+</text>
      </view>
      <!-- //删除 -->
      <icon  type="clear" size="16" color="#ccc" data-index="{{index}}" bindtap="bindCartsDel" />
    </view>
  </view>

  <!-- //加载提示 -->
  <block wx:if="{{showLoading}}">
    <view >
      <text  />
      <text >加载中</text>
    </view>
  </block>

  <view >
    <view >
      <view >
        <view  bindtap="bindSelectAll">
          <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" />
          <icon wx:else type="circle" size="20" />
          <text>全选</text>
        </view>
        <view >合计：￥{{totalPrice}}</view>
        <view wx:if="{{selectedNum != 0}}" >去结算({{selectedNum}})</view>
        <view wx:else >去结算({{selectedNum}})</view>
      </view>
    </view>
  </view>

</view>

wxss样式：

/* …… 小程序购物车 {{{ …… */
.c--f60{color: #f60;}
.clamp1, .clamp2, .clamp3{display: -webkit-box!important; overflow: hidden; -webkit-box-orient: vertical;}
.clamp1{-webkit-line-clamp:1;}
.clamp2{-webkit-line-clamp:2;}
.clamp3{-webkit-line-clamp:3;}

.carts-list{padding: 0 20rpx;}
.carts-list .carts-item{border-top: 1rpx solid #e3e3e3; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 20rpx 10rpx; width: 100%; position: relative;}
.carts-list .carts-item:nth-child(1){border-top: 0;}
.carts-item .carts-cnt{flex: 1; padding: 0 20rpx;}
.carts-cnt .carts-image{float:left; margin-right: 20rpx; height: 150rpx; width: 150rpx;}
.carts-cnt .carts-info{display: flex; flex-direction: column; justify-content: space-between; min-height: 150rpx;}
.carts-cnt .carts-title{font-size: 28rpx;}
.carts-cnt .carts-subtitle{display: flex; flex-direction: row; font-size: 28rpx;}
.carts-list .carts-item .carts-del{position: absolute; top: 20rpx; right: 10rpx;}

/*数量加减*/
.carts-num{border: 1rpx solid #aaa; border-radius: 5rpx; display: flex; align-items: center; align-self: flex-end; text-align: center; height: 50rpx;}
.carts-num input{border-left: 1rpx solid #aaa; border-right: 1rpx solid #aaa; font-size: 30rpx; font-family: arial; height: 50rpx; line-height: 50rpx; width: 80rpx;}
.carts-num .minus, .carts-num .plus{color: #000; text-align: center; line-height: 50rpx; width: 40rpx;}
.carts-num .minus{font-size: 30rpx;}
.carts-num .minus.disabled{color: #ccc;}
.carts-num .plus{font-size: 34rpx;}