微信小程序购物车实现

其他 2019-10-08 14:30:32 阅读次数: 0

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方法自行补充

效果图如下

猜你喜欢

转载自www.cnblogs.com/shuihanxiao/p/11635132.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022