微信小程序购物车实现

1，wxml

 <view class="miniCart-wrap {{isIpx?'is-ipx':''}}">
    <view class="miniCart-main">
      <view class="miniCart-main-l">
        <view class="cart-icon" bindtap='showCartDialog' hover-class='none'>
          <image src="/assets/images/icon_minicart.png" mode='widthFix' />
          <text class="num">{{count}}</text>
        </view>
        <view class="cart-info">
          <view class="total">
            总计：
            <text class="price">￥{{cartShopPrice||'0'}}</text>
          </view>
           <view class="freight">已减 ￥{{cartShopReducePrice||'0'}} </view>
        </view>
      </view>
      <view class="miniCart-main-r">
          <view bindtap='submit' class="red-btn red-btn-l" wx:if="{{!closingTime}}">
          去结算
        </view>
        <view class="red-btn gray-btn" wx:if="{{closingTime}}">本店已休息</view>
      </view>
        <view class="miniCart-dialog {{isIpx?'is-ipx':''}} {{showCart?'show':''}}">
            <view class='showJH' wx:if="{{showJH}}">
                <image class="loadingJH" src="/assets/images/loading.gif" mode='widthFix' />
            </view>
            <view class="shop-namenew" wx:if="{{cartItems.length>0}}">
                <view class="shop-cart-head">
                    <view class="shop-cart-lf" bindtap="changeGoodsAllstatus">
                        <view>
                            <checkbox-group bindchange="shopCheckbox" data-store="{{item.storeSn}}" data-shopidx="{{shopidx}}">
                                <label class="checkbox">
                                    <view wx:if="{{goodsAllstatus}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                    <view  wx:if="{{!goodsAllstatus}}"  class="goods-coin-boxDf"></view>
                                </label>
                            </checkbox-group>
                        </view>
                        <view class="shop-cart-lf-text">全选 <text style="color: #666;font-size:22rpx">（已选{{count||'0'}}件）</text></view>
                    </view>
                    <view class="shop-cart-rt" bindtap="deleteUserCart">
                        <view class="shop-cart-rt-img"><image src="/assets/images/icon_delete.png" bindtap="clearTheShop"/></view>
                        <view class="shop-cart-rt-text"></view>
                    </view>
                </view>
            </view>
            <scroll-view class="content" scroll-y wx:if="{{cartItems.length==0}}">
                <image class="GIcon" src="/assets/images/nodata_cart.png" mode='widthFix' />
                <text>购物车里是空的</text>
            </scroll-view>

