lachang-wxapp/pages/tabBar/shoppingCart/shoppingCart.wxml

<wxs module="textUtil" src="../../../utils/textUtil.wxs" />
<view class="navigationBar" style='height:{{statusBarHeight}}px;'>
  <view class='flex commonHead' style='height:{{statusBarHeight}}px;'>
    <view class='commonHeadWrap flex'>
      <view class='commonHeadHome flex-c-c' bind:tap="goHome">
        <image class="icon" src="/static/icon/icon_go_home.png" mode="aspectFill"></image>
      </view>
      <view class='commonHeadTextBox flex'>
        <view class='headTitle line1'>购物车</view>
      </view>
    </view>
  </view>
</view>
<view class="editBox" wx:if="{{cartList.length > 0 && isLogOn && !isLoading}}">
  <view class="editFixed" style='top:{{statusBarHeight}}px;'>
    <view class="edit" bind:tap="changeEdit">{{isEdit?'完成':'编辑'}}</view>
  </view>
</view>
<view class="cartContainer" wx:if="{{cartList.length > 0 && isLogOn && !isLoading}}">
  <view class="cartList">
    <view class="cartItem" wx:for="{{cartList}}" wx:key="index">
      <swipe-action  operateWidth="{{48}}" id="action{{index}}" bind:click="changeTap" >
        <view slot="content" class="tui-list-item cartContent" catchtap="navigateTo" data-url="/pages/cart/pages/goodsDetail/goodsDetail?goods_id={{item.goods_id}}">
          <view class="flex-c"> 
             <!-- 编辑删除勾选 -->
            <view class="selectBox flex-c-c" wx:if="{{isEdit}}" catchtap="changeCartDelete" data-index="{{index}}">
              <image wx:if="{{item.isDelete}}" class="icon" src="/static/icon/icon_select_on.png" mode="aspectFill"></image>
              <image wx:else class="icon" src="/static/icon/icon_select_off.png" mode="aspectFill"></image>
            </view> 
            <!-- 正常结算勾选 -->
            <view class="selectBox flex-c-c" wx:else catchtap="changeCartSelect" data-index="{{index}}">
              <image wx:if="{{item.selected == 0 && item.goods.status == 10 && item.err_status == 0}}" class="icon" src="/static/icon/icon_select_off.png" mode="aspectFill"></image>
              <image wx:if="{{item.selected == 1 && item.goods.status == 10 && item.err_status == 0}}" class="icon" src="/static/icon/icon_select_on.png" mode="aspectFill"></image>
              <image wx:if="{{item.goods.status == 20 || item.err_status == 1 || item.err_status == 2}}" class="icon" src="/static/icon/icon_select_invalid.png" mode="aspectFill"></image>
            </view> 
            <view class="cartInfoBox flex">
              <view class="cartImgBox">
                <image class="image" src="{{item.goods.goods_image+textUtil.imageSmall()}}" lazy-load="{{true}}" mode="aspectFill"></image>
              </view>
              <view class="cartTextBox">
                <view class="caTop">
                  <view class="cartTitle space {{item.goods.status == 20|| item.err_status == 1 || item.err_status == 2?'inv':''}}">{{item.goods.goods_name}}</view>
                  <!-- 多规格才显示 -->
                  <view class="flex" wx:if="{{item.goods.spec_type == 20 && item.goods.status == 10}}">
                    <view class="ruleBox flex-c {{item.err_status == 1?'shi':''}}" catchtap="showRulesPopup" data-index="{{index}}">
                      <view class="rule space">{{item.goods.skuInfo.goods_props[0].value.name}}</view>
                      <image class="icon" src="/static/icon/icon_to_bot.png" mode="aspectFill"></image>
                    </view>
                  </view>
                </view>
                <view class="caBot">
                  <view class="flex-c-bet" wx:if="{{item.goods.status == 10}}">
                    <view class="priceBox">
                      <text class="tag">¥</text>
                      <text class="pra">{{textUtil.priceSplit(item.goods.skuInfo.goods_price)[0]}}</text>
                      <text class="prb">.{{textUtil.priceSplit(item.goods.skuInfo.goods_price)[1]}}</text>
                    </view>
                    <view class="numberBox flex-c-c">
                      <view class="reduce flex-c" catchtap="changeCartNumber" data-state="0" data-index="{{index}}">
                        <image wx:if="{{item.goods_num>1}}" class="icon" src="/static/icon/icon_reduce.png" mode="aspectFill"></image>
                        <image wx:else class="icon" src="/static/icon/icon_no_reduce.png" mode="aspectFill"></image>
                      </view>
                      <view class="number flex-c-c">{{item.goods_num}}</view>
                      <view class="add flex-c" catchtap="changeCartNumber" data-state="1" data-index="{{index}}">
                        <image wx:if="{{item.goods_num<item.goods.stock_total}}" class="icon" src="/static/icon/icon_add.png" mode="aspectFill"></image>
                        <image wx:else class="icon" src="/static/icon/icon_no_add.png" mode="aspectFill"></image>
                      </view>
                    </view>
                  </view>
                  <view class="invalid" wx:if="{{item.goods.status == 20 || item.err_status == 2}}">商品已失效，请选择其他商品</view>
                </view>
              </view>
            </view>
          </view>
          <view class="noStock" wx:if="{{item.err_status == 1}}">库存不足</view>
        </view>
        <view class="cartDelete flex-c-c" slot="button" catchtap="cartDelete" data-index="{{index}}">
          删除
        </view>
      </swipe-action>
    </view>
  </view>
  <view class="footerContainer">
    <view class="footerBox flex-c-bet {{showDetailsPopup?'sel':''}}">
      <!-- 编辑删除全选 -->
      <view class="allSelect flex-c-c" wx:if="{{isEdit}}"  bind:tap="allDelete">
        <image wx:if="{{isAllDelete}}" class="icon" src="/static/icon/icon_select_on.png" mode="aspectFill"></image>
        <image wx:else class="icon" src="/static/icon/icon_select_off.png" mode="aspectFill"></image>
        <view>全选</view>
      </view>
      <!-- 正常结算全选 -->
      <view class="allSelect flex-c-c" wx:else bind:tap="allSelect">
        <image wx:if="{{isAllSelect && validData.length > 0}}" class="icon" src="/static/icon/icon_select_on.png" mode="aspectFill"></image>
        <image wx:if="{{!isAllSelect  && validData.length > 0}}" class="icon" src="/static/icon/icon_select_off.png" mode="aspectFill"></image>
        <image wx:if="{{validData.length <=0}}" class="icon" src="/static/icon/icon_select_invalid.png" mode="aspectFill"></image>
        <view>全选</view>
      </view>
      <view class="priceInfo flex-c">
        <!-- 编辑状态不显示 -->
        <view class="priceContent" wx:if="{{!isEdit}}">
          <view class="top flex-c-end">
            <view class="cartTotalNumber">共{{selectedCartList.length || 0}}件</view>
            <view class="total">合计</view>
            <view class="priceBox">
              <text class="tag">¥</text>
              <text class="pra">{{textUtil.priceSplit(finalPrice)[0]}}</text>
              <text class="prb" wx:if="{{textUtil.priceSplit(finalPrice)[1]}}">.{{textUtil.priceSplit(finalPrice)[1]}}</text>
            </view>
          </view>
          <view class="bot flex-c" wx:if="{{isShowDetails}}">
            <view class="gongJ">共减 ¥ {{totalReduce}}</view>
            <view class="lookDetails" bind:tap="showDetailsPopup">
              <text>查看明细</text>
              <image class="icon {{showDetailsPopup?'sel':''}}" src="/static/icon/icon_top_j.png" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <button class="settlement flex-c-c" wx:if="{{isEdit}}" bind:tap="deleteCart">删除</button>
        <button class="settlement flex-c-c" wx:else bind:tap="settlement">结算</button>
      </view>
    </view>
  </view>
