Parcourir la source

feat: 添加全局购物车角标更新功能

在多个页面和组件中添加购物车操作后更新角标的逻辑
新增获取购物车数量的API接口
在App.vue中全局初始化角标并处理登录后的更新
ylong il y a 1 semaine
Parent
commit
3130016bc4

+ 4 - 0
App.vue

@@ -66,6 +66,9 @@ export default {
 			this.slientLogin()
 		}
 	},
+    onShow() {
+        this.$updateCartBadge();
+    },
 	onUnload() {
 		uni.removeStorageSync('loginType')
 	},
@@ -91,6 +94,7 @@ export default {
 
 								eventBus.emit('loginSuccess', { response: response.data, params: data })
 								that.globalData.isColdLaunch = false;
+                                that.$updateCartBadge();
 							}
 						});
 				},

+ 3 - 0
api/modules/mall.js

@@ -109,5 +109,8 @@ export const useMallApi = (Vue, vm) => {
 
         // 确认收货
         confirmReceiveAjax: (data) => vm.$u.post('/token/shop/order/confirmReceive', data),
+
+        // 获取购物车数量
+        getCartCountAjax: () => vm.$u.post('/token/shop/cart/getCount'),
 	}
 }

+ 3 - 1
main.js

@@ -37,9 +37,11 @@ Vue.filter('conditionText', getConditionText)
 Vue.prototype.$conditionMap = CONDITION_MAP
 
 import {
-	copyByUniappApi
+	copyByUniappApi,
+    updateCartBadge
 } from '@/utils/uniapp-api.js';
 Vue.prototype.$copyByUniappApi = copyByUniappApi
+Vue.prototype.$updateCartBadge = updateCartBadge
 // 引入环境变量
 import ENV_CONFIG from '@/.env.js'
 Vue.prototype.$env = ENV_CONFIG[process.env.ENV_TYPE];

+ 3 - 0
pages-car/pages/index.vue

@@ -106,6 +106,7 @@
         },
         onShow() {
             this.loadData();
+            this.$updateCartBadge();
         },
         mounted() {
             this.loadData();
@@ -268,6 +269,7 @@
                             this.$u.api.clearCartAjax().then(() => {
                                 this.$u.toast('清空成功');
                                 this.cartList = [];
+                                this.$updateCartBadge();
                             });
                         }
                     }
@@ -341,6 +343,7 @@
                                 if (index > -1) {
                                     this.cartList.splice(index, 1);
                                 }
+                                this.$updateCartBadge();
                             });
                         } else {
                             item.show = false;

+ 1 - 0
pages-car/pages/my-order.vue

@@ -148,6 +148,7 @@
                                 title: '已加入购物车',
                                 icon: 'success'
                             });
+                            this.$updateCartBadge();
                         }
                     });
                 } else if (type === 'remind') {

+ 1 - 0
pages-car/pages/order-detail.vue

@@ -329,6 +329,7 @@
                                 title: '已加入购物车',
                                 icon: 'success'
                             });
+                            this.$updateCartBadge();
                         }
                     });
                     return;

+ 1 - 0
pages-sell/components/select-good-popup/index.vue

@@ -185,6 +185,7 @@
 				}).then(res => {
 					if (res.code === 200) {
 						this.$u.toast('加入购物车成功');
+                        this.$updateCartBadge();
 						this.$emit('confirm', {
 							product: this.currentProduct,
 							quality: this.currentQuality,

+ 1 - 0
pages-sell/pages/topic.vue

@@ -116,6 +116,7 @@
 							title: '已加入购物车',
 							icon: 'success'
 						});
+                        this.$updateCartBadge();
 					}
 				});
 			}

+ 31 - 0
utils/uniapp-api.js

@@ -20,3 +20,34 @@ export const copyByUniappApi = (data, msg = '已复制到剪贴板') => {
 		}
 	});
 }
+
+// 全局更新购物车角标
+export const updateCartBadge = () => {
+    // 检查是否登录,未登录不请求
+    const token = uni.getStorageSync('token');
+    if (!token) {
+        uni.removeTabBarBadge({ index: 2 });
+        return;
+    }
+    
+    // 确保 uView http 可用
+    if (uni.$u && uni.$u.http) {
+        uni.$u.http.get('/token/shop/cart/getCount').then(res => {
+            if (res.code == 200) {
+                const count = res.data;
+                if (count > 0) {
+                    uni.setTabBarBadge({
+                        index: 2,
+                        text: String(count)
+                    });
+                } else {
+                    uni.removeTabBarBadge({
+                        index: 2
+                    });
+                }
+            }
+        }).catch(e => {
+            console.log('更新购物车角标失败', e);
+        });
+    }
+}