<!--            购物车内容-->
            <scroll-view class="content" scroll-y  wx:if="{{cartItems.length>0}}">
                <block >
                    <view class="shop-item" wx:for="{{cartItems}}" wx:key="cKey"  wx:for-item="item" wx:for-index="outIndex">
                        <!--             无促销类型-->
                        <view class="goods-list"  wx:if="{{item.groupType!='1'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">满减</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt" bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text"> 继续选购</view>
                                    <view class="goods-list-rt-icon"><image src="/assets/images/right_arrow.png"></image></view>
                                </view>
                            </view>
                            <view class="item" wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx"   bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                <view class="item-l">
                                    <label class="checkbox"  catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                        <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                        <view wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                    </label>
                                    <view class="img">
                                        <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                    </view>
                                    <view class="name-spec">
                                        <view class="name">{{goodsItem.skuName}}</view>
                                        <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                        <view class="goodsPlueico">
                                            <view class='goodsPlueico-price' >
                                                <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}}</text>
                                                <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                            </view>
                                            <view class="quantity-handle">
                                                <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="false" catchtap="updateUserCart" mode='widthFix' />
                                                <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}"  data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="true" catchtap="updateUserCart" mode='widthFix' />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="goods-list" wx:if="{{item.groupType=='1'&&item.promotionInfo.promotionType=='1'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">满减</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt" bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text"> 继续选购</view>
                                    <view class="goods-list-rt-icon"><image src="/assets/images/right_arrow.png"></image></view>
                                </view>
                            </view>
                            <view class="item" wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx"   bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                <view class="item-l">
                                    <label class="checkbox"  catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                        <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                        <view wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                    </label>
                                    <view class="img">
                                        <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                    </view>
                                    <view class="name-spec">
                                        <view class="name">{{goodsItem.skuName}}</view>
                                        <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                        <view class="goodsPlueico">
                                            <view class='goodsPlueico-price' >
                                                <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}}</text>
                                                <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                            </view>
                                            <view class="quantity-handle">
                                                <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="false" catchtap="updateUserCart" mode='widthFix' />
                                                <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}"  data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="true" catchtap="updateUserCart" mode='widthFix' />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--           2   秒杀-->
                        <view class="goods-list"  wx:if="{{item.groupType=='1'&&item.promotionInfo.promotionType=='2'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">秒杀</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt" bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text">继续选购</view>
                                    <view class="goods-list-rt-icon"><image src="/assets/images/right_arrow.png"></image></view>
                                </view>
                            </view>
                            <view class="item"  wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                <view class="item-l">
                                    <label class="checkbox"  catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                        <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                        <view  wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                    </label>
                                    <view class="img">
                                        <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                    </view>
                                    <view class="name-spec">
                                        <view class="name" >{{goodsItem.skuName}}</view>
                                        <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                        <view class="goodsPlueico">
                                            <view class='goodsPlueico-price'>
                                                <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                            </view>
                                            <view class="quantity-handle">
                                                <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}"  data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="false" catchtap="updateUserCart" mode='widthFix' />
                                                <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}"  data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="true" catchtap="updateUserCart" mode='widthFix' />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--    3  阶梯满减-->
                        <view class="goods-list"  wx:if="{{item.groupType=='1'&&item.promotionInfo.promotionType=='3'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">阶梯满减</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt"  bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text"> 继续选购</view>
                                    <view class="goods-list-rt-icon"><image src="/assets/images/right_arrow.png"></image></view>
                                </view>
                            </view>
                            <view class="item"  wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                <view class="item-l">
                                    <label class="checkbox"  catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                        <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                        <view  wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                    </label>
                                    <view class="img" >
                                        <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                    </view>
                                    <view class="name-spec">
                                        <view class="name">{{goodsItem.skuName}}</view>
                                        <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                        <view class="goodsPlueico">
                                            <view class='goodsPlueico-price'>
                                                <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                            </view>
                                            <view class="quantity-handle">
                                                <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}"  data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="false" catchtap="updateUserCart" mode='widthFix' />
                                                <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}"  data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="true" catchtap="updateUserCart" mode='widthFix' />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view >
                        <!--   4   m元n件-->
                        <view class="goods-list"  wx:if="{{item.groupType=='1'&&item.promotionInfo.promotionType=='4'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">m元n件</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt"  bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text"> 继续选购</view>
                                    <view class="goods-list-rt-icon"><image src="/assets/images/right_arrow.png"></image></view>
                                </view>
                            </view>
                            <view class="item"  wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                <view class="item-l">
                                    <label class="checkbox"   catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                        <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                        <view  wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                    </label>
                                    <view class="img">
                                        <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                    </view>
                                    <view class="name-spec">
                                        <view class="name" >{{goodsItem.skuName}}</view>
                                        <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                        <view class="goodsPlueico">
                                            <view class='goodsPlueico-price'>
                                                <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                            </view>
                                            <view class="quantity-handle">
                                                <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}"  data-skuId="{{goodsItem.skuId}}" data-type="false" catchtap="updateUserCart" mode='widthFix' />
                                                <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}"  data-skuId="{{goodsItem.skuId}}"  data-type="true" catchtap="updateUserCart" mode='widthFix' />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--  5   满赠-->
                        <view class="goods-list"  wx:if="{{item.groupType=='1'&&item.promotionInfo.promotionType=='5'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">满赠</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt"  bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text"> 继续选购</view>
                                    <view class="goods-list-rt-icon"><image src="/assets/images/right_arrow.png"></image></view>
                                </view>
                            </view>
                            <!--                  满赠的赠品-->
                            <view wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx">
                                <view class="item"  wx:for="{{goodsItem.giftInfoList}}" wx:key="gifcKey" wx:for-item="gifgoodsItem" wx:for-index="gifgoodsidx" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                    <view style="100%">
                                        <view class="item-l">
                                            <label class="checkbox-zp">
                                            </label>
                                            <view class="img">
                                                <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                            </view>
                                            <view class="name-spec">
                                                <view class="name" >{{goodsItem.skuName}}</view>
                                                <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                                <view class="goodsPlueico">
                                                    <view class='goodsPlueico-price'>
                                                        <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                        <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                                    </view>
                                                    <view class="goods-zenpin-manzeng">赠品</view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view class="item" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                    <view class="item-l">
                                        <label class="checkbox"  catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                            <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                            <view  wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                        </label>
                                        <view class="img">
                                            <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                        </view>
                                        <view class="name-spec">
                                            <view class="name">{{goodsItem.skuName}}</view>
                                            <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                            <view class="goodsPlueico">
                                                <view class='goodsPlueico-price'>
                                                    <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                    <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                                </view>
                                                <view class="quantity-handle">
                                                    <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="false"  data-skuId="{{goodsItem.skuId}}"  catchtap="updateUserCart" mode='widthFix' />
                                                    <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                    <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="true"  data-skuId="{{goodsItem.skuId}}"  catchtap="updateUserCart" mode='widthFix' />
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--              6买一赠一商品 -->
                        <view class="goods-list"  wx:if="{{item.groupType=='1'&&item.promotionInfo.promotionType=='6'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">满一赠一</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt"  bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text"> 继续选购</view>
                                    <view class="goods-list-rt-icon"><image src="/assets/images/right_arrow.png"></image></view>
                                </view>
                            </view>
                            <view  wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx" >
                                <view class="item" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                    <view class="item-l">
                                        <label class="checkbox"  catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                            <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                            <view  wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                        </label>
                                        <view class="img">
                                            <image src="{{goodsItem.skuImage}}" mode='widthFix'/>
                                        </view>
                                        <view class="name-spec">
                                            <view class="name">{{goodsItem.skuName}}</view>
                                            <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                            <view class="goodsPlueico">
                                                <view class='goodsPlueico-price'>
                                                    <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                    <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                                </view>
                                                <view class="quantity-handle">
                                                    <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="false"  data-skuId="{{goodsItem.skuId}}" catchtap="updateUserCart" mode='widthFix' />
                                                    <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                    <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="true"  data-skuId="{{goodsItem.skuId}}"  catchtap="updateUserCart" mode='widthFix' />
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <!-- 买已赠一的赠品-->
                                <view class="item"  wx:for="{{goodsItem.giftInfoList}}" wx:key="gifcKey" wx:for-item="gifgoodsItem" wx:for-index="gifgoodsidx" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                    <view style="100%">
                                        <view class="item-l">
                                            <label class="checkbox-zp">
                                            </label>
                                            <view class="img">
                                                <image src="{{goodsItem.skuImage}}" mode='widthFix'/>
                                            </view>
                                            <view class="name-spec">
                                                <view class="name">{{goodsItem.skuName}}</view>
                                                <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                                <view class="goodsPlueico">
                                                    <view class='goodsPlueico-price'>
                                                        <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                        <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                                    </view>
                                                    <view class="goods-zenpin-manzeng">赠品</view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!--  6 失效商品 -->
                    <view wx:for="{{invalidSkuList}}" wx:key="cKey"  wx:for-item="item" wx:for-index="outIndex">
                        <view class="goods-list">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityNamesx">失效商品</view>
                                </view>
                            </view>
                            <view class="item"  wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx" bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                <view class="item-l">
                                    <label class="checkbox checkboxxj">
                                        <text class="xjtext">已下架</text>
                                    </label>
                                    <view class="img">
                                        <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                    </view>
                                    <view class="name-spec">
                                        <view class="name" >{{goodsItem.skuName}}</view>
                                        <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                        <view class="goodsPlueico">
                                            <view class='goodsPlueico-price'>
                                                <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}} </text>
                                                <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                            </view>
                                            <view class="quantity-handle" catchtap="deleteOutdated" data-current="{{goodsItem}}">
                                                <view class="quantity-handle-delete">删除</view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </scroll-view>
        </view>
    </view>
  </view>
  <view class="mask {{isIpx?'is-ipx':''}} {{showCart?'show':''}}" bindtap='showCartDialog'></view>

