购物车功能基本上算是每个商城都有的功能,也是整个商城系统最重要的部分,购物车的做法有很多种,一般存放在本地缓存和数据库中比较常见,本文就是存放到了数据库中;
先放一张效果图:
先分析下要实现的功能:
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