</view>
<view class="emptyPage flex-column-c" wx:if="{{cartList.length  == 0 && isLogOn && !isLoading}}">
  <image class="image" src="/static/images/image_not_log.png" mode="aspectFill"></image>
  <view class="tips">您的购物车还是空的哦~</view>
  <view bind:tap="goAllGoods"class="goShop flex-c-c">去选购</view>
</view>
<view class="noLogPage flex-column-c" wx:if="{{!isLogOn}}">
  <image class="image" src="/static/images/image_not_log.png" mode="aspectFill"></image>
  <view class="tips">您还没有登录~</view>
  <button class="toLog flex-c-c" bindtap="navigateTo" data-url="/pages/tabBar/login/login">现在登录</button>
</view>

<!-- 底部购买Popup -->
<tui-bottom-popup backgroundColor="transparent" height="auto" show="{{showRulesPopup}}" bindclose="hideRulesPopup">
    <view class="buyPopup popupBox">
        <view class="closePopup" catchtap="hideRulesPopup">
            <image class="icon" src="/static/icon/icon_modal_x.png" mode="aspectFill"></image>
        </view>
        <view class="gpInfo flex-c">
            <view class="gpImgBox">
                <image mode='aspectFill' class='swiperImg' src='{{rulesSkuObj.image_url}}'></image>
            </view>
            <view class="popPriceBox flex-c">
              <view class="gpPrice">
                <text class="">¥</text>
                <text class="pr">{{textUtil.priceSplit(rulesSkuObj.goods_price)[0]}}</text>
                <text class="">.{{textUtil.priceSplit(rulesSkuObj.goods_price)[1]}}</text>
              </view>
              <!-- 划线价 -->
              <view class="linkPrice" wx:if="{{rulesSkuObj.line_price && rulesSkuObj.line_price > 0}}">
                <text>¥</text>
                <text class="pr">{{rulesSkuObj.line_price}}</text>
              </view>
            </view>
        </view>
        <view class="tips">选择规格：</view>
        <view class="normsItem flex {{ item.lack?'lack':''}}" 
              wx:for="{{rulesSkuList}}" 
              wx:key="index"
              bind:tap="changeSpec"
              data-index="{{index}}">
            <view class="text flex-c-c {{item.goods_sku_id == rulesSkuObj.goods_sku_id? 'sel':''}}">{{item.goods_props[0].value.name}}{{item.lack?'（缺货）':''}}</view>
        </view>
        <button class="bot flex-c-c" bind:tap="confirmBuyPopup">确认</button>
    </view>
