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方法自行补充
效果图如下