2，wxss

/*新购物车样式*/
.miniCart-wrap {
  position: fixed;
  bottom: 0;
   100%;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1rpx solid #eee;
  z-index: 10;
}

.miniCart-main {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 100rpx;
}

.miniCart-main-l .cart-icon {
  position: absolute;
  bottom: 0rpx;
  left: 10rpx;
   130rpx;
  z-index: 200;
}

.miniCart-main-l .cart-icon .num {
  position: absolute;
  top: 47%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #e2231a;
  font-size: 24rpx;
  font-weight: bold;
}

.miniCart-main-l .cart-info {
  padding-left: 160rpx;
  margin-top: 19rpx;
}

.miniCart-main-l .cart-info .total {
  font-size: 28rpx;
  color: #333;
}

.miniCart-main-l .cart-info .price {
  font-size: 26rpx;
  font-weight: bold;
  display: flex;
}

.goodsPlueico-price {
  display: flex;
  align-items: center;
}

.miniCart-main-l .cart-info .freight {
  font-size: 22rpx;
  color: #999;
}

.miniCart-main-r {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.red-btn {
  height: 68rpx;
  line-height: 68rpx;
  padding: 0 20rpx;
  font-size: 30rpx;
  border-radius: 34rpx;
}

.line1-1 {
  font-size: 24rpx;
  text-align: center;
  color: #E2231A;
  background: #FCE9E8;
  margin-right: 10rpx;
  padding-right: 11rpx;
  padding-left: 8rpx;
  display: inline-block;
}

.gray-btn {
  background: #BFBFBF;
  color: #ffffff;
  padding: 0rpx 20rpx;
  font-size: 30rpx;
  border-radius: 34rpx;
  border: 1rpx solid #BFBFBF;
}

.miniCart-dialog {
  position: fixed;
  bottom: -1000rpx;
   100%;
  background: #fff;
  z-index: 3;
  transition: 0.3s all ease;
  padding-bottom: 30rpx;
  opacity: 0;
  visibility: hidden;
}

.miniCart-dialog.show {
  bottom: 100rpx;
  opacity: 1;
  visibility: visible;
}

.miniCart-dialog.show.is-ipx {
  bottom: 150rpx;
}

.miniCart-dialog .title {
  color: #333;
  padding: 20rpx;
}

.miniCart-dialog .content {
  min-height: 200rpx;
  max-height: 700rpx;
  text-align: center;
}

.GIcon {
  height: 150rpx;
   150rpx;
  margin: 0 auto;
  margin-top: 18rpx;
}

.miniCart-dialog .content text {
  display: block;
   100%;
  text-align: center;
  color: #cacaca;
  font-size: inherit;
  margin-top: 10rpx;
}

.goods-list {
  padding-left: 30rpx;
}

.goods-list .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx 20rpx 0;
}

