feat：购物车改造

pages/shopping_cart/shopping_cart.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <view :calss="[
+    <view :class="[
       isDataNull ? 'isDataNull-calss' : 'isDataNull-active',
       platformType ? '' : 'iosplatformType',
     ]" class="shopping_cart_warp">
@@ -440,28 +440,31 @@ export default {
 <style lang="scss" scoped>
 .shopping_cart_warp {
   background-color: $app-bj;
-  padding: 104rpx 30rpx 30rpx;
+  padding: 104rpx 30rpx 0;
   overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
-  &.isDataNull-calss {
-    height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
-  }
+  // &.isDataNull-calss {
+  //   height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
+  // }
 
-  &.isDataNull-active {
-    height: calc(100vh - 100rpx - env(safe-area-inset-bottom) - 100rpx);
-  }
+  // &.isDataNull-active {
+  //   height: calc(100vh - 100rpx - env(safe-area-inset-bottom) - 100rpx);
+  // }
 
-  &.iosplatformType {
-    height: calc(100vh - 100rpx - 50rpx) !important;
+  // &.iosplatformType {
+  //   height: calc(100vh - 100rpx - 50rpx) !important;
 
-    .shopping_cart_content {
-      height: calc(100vh - 104rpx - 30rpx - 30rpx - 100rpx - 10rpx) !important;
-    }
+  //   .shopping_cart_content {
+  //     height: calc(100vh - 104rpx - 30rpx - 30rpx - 100rpx - 10rpx) !important;
+  //   }
 
-    .shopping_cart_but {
-      bottom: 90rpx !important;
-    }
-  }
+  //   .shopping_cart_but {
+  //     bottom: 90rpx !important;
+  //   }
+  // }
 }
 
 .shopping_cart_header {
@@ -482,8 +485,9 @@ export default {
 
 .shopping_cart_content {
   margin-top: 30rpx;
-  height: calc(100vh - 104rpx - 30rpx - 30rpx - 100rpx - env(safe-area-inset-bottom) - 10rpx);
+  flex: 1;
   overflow-y: auto;
+  padding-bottom: calc(240rpx + env(safe-area-inset-bottom));
 
   .shopping_cart_content_item {
     background-color: #ffffff;
@@ -543,16 +547,34 @@ export default {
 
 .shopping_cart_but {
   position: fixed;
-  bottom: calc(90rpx + env(safe-area-inset-bottom));
   left: 0;
-  width: calc(100% - 40rpx);
+  right: 0;
+  width: 100%;
+  box-sizing: border-box;
   background: #ffffff;
   box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
-  height: 84rpx;
+  height: 119rpx;
   display: flex;
   justify-content: space-between;
-  padding: 20rpx 20rpx 15rpx;
+  padding: 20rpx 30rpx 15rpx;
   align-items: center;
+  z-index: 99;
+
+  /* #ifdef H5 */
+  bottom: var(--window-bottom);
+  /* #endif */
+
+  /* #ifdef MP-WEIXIN */
+  bottom: 0;
+  /* #endif */
+
+  /* #ifdef APP-PLUS */
+  bottom: calc(100rpx + env(safe-area-inset-bottom));
+  /* #endif */
+
+  /* #ifndef H5 || MP-WEIXIN || APP-PLUS */
+  bottom: 0;
+  /* #endif */
 
   .shopping_cart_but_total {
     font-weight: bold;
@@ -570,4 +592,12 @@ export default {
     width: 226rpx;
   }
 }
+
+.iosplatformType {
+  .shopping_cart_but {
+    /* #ifdef APP-PLUS */
+    bottom: 100rpx;
+    /* #endif */
+  }
+}
 </style>