微信小程序商城系列之购物车

本文介绍了微信小程序中商城购物车的实现,重点讲解了如何将购物车数据存储在数据库中,包括商品数量的增减、单选/多选/全选功能,以及计算选中商品总价的逻辑。示例中通过WXML、WXSS和JS来实现功能,并提供了实际效果图。
摘要由CSDN通过智能技术生成

购物车功能基本上算是每个商城都有的功能,也是整个商城系统最重要的部分,购物车的做法有很多种,一般存放在本地缓存和数据库中比较常见,本文就是存放到了数据库中;

先放一张效果图:

先分析下要实现的功能:

1.数量的加减

2.单选、多选、全选

3.根据选中商品单价和数量计算金额

wxml:

<block wx:if='{
  {hasList}}'>
  <!-- <>购物车列表 -->
  <view class="carts-list">
    <view wx:for="{
  {carts}}" class="carts-item" wx:key='cart' wx:item='item'>
      <!-- //复选框 -->
      <view class="carts-radio">
        <image class="carts-select" bindtap="bindCheckbox" data-index="{
  {index}}" src="{
  {item.isSelect?'/img/icon/select.png':'/img/icon/n_select.png'}}" />
      </view>  
      <!-- //商品信息 -->  
      <view class="carts-cnt">
        <image class="carts-image" src="{
  {imghref}}{
  {item.goods_img}}" mode="aspectFill" />
        <view class="carts-info">
          <view class="carts-title clamp2">{
  {item.goods_name}}</view>
          <text class="carts-guige">{
  {item.guige}}ml</text>
          <view class="carts-subtitle">
            <text class="carts-price c--f60">¥{
  {item.price}}</text>
          </view>
        </view>
      </view>
      <!-- //数量加减 -->  
      <view class="carts-num">
          <text class="minus"  bindtap="bindMinus" data-index='{
  {index}}'>-</text>
          <input type="number"  bindinput="bindIptCartNum" data-index='{
  {index}}' value="{
  {item.num}}" />
          <text class="plus norm
  • 26
    点赞
  • 146
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值