.goods-list .item:last-child {
  border-bottom: 0 none;
}

.goods-list .item .item-l {
  display: flex;
   100%;
}

.goods-list .item .item-l .img {
  display: flex;
  align-items: center;
  overflow: hidden;
   162rpx;
  height: 162rpx;
  border: 1rpx solid #eee;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.goods-list .item .item-l .name {
  color: #333333;
  font-size: 30rpx;
  font-family: SimHei;
  text-align: left;
}

.goods-list .item .item-r {
  display: flex;
  align-items: center;
}

.quantity-handle {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}

.quantity-handle .icon {
   35rpx;
}

.quantity-handle .num {
   65rpx;
  text-align: center;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
   100%;
  height: calc(100% - 100rpx);
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
  transition: 0.3s all ease;
  visibility: hidden;
  opacity: 0;
}

.mask.is-ipx {
  height: calc(100% - 150rpx);
}

.mask.show {
  visibility: visible;
  opacity: 1;
}

.loadingJH {
   50rpx;
  height: 50rpx;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50%;
  margin-left: -25rpx;
}

.goods-list-head {
  display: flex;
  padding: 18rpx 0rpx 17rpx 0rpx;
  border-bottom: 1rpx dashed #E5E5E5;
  border-top: 1rpx solid #E5E5E5;
  margin-right: 20rpx;
}

