uniapp【优化】（商品分类模块）：离开页面时sku关闭

CoreCms.Net.Uni-App/CoreShop/core/consts/page-comm.ts

@@ -1,2 +1,5 @@
 /** 监听首页onshow需要的常量字段 */
-export const onHomePageShow = "onHomePageShow";
+export const onHomePageShow = "onHomePageShow";
+
+/** 监听分类onHide需要的常量字段 */ 
+export const onClassifyPageHide = "onClassifyPageHide";

CoreCms.Net.Uni-App/CoreShop/pages/classify/classify-page/classify-five/classify-five.vue

@@ -124,8 +124,7 @@
 
 <script setup lang="ts">
 	import { reactive, watch, ref, onMounted, getCurrentInstance, nextTick } from 'vue';
-	import { onShow } from '@dcloudio/uni-app';
-	import { advertPosition, UserToken } from '@/core/consts';
+	import { advertPosition, UserToken, onClassifyPageHide } from '@/core/consts';
 	import { useLoginStore } from '@/core/store';
 	import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
 	import type { CategoriesType, Response, GoodsListType, GoodsType } from '@/core/models';
@@ -209,6 +208,14 @@
 	})
 
 	onMounted(() => {
+		if (uni.getStorageSync(UserToken)) {
+			getCartNumAndMoney();
+		}
+
+		uni.$on(onClassifyPageHide, () => {
+			state.showSku = false;
+		})
+
 		nextTick(async () => {
 			state.bigClassifyH = ((await getDomInfo('.big-classify', instance.proxy)) as { height : number }).height;
 
@@ -218,12 +225,6 @@
 		})
 	})
 
-	onShow(() => {
-		if (uni.getStorageSync(UserToken)) {
-			getCartNumAndMoney();
-		}
-	});
-
 	// 获取商品列表数据
 	const getGoodsPageList = async () => {
 		uni.showLoading({
@@ -234,10 +235,10 @@
 			limit: 10,
 			where: `{"catId":${state.catId}}`
 		});
-		if(goodsPageList.status){
+		if (goodsPageList.status) {
 			state.totalPages = goodsPageList.data?.totalPages;
 			state.goodsList = state.goodsList.concat(goodsPageList.data?.list);
-		} 
+		}
 		uni.hideLoading();
 	}
 

CoreCms.Net.Uni-App/CoreShop/pages/classify/classify-page/classify-four/classify-four.vue

@@ -77,7 +77,7 @@
 <script setup lang="ts">
 	import { reactive, watch } from 'vue';
 	import { onShow } from '@dcloudio/uni-app';
-	import { UserToken, advertPosition } from '@/core/consts';
+	import { UserToken, advertPosition, onClassifyPageHide } from '@/core/consts';
 	import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
 	import type { CategoriesType, Response, GoodsListType, GoodsType } from '@/core/models';
 	import { handleStaticResources, handleRouteNavigateTo, handleShowToast, handleRouteSwitchTab } from '@/core/utils';
@@ -144,6 +144,10 @@
 		if (uni.getStorageSync(UserToken)) {
 			getCartNumAndMoney();
 		}
+
+		uni.$on(onClassifyPageHide, () => {
+			state.showSku = false;
+		})
 	});
 
 	/** 获取商品列表数据 */
@@ -156,10 +160,10 @@
 			limit: 10,
 			where: `{"catId":${state.catId}}`
 		});
-		if(goodsPageList.status){
+		if (goodsPageList.status) {
 			state.totalPages = goodsPageList.data?.totalPages;
 			state.goodsList = state.goodsList.concat(goodsPageList.data?.list);
-		} 
+		}
 		uni.hideLoading();
 	}
 

CoreCms.Net.Uni-App/CoreShop/pages/classify/classify.vue

@@ -28,18 +28,21 @@
 					:data="state.categoriesList" :height="state.height">
 				</classifyFour>
 				<classifyFive v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.five"
-					:data="state.categoriesList" :height="state.height" :statusBarHeight="statusBarHeight"></classifyFive>
-			</view> 
+					:data="state.categoriesList" :height="state.height" :statusBarHeight="statusBarHeight">
+				</classifyFive>
+			</view>
 		</view>
 	</coreshop-page>
 </template>
 
 <script setup lang="ts">
 	import { onMounted, reactive, nextTick } from 'vue';
+	import { onHide } from '@dcloudio/uni-app';
 	import { useShopConfigStore } from '@/core/store';
 	import { queryAllCategories } from '@/core/api';
 	import { GoodsListEnum } from '@/core/enum';
 	import { handleRouteNavigateTo } from '@/core/utils';
+	import { onClassifyPageHide } from '@/core/consts';
 	import type { Response, ShopConfigStoreType, CategoriesType } from '@/core/models';
 	import classifyOne from './classify-page/classify-one/classify-one.vue';
 	import classifyTwo from './classify-page/classify-two/classify-two.vue';
@@ -52,16 +55,16 @@
 	const shopConfigStore : ShopConfigStoreType = useShopConfigStore();
 
 	// 获取自定义导航栏高度
-	const { statusBarHeight, systemInfo } = useSystemInfo(); 
+	const { statusBarHeight, systemInfo } = useSystemInfo();
 
 	const state = reactive<{
 		categoriesList : Array<CategoriesType>,
 		height : number,
-		keyWord : string; 
+		keyWord : string;
 	}>({
 		categoriesList: [],
 		height: 0,
-		keyWord: "", 
+		keyWord: "",
 	})
 
 	onMounted(async () => {
@@ -72,6 +75,11 @@
 		})
 	})
 
+	onHide(() => {
+		/** 触发自定义onhide事件，让后代组件监听页面是关闭 */
+		uni.$emit(onClassifyPageHide);
+	});
+
 	/** 获取购物车数量价格 */
 	const getAllCategories = async () => {
 		const allCategories : Response<Array<CategoriesType>> = await queryAllCategories();
@@ -81,7 +89,7 @@
 	/** 搜索 */
 	const handleSearch = () => {
 		handleRouteNavigateTo(`/pages/category/category?key=${state.keyWord}`);
-	} 
+	}
 </script>
 
 <style lang="scss" scoped>