</tui-bottom-popup>


<!-- 查看明细Popup -->
<tui-bottom-popup backgroundColor="transparent" height="auto" zIndex="9000" show="{{showDetailsPopup}}" bindclose="hideDetailsPopup">
    <view class="detailsPopup popupBox">
        <view class="closePopup" catchtap="hideDetailsPopup">
            <image class="icon" src="/static/icon/icon_modal_x.png" mode="aspectFill"></image>
        </view>
        <view class="popupTitle flex-c-c">金额明细</view>
         <scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;" class="lookImageList">
           <block wx:for="{{selectedCartList}}" wx:key="index">
              <image class="lookImage" src="{{item.goods.goods_image+textUtil.imageSmall()}}" mode="aspectFill"></image>
           </block>
         </scroll-view>
         <view class="lookItem flex-c-bet">
           <view class="key">商品总价</view>
           <view class="value">
             <text class="vTag">¥</text>
             <text class="pr1">{{textUtil.priceSplit(totalprice)[0]}}</text>
             <text class="pr2">.{{textUtil.priceSplit(totalprice)[1]}}</text>
           </view>
         </view>
         <view class="lookItem flex-c-bet" wx:if="{{userCouponItem}}">
           <view class="key">优惠券优惠（{{userCouponItem.name}}）</view>
           <!-- 满减券 -->
           <view class="value red" wx:if="{{userCouponItem.coupon_type == 20 || userCouponItem.coupon_type == 90 || userCouponItem.coupon_type == 100 }}">
             <text class="vTag">¥</text>
             <text class="pr1">{{textUtil.priceSplit(userCouponItem.reduced_price)[0]}}</text>
             <text class="pr2">.{{textUtil.priceSplit(userCouponItem.reduced_price)[1]}}</text>
           </view>
            <!-- 折扣券 -->
           <view class="value red discount" wx:if="{{userCouponItem.coupon_type == 50}}">
             <text class="pr1">{{userCouponItem.discount/10}}</text>
             <text class="vTag">折</text>
           </view>
         </view>
         <view class="lookItem flex-c-bet" wx:if="{{activityPrice && activityPrice>0}}">
           <view class="key">活动优惠</view>
           <view class="value red">
             <text class="vTag">-¥</text>
             <text class="pr1">{{textUtil.priceSplit(activityPrice)[0]}}</text>
             <text class="pr2">.{{textUtil.priceSplit(activityPrice)[1]}}</text>
           </view>
         </view>
         <view class="lookItem flex-c-bet">
           <view class="key">共减</view>
           <view class="value red">
             <text class="vTag">-¥</text>
             <text class="pr1">{{textUtil.priceSplit(totalReduce)[0]}}</text>
             <text class="pr2">.{{textUtil.priceSplit(totalReduce)[1]}}</text>
           </view>
         </view>
          <view class="lookItem flex-c-bet">
           <view class="key">合计</view>
           <view class="value">
             <text class="vTag">¥</text>
             <text class="pr1">{{textUtil.priceSplit(finalPrice)[0]}}</text>
             <text class="pr2">.{{textUtil.priceSplit(finalPrice)[1]}}</text>
           </view>
         </view>
    </view>
</tui-bottom-popup>

<!-- 确认删除弹窗 -->
<tui-modal show="{{showDeleteModal}}" zIndex="99999" custom padding="0rpx" width="600rpx" radius="16rpx" top="45%">
	<view class="modalCustom">
        <view class="newModalTitle space">确认删除所选商品吗？</view>
        <view class="newModalButtonBox flex-c-c">
            <view class="mButton border flex-c-c" bind:tap="hideDeleteModal">取消</view>
            <view class="mButton flex-c-c" bind:tap="confirmDelete">确定</view>
        </view>
	</view>
</tui-modal>

<!-- 库存不足 -->
<tui-modal show="{{showStockUnModal}}" zIndex="99999" custom padding="0rpx" width="600rpx" radius="16rpx" top="45%">
	<view class="modalCustom">
        <view class="newModalTitle space">赠品库存不足</view>
        <view class="newModalButtonBox flex-c-c">
            <view class="mButton border flex-c-c" bind:tap="hideDeleteModal">等待补货</view>
            <view class="mButton flex-c-c" bind:tap="confirmDelete">继续购买</view>
        </view>
	</view>
</tui-modal>