.goods-list-headxj {
  display: flex;
  padding: 18rpx 0rpx 0rpx 0rpx;
  border-top: 1rpx solid #E5E5E5;
  margin-right: 20rpx;
}

.activityName {
  background: #E2231A;
  padding: 2rpx 8rpx;
  color: #ffffff;
  font-size: 24rpx;
  margin-right: 10rpx;
  display: inline-block;
}

.activityNamesx {
  color: #333;
  font-size: 30rpx;
  margin-right: 10rpx;
  display: inline-block;
  font-weight: 700;
}

.goods-list-head-lf {
  flex: 1;
  display: flex;
  align-items: center;
}

.goods-list-rt-icon {
   12rpx;
  height: 22rpx;
  margin-left: 10rpx;
}

.goods-list-rt-icon image {
   12rpx;
  height: 22rpx;
}

.goods-list-rt-text {
  color: #E2231A;
  font-size: 24rpx;
}

.goods-list-head-lf-text {
  color: #333333;
  font-size: 24rpx;
  font-family: SimHei;
}

.goods-list {
  padding-left: 20rpx;
}

.goods-list-head-rt {
  display: flex;
  align-items: center;
}

.goods-list .item .item-l .checkbox {
  margin-top: 65rpx;
}

.goodsPlueico {
  display: flex;
  margin-top: 19rpx;
  justify-content: space-between;
}

.name-spec {
  flex: 1;
  text-align: left;
}

.shop-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
   100%;
}

.shop-cart-lf {
  display: flex;
  align-items: center;
}

.shop-cart-rt {
  display: flex;
  align-items: center;
}

.shop-cart-lf-text {
  color: #333333;
  font-size: 24rpx;
}

.shop-cart-rt-text {
  color: #666666;
  font-size: 24rpx;
  margin-left: 13rpx;
}

.shop-cart-rt-img image {
   24rpx;
  height: 30rpx;
}

.quantity-handle-delete {
  padding: 5rpx 20rpx;
  border: 1rpx solid #E2231A;
  color: #E2231A;
  font-size: 24rpx;
  border-radius: 22px;
}

.xjtext {
  font-size: 24rpx !important;
  color: #666666 !important;
}

.checkboxxj {
   22rpx;
  margin-right: 10rpx;
  margin-top: 36rpx !important;
}

.miniCart-dialog .content .goodsPlueicoquo {
  font-size: 20rpx;
  color: #E2231A;
}

.miniCart-dialog .content .goodspricered {
  font-size: 24rpx;
  color: #E2231A;
  font-weight: 700;
}

.shop-namenew {
  background: #fdf0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 20rpx;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
}

.goods-list .item .item-l .spec {
  color: #666666;
  font-size: 20rpx;
  margin-top: 10rpx;
  background: #FCE9E8;
  padding: 5rpx 9rpx;
  display: inline-block;
  font-family: SimHei;
}

.checkbox-zp {
   49rpx;
}

.miniCart-dialog .content .goods-count-text {
  font-size: 20rpx;
  margin-left: 20rpx;
  color: #999999;
}

.goods-zenpin-manzeng {
  font-size: 24rpx;
  color: #333333;
}

3,js

 //加入购物车 接口 新版
    async addCart(e) {
        let storeId = this.data.storeId;
        let skuId =  e.currentTarget.dataset.skuid;
        try {
           
           //相关接口调用

        } catch (error) { //出错了
        }
    },        

注：
1，wxml相关代码是根据购物车商品不同类型进行分类的，如果商品类型只有一种，可以直接使用下面的代码

2，wxss可能有冗余代码

3，因为wxml中图片暂未提供，和相关方法js中未全部列举，直接使用上面的代码可能会报错，需要自己整理

4，实现后效果如下图

