功能（页面容器）：页面容器添加骨架屏展示

CoreCms.Net.Uni-App/CoreShop/components/coreshop-page-content/coreshop-page-content.vue

@@ -0,0 +1,53 @@
+<template>
+	<view class="layout-page-box page-bg" :style="props.customStyle">
+		<coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :mode="props.mode" :title="props.title"
+			:titleColor="props.titleColor" :handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar>
+		<view class="layout-page-content"
+			:style="{ 'padding-top': `${props.isShowStatusBarHeight ? statusBarHeight : 0}px`, ...props.contentStyle }">
+			<slot></slot>
+		</view>
+		<template v-if="props.showLoginModalDom">
+			<coreshop-login-modal :show="_useLoginStore.showLoginModalTogglePop"
+				@handleChangePopup="handleChangeLoginPopup" @getUserInfo="_useLoginStore.getUserInfo()"></coreshop-login-modal>
+		</template>
+	</view>
+</template>
+<script setup lang="ts">
+	import { useSystemInfo } from '@/core/hooks';
+	import { useLoginStore } from '@/core/store';
+
+	// 获取自定义导航栏高度
+	const { statusBarHeight } = useSystemInfo();
+	const _useLoginStore = useLoginStore();
+
+	const props = withDefaults(defineProps<{
+		isBack : boolean,
+		bgColor : string,
+		titleColor : string,
+		mode : string,
+		title : string,
+		isShowStatusBarHeight : boolean;
+		customStyle : any;
+		contentStyle : any;
+		handleCustomRouteJump : () => void | null,
+		showLoginModalDom : boolean;
+	}>(), {
+		isBack: true,
+		bgColor: '#EEF3F7',
+		titleColor: '#000',
+		mode: 'center',
+		title: '',
+		isShowStatusBarHeight: true,
+		customStyle: {},
+		contentStyle: {},
+		handleCustomRouteJump: null,
+		showLoginModalDom: false
+	});
+
+	/** 打开获取关闭login弹框 */
+	const handleChangeLoginPopup = (isShow : boolean) => {
+		_useLoginStore.setShowLoginModalTogglePop(isShow);
+	}
+</script>
+<style lang="scss" scoped>
+</style>

CoreCms.Net.Uni-App/CoreShop/components/coreshop-page/coreshop-page.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="layout-page-box page-bg" :style="props.customStyle">
+	<!-- <view class="layout-page-box page-bg" :style="props.customStyle">
 		<coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :mode="props.mode" :title="props.title"
 			:titleColor="props.titleColor" :handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar>
 		<view class="layout-page-content"
@@ -8,29 +8,50 @@
 		</view>
 		<template v-if="props.showLoginModalDom">
 			<coreshop-login-modal :show="_useLoginStore.showLoginModalTogglePop"
-				@handleChangePopup="handleChangeLoginPopup" @getUserInfo="_useLoginStore.getUserInfo()"></coreshop-login-modal>
+				@handleChangePopup="handleChangeLoginPopup"
+				@getUserInfo="_useLoginStore.getUserInfo()"></coreshop-login-modal>
 		</template>
-	</view>
+	</view> -->
+
+	<template>
+		<template v-if="props.needSkeleton">
+			<uv-skeletons :skeleton="props.skeleton" :loading="props.skeletonLoading">
+				<coreshop-page-content v-bind="props">
+					<slot name="default" />
+				</coreshop-page-content>
+			</uv-skeletons>
+		</template>
+
+		<template v-else>
+			<coreshop-page-content v-bind="props">
+				<slot name="default" />
+			</coreshop-page-content>
+		</template>
+	</template>
+
 </template>
 <script setup lang="ts">
-	import { useSystemInfo } from '@/core/hooks';
-	import { useLoginStore } from '@/core/store';
+	// import { useSystemInfo } from '@/core/hooks';
+	// import { useLoginStore } from '@/core/store';
 
 	// 获取自定义导航栏高度
