Ver Fonte

feat(cart): implement event-based refresh for cart page

- Introduced an event bus to handle cart page refreshes, improving component communication.
- Updated onShow and onPullDownRefresh methods to emit a 'cartPageRefresh' event instead of directly accessing child components.
- Created a refreshCartPage method to encapsulate cart data loading and badge updating logic, enhancing code maintainability.
ylong há 5 dias atrás
pai
commit
e5db4a386b
2 ficheiros alterados com 24 adições e 16 exclusões
  1. 20 5
      pages-car/pages/index.vue
  2. 4 11
      pages/cart/index.vue

+ 20 - 5
pages-car/pages/index.vue

@@ -89,6 +89,7 @@
     import ReduceQrcode from '@/components/reduce-qrcode/reduce-qrcode.vue';
     import CommonDialog from '@/components/common-dialog.vue';
     import ConditionPopup from '../components/condition-popup.vue';
+    import { eventBus } from '@/utils/event-bus.js';
 
     export default {
         components: {
@@ -125,13 +126,22 @@
             };
         },
         onShow() {
-            this.loadData();
-            this.getShippingText();
-            this.$updateCartBadge();
+            this.refreshCartPage();
+        },
+        created() {
+            // Tab 页通过事件触发刷新,避免父页面访问 $refs 时占位组件未就绪报错
+            this.cartPageRefreshHandler = () => {
+                this.refreshCartPage();
+            };
+            eventBus.on('cartPageRefresh', this.cartPageRefreshHandler);
+        },
+        beforeDestroy() {
+            if (this.cartPageRefreshHandler) {
+                eventBus.off('cartPageRefresh', this.cartPageRefreshHandler);
+            }
         },
         mounted() {
-            this.loadData();
-            this.getShippingText();
+            this.refreshCartPage();
         },
         // 分享配置
         onShareAppMessage(res) {
@@ -203,6 +213,11 @@
             }
         },
         methods: {
+            refreshCartPage() {
+                this.loadData();
+                this.getShippingText();
+                this.$updateCartBadge();
+            },
             getShippingText() {
                 this.$u.api.getShippingTempleteAjax().then(res => {
                     if (res.code === 200) {

+ 4 - 11
pages/cart/index.vue

@@ -8,6 +8,7 @@
 <script>
 import PolicyConsentHost from '@/components/policy-consent-host.vue'
 import tabbarBlockMixin from '@/utils/tabbar-block-mixin.js'
+import { eventBus } from '@/utils/event-bus.js'
 
     export default {
         mixins: [tabbarBlockMixin],
@@ -20,21 +21,13 @@ import tabbarBlockMixin from '@/utils/tabbar-block-mixin.js'
             }
         },
         onShow() {
-            // 每次显示页面时,更新购物车角标并调用子组件的刷新方法
+            // 每次显示页面时更新角标;通过事件通知子组件刷新,避免访问 $refs 触发小程序占位组件报错
             this.$updateCartBadge();
-            this.$nextTick(() => {
-                if (this.$refs.cartContainer) {
-                    this.$refs.cartContainer.loadData();
-                }
-            });
+            eventBus.emit('cartPageRefresh');
         },
         onPullDownRefresh() {
-            // 更新购物车角标并调用子组件的刷新方法
             this.$updateCartBadge();
-            if (this.$refs.cartContainer) {
-                // 如果 cartContainer 的 loadData 返回 Promise,可以通过 await 等待结束后停止下拉刷新,这里暂直接调用并停止
-                this.$refs.cartContainer.loadData();
-            }
+            eventBus.emit('cartPageRefresh');
             setTimeout(() => {
                 uni.stopPullDownRefresh();
             }, 1000);