1，商品只有一种类型的购物车wxml代码

<!-- 购物车-->
<view class="miniCart-wrap {{isIpx?'is-ipx':''}}">
    <view class="miniCart-main">
        <view class="miniCart-main-l">
            <view class="cart-icon" bindtap='showCartDialog' hover-class='none'>
                <image src="" mode='widthFix' />
<!--                购物车数量count-->
                <text class="num">{{count}}</text>
            </view>
            <view class="cart-info">
                <view class="total">
                    总计：
                    <text class="price">￥{{cartShopPrice||'0'}}</text>
                </view>
                <view class="freight">已减 ￥{{cartShopReducePrice||'0'}} </view>
            </view>
        </view>
        <view class="miniCart-main-r">
            <view bindtap='submit' class="red-btn red-btn-l">
                去结算
            </view>
        </view>
        <view class="miniCart-dialog {{isIpx?'is-ipx':''}} {{showCart?'show':''}}">
            <view class='showJH' wx:if="{{showJH}}">
                <image class="loadingJH" src="/assets/images/loading.gif" mode='widthFix' />
            </view>
            <view class="shop-namenew" wx:if="{{cartItems.length>0}}">
                <view class="shop-cart-head">
                    <view class="shop-cart-lf" bindtap="changeGoodsAllstatus">
                        <view>
                            <checkbox-group bindchange="shopCheckbox" data-store="{{item.storeSn}}" data-shopidx="{{shopidx}}">
                                <label class="checkbox">
                                    <view wx:if="{{goodsAllstatus}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                    <view  wx:if="{{!goodsAllstatus}}"  class="goods-coin-boxDf"></view>
                                </label>
                            </checkbox-group>
                        </view>
                        <view class="shop-cart-lf-text">全选 <text style="color: #666;font-size:22rpx">（已选{{count||'0'}}件）</text></view>
                    </view>
                    <view class="shop-cart-rt" bindtap="deleteUserCart">
                        <view class="shop-cart-rt-img"><image src="" bindtap="clearTheShop"/></view>
                        <view class="shop-cart-rt-text"></view>
                    </view>
                </view>
            </view>
            <scroll-view class="content" scroll-y wx:if="{{cartItems.length==0}}">
                <text>购物车里是空的</text>
            </scroll-view>

            <!--            购物车内容-->
            <scroll-view class="content" scroll-y  wx:if="{{cartItems.length>0}}">
                <block >
                    <view class="shop-item" wx:for="{{cartItems}}" wx:key="cKey"  wx:for-item="item" wx:for-index="outIndex">
                        <!--             无促销类型-->
                        <view class="goods-list"  wx:if="{{item.groupType!='1'}}">
                            <view class="goods-list-head">
                                <view class="goods-list-head-lf">
                                    <view class="activityName">满减</view>
                                    <view class="goods-list-head-lf-text">{{item.fullPromotionDesc}}</view>
                                </view>
                                <view  class="goods-list-head-rt" bindtap="topSeckill" data-promoType="{{item.promotionInfo.promoSubType}}" data-promotionId="{{item.promotionInfo.promotionId}}">
                                    <view class="goods-list-rt-text"> 继续选购</view>
                                    <view class="goods-list-rt-icon"><image src=""></image></view>
                                </view>
                            </view>
                            <view class="item" wx:for="{{item.singlePromoInfoList}}" wx:key="cKey" wx:for-item="goodsItem" wx:for-index="goodsidx"   bindtap="toGoods" data-goodsSn="{{goodsItem.goodsSn}}" data-storeSn="{{stroreInfo.storeSn}}" data-storeId="{{stroreInfo.storeId}}" data-skuId="{{goodsItem.skuId}}">
                                <view class="item-l">
                                    <label class="checkbox"  catchtap="changeGoodstatus" data-item="{{goodsItem}}" data-outIndex="{{outIndex}}" data-index="{{goodsidx}}">
                                        <view wx:if="{{goodsItem.status=='1'}}" class="goods--coin-icon"><image src="/assets/images/icon_detail-check.png"></image></view>
                                        <view wx:if="{{goodsItem.status=='0'}}"  class="goods-coin-boxDf"></view>
                                    </label>
                                    <view class="img">
                                        <image src="{{goodsItem.skuImage}}" mode='widthFix' />
                                    </view>
                                    <view class="name-spec">
                                        <view class="name">{{goodsItem.skuName}}</view>
                                        <view class="spec">{{goodsItem.saleSpecDesc}}</view>
                                        <view class="goodsPlueico">
                                            <view class='goodsPlueico-price' >
                                                <text class="goodsPlueicoquo">￥</text> <text class="goodspricered">{{goodsItem.basePrice}}</text>
                                                <text class="goods-count-text">×{{goodsItem.purchaseQuantities}}</text>
                                            </view>
                                            <view class="quantity-handle">
                                                <image class="icon" src="/assets/images/icon_minus.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}" data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="false" catchtap="updateUserCart" mode='widthFix' />
                                                <view class="quantity-num" catchtap="return">{{goodsItem.purchaseQuantities}}</view>
                                                <image class="icon" src="/assets/images/icon_shop_add.png" data-ident="{{goodsItem.id}}" data-num="{{goodsItem.purchaseQuantities}}"  data-skuId="{{goodsItem.skuId}}"  data-status="{{goodsItem.status}}" data-store="{{goodsItem.saleNum}}" data-type="true" catchtap="updateUserCart" mode='widthFix' />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </scroll-view>
        </view>
    </view>