-	const { statusBarHeight } = useSystemInfo();
-	const _useLoginStore = useLoginStore();
+	// const { statusBarHeight } = useSystemInfo();
+	// const _useLoginStore = useLoginStore();
 
 	const props = withDefaults(defineProps<{
 		isBack : boolean,
 		bgColor : string,
 		titleColor : string,
 		mode : string,
-		title : string,
+		title : string;
 		isShowStatusBarHeight : boolean;
 		customStyle : any;
 		contentStyle : any;
 		handleCustomRouteJump : () => void | null,
 		showLoginModalDom : boolean;
+		needSkeleton : boolean;
+		skeleton ?: Array<object>;
+		skeletonLoading : boolean;
 	}>(), {
 		isBack: true,
 		bgColor: '#EEF3F7',
@@ -41,13 +62,21 @@
 		customStyle: {},
 		contentStyle: {},
 		handleCustomRouteJump: null,
-		showLoginModalDom: false
+		showLoginModalDom: false,
+		needSkeleton: false,
+		skeleton: [{
+			type: 'line',
+			num: 3,
+			gap: '20rpx',
+			style: ['width: 200rpx;marginBottom: 50rpx;', 'height: 100rpx;', 'width: 500rpx;'],
+		}],
+		skeletonLoading: false
 	});
 
 	/** 打开获取关闭login弹框 */
-	const handleChangeLoginPopup = (isShow : boolean) => {
-		_useLoginStore.setShowLoginModalTogglePop(isShow);
-	}
+	// const handleChangeLoginPopup = (isShow : boolean) => {
+	// 	_useLoginStore.setShowLoginModalTogglePop(isShow);
+	// }
 </script>
 <style lang="scss" scoped>
 </style>

CoreCms.Net.Uni-App/CoreShop/core/hooks/index.ts

@@ -1,2 +1,3 @@
 /** 系统配置 */
 export * from './systemInfo';
+export * from './use-loading';

CoreCms.Net.Uni-App/CoreShop/core/hooks/use-loading.ts

@@ -0,0 +1,11 @@
+import { Ref } from "vue";
+
+export function useLoadingFn<T extends Array<unknown>, R>(fn : (...args : T) => Promise<R>, loading : Ref<boolean>) {
+	function wrapper(this, ...args : T) {
+		loading.value = true;
+		return new Promise<R>((resolve, reject) =>
+			Promise.resolve(fn.apply(this, args)).then(resolve).catch(reject)
+		).finally(() => loading.value = false);
+	}
+	return wrapper;
+}

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

@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 	import { onPageScroll } from '@dcloudio/uni-app';
-	import { onMounted, reactive } from 'vue';
+	import { onMounted, reactive, ref } from 'vue';
 	import { queryPageConfig, queryUserInfo } from '@/core/api';
 	import type { Response, PageConfigType, PageConfigItemsType, UserInfoType } from '@/core/models';
 	import CustomPage from '@/pages/components/custom-page/index.vue';
@@ -35,6 +35,7 @@
 	import { useSystemInfo } from '@/core/hooks';
 	import { UserToken } from '@/core/consts';
 	import { useUserInfoStore, useShopConfigStore } from '@/core/store';
+	import { useLoadingFn } from '@/core/hooks'
 
 	/** 获取项目配置 */
 	const shopConfigStore = useShopConfigStore();
@@ -45,6 +46,10 @@
 	/** 获取 用户数据 */
 	const userInfoStore = useUserInfoStore();
 
+	const loading = ref(true);
+
+	const handleuQueryPageConfig = useLoadingFn(getPageConfig, loading);
+
 	const state = reactive<{
 		coreshopData : Array<PageConfigItemsType>;
 		isScrollTop : boolean;
@@ -53,24 +58,25 @@
 		isScrollTop: false,
 	})
 
-	const getPageConfig = async () => {
+	// const getPageConfig = async () => {
+	// 	const pageConfig : Response<PageConfigType> = await queryPageConfig({ code: 'mobile_home' });
+	// 	state.coreshopData = pageConfig.data?.items;
+	// }
+
+	onMounted(() => {
+		handleuQueryPageConfig()
+		if (uni.getStorageSync(UserToken)) {
+			getUserInfo();
+		}
+	})
+
+	async function getPageConfig() {
 		const pageConfig : Response<PageConfigType> = await queryPageConfig({ code: 'mobile_home' });
 		state.coreshopData = pageConfig.data?.items;
 	}
 
 	onPageScroll((e : any) => {
-		if (e.scrollTop > 10) {
-			state.isScrollTop = true;
-		} else {
-			state.isScrollTop = false;
-		}
-	})
-
-	onMounted(() => {
-		getPageConfig();
-		if (uni.getStorageSync(UserToken)) {
-			getUserInfo();
-		}
+		state.isScrollTop = e.scrollTop > 10;
 	})
 
 	/** 获取用户信息 */