购物车清空失效贝贝

src/component/scrollDel/scrollDel.wxml

@@ -16,7 +16,7 @@
         <!-- bindtap="bindTapItem" data-id="{{item.id}}" -->
         <!-- productStatus 0未发布1下架2上架3删除  -->
         <view class="pro-info" bindtap="bindTapItem" data-id="{{item.productId}}" 
-        style='border-bottom:{{index == (cartList.length -1) ? "none" : "1rpx solid #eeeeee" }};opacity:{{(item.productStatus == 1 || item.productStatus == 1 || item.productStatus == 3) ? 0.2 : 1}};'>
+        style='border-bottom:{{index == (cartList.length -1) ? "none" : "1rpx solid #eeeeee" }};opacity:{{(item.productStatus == 0 || item.productStatus == 1 || item.productStatus == 3) ? 0.2 : 1}};'>
         
            <image class="pro-img" src="{{item.skuImgUrl}}" 
            wx:if="{{!utils.isVideo(item.skuImgUrl)}}"

src/pages/cart/cart.js

@@ -18,6 +18,7 @@ wxService.page({
     checkAll: false,
     checkedColor: 'rgb(203, 60, 60)',
     shopCartTotalFee: 0, // 商品总价
+    invalidCarts : []
   },
 
   /**
@@ -47,6 +48,7 @@ wxService.page({
     
     this.setData({
       checkAll : false,
+      shopCartTotalFee : 0,
     });
     
     this.init()
@@ -70,14 +72,25 @@ wxService.page({
       if (res) {
         const { result, data } = res.data
         if (result == 0) {
-          wx.hideLoading()
+          wx.hideLoading();
+          let list = data.skuVOList ? data.skuVOList : [];
           // item.checked
-          data && data.skuVOList.forEach(item=>{
+          //这里进行区分已经失效和未失效
+          // productStatus 0未发布1下架2上架3删除 
+          let invalidCarts = [], validateCarts = [];
+          list.forEach(item=>{
             item.checked = false;
-            // item.productStatus = 1;
-          })
+            if(item.productStatus == 2){
+              validateCarts.push(item);
+            }
+            else{
+              invalidCarts.push(item);
+            }
+          });
+
           this.setData({
-            cartList: data && data.skuVOList || []
+            cartList: validateCarts,
+            invalidCarts : invalidCarts,
           })
         }
       }
@@ -400,6 +413,62 @@ wxService.page({
   delItemChange(e) {
     this.deletePro(e.detail)
   },
+  //失效商品话滑动删除
+  delInvalidItemChange(e){
+    const {index, skuid} = e.detail;
+    var self = this
+    wx.showModal({
+      title: '提示',
+      content: '确认删除购物车中该商品？',
+      success(res) {
+        if (res.confirm) {
+          var invalidCarts = self.data.invalidCarts
+          invalidCarts = invalidCarts.filter((item, i) => {
+            return i !== index
+          })
+          self.setData({
+            invalidCarts: invalidCarts
+          })
+          self.editDelOk(skuid) //调用完成 
+        } 
+      }
+    })
+  },
+  //清空失效商品
+  onTapEmptyInvlidCarts(){
+    let self = this;
+    wx.showModal({
+      title: '提示',
+      content: '确认清空购物车中已失效的商品？',
+      success(res) {
+        if (res.confirm) {
+          wx.showLoading('清除中...');
+          let promiseArr = [];
+          self.data.invalidCarts.forEach(item =>  {
+            let skuId = item.skuId;
+            let tempPromise = wxService.post(`/sale/trolley/remove?skuId=${skuId}`);
+            promiseArr.push(tempPromise);
+          });
+
+          Promise.all(promiseArr).then(promiseArr => {
+            wx.hideLoading();
+            wx.showToast({
+              title: '清除成功',
+            });
+            self.setData({
+              invalidCarts : [],
+            });
+          }).catch(err => {
+            wx.hideLoading();
+            wx.showToast({
+              title: '清除失败，请稍后再试',
+              icon : 'none'
+            });
+          })
+        }
+      }
+    });
+  },
   //删除商品
   deletePro(e) {
     const {index, skuid} = e

src/pages/cart/cart.wxml

 <!--pages/cart/cart.wxml-->
-<view class="page-cart" style="padding-bottom:{{currentHeight + 88}}px">
+<view class="page-cart" style="padding-bottom:{{currentHeight}}px">
 	<view class="cart-content" wx:if="{{cartList.length}}">
 		<!-- 购物车列表 -->
 		<scroll-del
@@ -13,6 +13,19 @@
 		/>
 	</view>
 
+	<!-- 失效的宝贝 -->
+	<view class="invalid-products" wx:if="{{invalidCarts.length > 0}}">
+		<view class="invalid-title">
+			<label>失效的宝贝</label>
+			<text class="theme-text-color" bindtap="onTapEmptyInvlidCarts">清空</text>
+		</view>
+
+		<scroll-del
+		 cartList="{{invalidCarts}}" 
+		 bind:delItemChange="delInvalidItemChange"
+		/>
+
+	</view>
 
   <!-- 空状态时 -->
 	<view class="empty" wx-if="{{cartList !== null && cartList.length == 0}}">

src/pages/cart/cart.wxss

@@ -208,10 +208,35 @@ page{
   align-items: center;
 }
 .all{
-  margin-left: 24rpx;
+  margin-left: 12rpx;
   font-size: 26rpx;
   color: #333333;
 }
+
+/* 失效宝贝 */
+.invalid-products{
+  background: #ffffff;
+  padding: 20rpx 0;
+  margin-top: 20rpx;
+}
+
+.invalid-title{
+  padding: 30rpx;
+  border-bottom: solid 1rpx #eeeeee;
+  font-size: 28rpx;
+  color: #333333;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.invalid-title text{
+  padding: 6rpx 20rpx;
+}
+.invalid-title text:active{
+  opacity: 0.7;
+}
+
 .pro-price .overdue-price{
   color: #808080;
 }