</view>
<view class="mask {{isIpx?'is-ipx':''}} {{showCart?'show':''}}" bindtap='showCartDialog'></view>

完整js

var Util = require('../../utils/util.js')
const Map = require('../../utils/map.js');
const { regeneratorRuntime } = global
const app = getApp()
Page({
    data: {
        checkedSkuNumber:0,
        showCart:false,
        showJH: false,
        showTop: false,
        isIpx: app.globalData.isIpx ? true : false,
        goodsAllstatus:true,
        cartItems:[],
    },
    onLoad: function (options) {
        this.setData({
            storeId:options.storeId,
        });
        this.getCart();
        if(options.showCart=='true'){
            this.setData({
                showCart:true
            })
        }else{
            this.setData({
                showCart:false
            })
        }

    },
    

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
     
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
      
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
    
    //购物车继续选购, 新版
    async topSeckill(e) {
        let storeId = this.data.storeId;
        let promoId = e.currentTarget.dataset.promotionid;
        let promotype = e.currentTarget.dataset.promotype;
        wx.navigateTo({url: '/pages/cuxiao/cuxiao?storeId=' + storeId + '&promoId=' + promoId});
     
    },
    //购物车全选,反选
    async changeGoodsAllstatus() {
    },

    //购物车选中,反选
    async changeGoodstatus(e) {
      
    },
    //获取购物车数据 初始 新版
    async getCart() {
        try {
            let that = this;
            let storeSn = that.data.storeSn;
            let params = {
                storeId:that.data.storeId
            }
            // 全局方法
            let result = await Util.getCartNew(params);
            that.setData({
                cartItems: result.data.cart,
            })
            
        } catch (error) {
        }
    },
    //加入购物车 接口 新版
    async addCart(e) {
      
    },
   
    //修改购物车商品数量 接口 新版
    async updateUserCart(e) {
     
    },
    
    async deleteUserCart() {
        
    },
   
    submit(e) {
        wx.navigateTo({ url: '/pages/jiesuanye/jiesuanye'});
    },
    showCartDialog(e) {
        var that = this
        if (Util.checkLogin()){
            this.getCart();
        }else{
            wx.showToast({
                title: '未登录无法查看，请先登录后查看',
                icon: 'none',
                duration: 2000,
                mask: true
            });
            return
        }
        this.setData({
            showCart: !that.data.showCart,
        })
    },
    toGoods(e){
        let storeId = this.data.storeId;
        let skuId = e.currentTarget.dataset.skuid;
        wx.navigateTo({ url: '/pages/goods/goods?storeId='+storeId+'&skuId='+skuId});
    },
})

如果有遗漏wxss和相关js方法自行补充

效果图如下