小程序商城项目购物车搭建

一、购物车分析

• 首先购物车大致页面如下：

• 其中有许多需要完成的功能：例如：添加收货地址、选择与全选、商品数量的增加与减少、结算按钮

二、获取收货地址

• 收货地址页面结构：没有获取地址时显示按钮，获取地址后显示地址：

<!-- 收货地址 -->
<view class="revice_address_row">
  <!-- 当收货地址 不存在 按钮显示 -->
  <view class="address_btn" wx:if="{{!address.userName}}">
    <button bindtap="handleChooseAddress" type="primary" plain>获取收货地址</button>
  </view>
  <!-- 当收货地址 存在 详细信息显示 -->
  <view wx:else class="user_info_row"> 
    <view class="user_info">
      <view>
        {{address.userName}}
      </view>
      <view>
        {{address.all}}
      </view>
    </view>
    <view class="user_phone">
      {{address.telNumber}}
    </view>
  </view>  
</view>

• 收货地址样式：

.revice_address_row {
  .address_btn {
    padding: 20rpx;
    button {
      width: 60%;
    }
  }
  .user_info_row {
    display: flex;
    padding: 20rpx;
    .user_info {
      flex: 5;
    }
    .user_phone {
      flex: 3;
      text-align: right;
    }
  }
}

• 动态实现：

// 点击 收货地址
handleChooseAddress() {
  // 获取收货地址
  wx.chooseAddress({
    success: (result) => {
      result.all = result.provinceName + result.cityName + result.countyName + result.detailInfo
      // 把获取到的收货地址 存入到缓存中
      wx.setStorageSync("address", result);
    }
  });  
}

三、静态样式

• 商品在购物车中展示的静态结构：当没有商品时，展示一张购物车为空图片。

<!-- 购物车内容 -->
<view class="cart_content">
  <view class="cart_title">购物车</view>
  <view class="cart_main">
    <!-- 当cart数组 长度不为0 显示 商品信息 -->
    <block wx:if="{{cart.length !== 0}}">
      <view class="cart_item"
      wx:for="{{cart}}"
      wx:key="goods_id">
      <!-- 复选框 -->
      <view class="cart_chk_wrap">
        <checkbox-group data-id="{{item.goods_id}}" bindchange="handleItemChange">
          <checkbox checked="{{item.checked}}"></checkbox>
        </checkbox-group>
      </view>
      <!-- 商品图片 -->
      <navigator class="cart_img_wrap">
        <image src="{{item.goods_small_logo}}" mode="widthFix"/>
      </navigator>
      <!-- 商品信息 -->
      <view class="cart_info_wrap">
        <view class="goods_name">{{item.goods_name}}</view>
        <view class="goods_price_wrap">
          <view class="goods_price">￥{{item.goods_price}}</view>
          <view class="cart_num_tool">
            <view bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{-1}}" class="num_edit">-</view>
            <view class="goods_num">{{item.num}}</view>
            <view bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{1}}" class="num_edit">+</view>
          </view>
        </view>
      </view>
    </view>
    </block>
    <block wx:else>
      <image mode="widthFix" src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658" ></image>
    </block>
  </view>
</view>

• 样式：

