购物车分离优化体验

components/popup/popup.vue

@@ -89,7 +89,7 @@
         transform: translateY(-100%);
     }
     .popup-bottom {
-        bottom: 0;
+        bottom: var(--window-bottom);
         width: 100vw;
         transform: translateY(100%);
     }

pages/cart-page/cart-page.vue

+<template>
+    <view>
+        <!-- 购物车 -->
+        <component-cart ref="cart"></component-cart>
+
+        <!-- 快捷导航 -->
+        <component-quick-nav :propIsBar="true"></component-quick-nav>
+    </view>
+</template>
+<script>
+    const app = getApp();
+    import componentQuickNav from "../../components/quick-nav/quick-nav";
+    import componentCart from "../../components/cart/cart";
+    export default {
+        data() {
+            return {};
+        },
+        components: {
+            componentQuickNav,
+            componentCart
+        },
+
+        onShow() {
+            // 数据加载
+            if((this.$refs.cart || null) != null) {
+                this.$refs.cart.init();
+            }
+        },
+
+        // 下拉刷新
+        onPullDownRefresh() {
+            this.$refs.cart.init();
+        },
+
+        methods: {}
+    };
+</script>
+<style>
+</style>
\ No newline at end of file

pages/cart/cart.css

-/**
-* 商品列表
-*/
-.page {
-    padding-bottom: 100rpx;
-}
-.goods-title {
-    line-height: 44rpx;
-    min-height: 86rpx;
-}
-.goods-image {
-    width: 155rpx;
-    height: 155rpx;
-    margin-right: 20rpx;
-}
-.goods-base {
-    margin-left: 175rpx;
-}
-.goods-item .items {
-    padding-left: 80rpx;
-}
-.goods-item .selected {
-    margin-top: 60rpx;
-}
-
-/**
- * 错误提示
- */
-.goods-item .error-msg {
-    left: 96rpx;
-    top: 78rpx;
-    width: 160rpx;
-}
-.goods-item .error-msg text {
-    padding: 2rpx 10rpx;
-    box-shadow: 0 2px 10px rgb(181 181 181 / 95%);
-}
-
-/**
- * 底部
- */
-.goods-item .goods-bottom {
-    height: 58rpx;
-}
-
-/**
-* 数量操作
-*/
-.number-content {
-    right: 0;
-    top: 0;
-}
-.number-content .number-submit {
-    width: 60rpx;
-    font-weight: bold;
-}
-.number-content input {
-    width: 30px;
-    border-width: 0 1px;
-    border-style: solid;
-    border-color: #efefef;
-}
-.number-content .number-submit,
-.number-content input {
-    padding: 0;
-    height: 50rpx;
-    line-height: 50rpx;
-}
-
-/**
-* 空购物车
-*/
-.no-data-box {
-    padding: 30% 0 0 0;
-}
-.no-data-box image {
-    width: 160rpx;
-}
-
-/**
-* 操作导航
-*/
-.buy-nav {
-    position: fixed;
-    z-index: 2;
-    left: 0;
-    bottom: 0;
-    /* #ifdef H5 || APP */
-    bottom: var(--window-bottom);
-    /* #endif */
-}
-.buy-nav,
-.nav-base {
-    height: 100rpx;
-    line-height: 100rpx;
-}
-.nav-submit button {
-    height: 72rpx;
-    line-height: 72rpx;
-}
-.nav-base {
-    width: calc(75% - 20rpx);
-}
-.nav-submit {
-    width: calc(25% - 40rpx);
-}
-.nav-submit button {
-    border-radius: 0;
-}
-.selected .icon {
-    width: 35rpx;
-    height: 35rpx !important;
-    margin: 0 10rpx;
-}
-.buy-nav .price {
-    width: calc(100% - 140rpx);
-}
-.buy-nav .sales-price {
-    max-width: calc(100% - 40px);
-}
-.nav-remove-submit {
-    top: 38rpx;
-    left: 66rpx;
-    padding: 0rpx 20rpx;
-    line-height: 36rpx;
-}
-
-/*
-* 展示型
-*/
-.exhibition-mode button {
-    line-height: 80rpx;
-}
-.exhibition-mode-data .items {
-    padding-left: 0;
-}
-.exhibition-mode-data .error-msg {
-    left: 26rpx;
-}
\ No newline at end of file