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="width: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="width: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;
width: 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;
width: 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;
width: 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;
width: 150rpx;
margin: 0 auto;
margin-top: 18rpx;
}
.miniCart-dialog .content text {
display: block;
width: 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;
width: 100%;
}
.goods-list .item .item-l .img {
display: flex;
align-items: center;
overflow: hidden;
width: 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 {
width: 35rpx;
}
.quantity-handle .num {
width: 65rpx;
text-align: center;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 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 {
width: 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 {
width: 12rpx;
height: 22rpx;
margin-left: 10rpx;
}
.goods-list-rt-icon image {
width: 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;
width: 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 {
width: 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 {
width: 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 {
width: 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方法自行补充
效果图如下