.cart_content {
  .cart_title {
    padding: 20rpx;
    font-size: 36rpx;
    color: var(--themeColor);
    border-top: 1rpx solid currentColor;
    border-bottom: 1rpx solid currentColor;
  }

  .cart_main {
    .cart_item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #ccc;
      .cart_chk_wrap {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        checkbox-group {
          checkbox {

          }
        }
      }

      .cart_img_wrap {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 80%;
        }
      }

      .cart_info_wrap {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #666;
        }

        .goods_price_wrap {
          display: flex;
          justify-content: space-between;
          .goods_price {
            color: var(--themeColor);
            font-size: 34rpx;
          }

          .cart_num_tool {
            display: flex;
            .num_edit {
              width: 55rpx;
              height: 55rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1rpx solid #ccc;
            }
  
            .goods_num {
              width: 55rpx;
              height: 55rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
}

四、底部工具栏

• 底部工具栏结构：

<!-- 底部工具栏 -->
<view class="footer_tool">
  <!-- 全选 -->
  <view class="all_chk_wrap">
    <checkbox-group bindchange="handleItemAllChecked">
      <checkbox checked="{{allChecked}}">全选</checkbox>
    </checkbox-group>
  </view>
  <!-- 总价格 -->
  <view class="total_price_wrap">
    <view class="total_price">
      合计: <text class="total_price_text">￥{{totalPrice}}</text>
    </view>
    <view>包含运费</view>
  </view>
  <!-- 结算 -->
  <view class="order_pay_wrap" bindtap="handlePay">
    结算({{totalNum}})
  </view>
</view>

• 底部工具栏样式：

.footer_tool {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #ccc;
  .all_chk_wrap {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    checkbox-group {
      checkbox {

      }
    }
  }

  .total_price_wrap {
    flex: 5;
    padding-right: 15rpx;
    text-align: right;
    .total_price {
      .total_price_text {
        color: var(--themeColor);
        font-size: 34rpx;
        font-weight: 600;
      }
    }
  }

  .order_pay_wrap {
    flex: 3;
    background-color: var(--themeColor);
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

五、总价格和总数量

• handleItemNumEdit()：

// 商品数量的编辑功能
handleItemNumEdit(e) {  
  // 1 获取传递过来的参数
  const { operation, id } = e.currentTarget.dataset;
  // 2 获取购物车数组
  let { cart } = this.data;
  // 3 找到需要修改的商品的索引
  const index = cart.findIndex(v => v.goods_id === id);
  // 3* 判断是否要执行删除
  if (cart[index].num === 1 && operation === -1) {
    // 弹窗提示
    wx.showModal({
      title: '提示',
      content: '您是否要删除该商品?',
      success: (res) => {
        if (res.confirm) {
          cart.splice(index, 1);
          this.setCart(cart);
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  } else {
    // 4 进行修改数量
    cart[index].num += operation;
    // 5 设置回缓存和data中
    this.setCart(cart);
  }
}

• setCart()：

// 设置购物车状态 同时 重新计算 底部工具栏 全选 总价格 购买的数量
setCart(cart) {
  let allChecked = true;
  let totalPrice = 0;
  let totalNum = 0;
  cart.forEach(v => {
    if (v.checked) {
      totalPrice += v.num * v.goods_price;
      totalNum += v.num;
    } else {
      allChecked = false;
    }
  });
  // 判断数组是否为空
  allChecked = cart.length != 0 ? allChecked : false;
  this.setData({
    cart,
    totalPrice,
    totalNum,
    allChecked
  });
  wx.setStorageSync("cart", cart);
}

六、商品选中

• handleItemChange()：

// 商品的选中
handleItemChange(e) {
  // 1 获取被修改的商品id
  const goods_id = e.currentTarget.dataset.id;
  // 2 获取购物车数组
  let { cart } = this.data;
  // 3 找到被修改的商品对象
  let index = cart.findIndex(v => v.goods_id === goods_id);
  // 4 选中状态取反
  cart[index].checked = !cart[index].checked;
  this.setCart(cart);
}

七、全选-反选

• handleItemAllChecked()：

// 商品的全选功能
handleItemAllChecked() {
  // 1 获取data中的数据
  let { cart, allChecked } = this.data;
  // 2 修改值
  allChecked = !allChecked;
  // 3 循环修改cart数组中的商品选中状态
  cart.forEach(v => v.checked = allChecked);
  // 4 把修改后的值 填充回data或者缓存中
  this.setCart(cart);
}

八、结算按钮功能

• handlePay()：

// 点击结算
handlePay() {
  // 1 判断收货地址
  const { address, totalNum } = this.data;
  if (!address.userName) {
    wx.showToast({
      title: '您还没有选择收货地址',
      icon: 'none',
      mask: false,
      success: (result) => {
        
      },
      fail: () => {},
      complete: () => {}
    });
    return;
  }
  // 2 判断用户有没有选择商品
  if (totalNum === 0) {
    wx.showToast({
      title: '您还没有选购商品',
      icon: 'none',
      image: '',
      duration: 1500,
      mask: false,
      success: (result) => {
        
      },
      fail: () => {},
      complete: () => {}
    });
    return;
  }
  // 3 跳转到支付页面
  wx.navigateTo({
    url: '/pages/pay/index',
  });
    
}