Merge branch 'feat/bob_sk' into 'dev'

uniapp【新增】:首页新增骨架屏

See merge request jianweie/coreshoppro!64

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

@@ -1,6 +1,7 @@
 <template>
 	<template v-if="props.needSkeleton">
-		<uv-skeletons :skeleton="props.skeleton" :loading="props.skeletonLoading">
+		<uv-skeletons style="padding:20rpx" class="coreshop-skeleton" :skeleton="props.skeleton"
+			:loading="props.skeletonLoading">
 			<coreshop-page-content v-bind="props">
 				<slot name="default" />
 			</coreshop-page-content>
@@ -13,7 +14,8 @@
 		</coreshop-page-content>
 		<template v-if="props.needLoadingPage">
 			<uv-loading-page :loading="props.loadingPage" :loading-text="props.loadingText"
-				:font-size="props.loadingTextFontSize" :color="props.loadingColor" :loadingColor="loadingColor" :bgColor="props.loadingBgColor"></uv-loading-page>
+				:font-size="props.loadingTextFontSize" :color="props.loadingColor" :loadingColor="loadingColor"
+				:bgColor="props.loadingBgColor"></uv-loading-page>
 		</template>
 	</template>
 </template>
@@ -30,7 +32,7 @@
 		handleCustomRouteJump : () => void | null,
 		showLoginModalDom : boolean;
 		needSkeleton : boolean;
-		skeleton ?: Array<any>;
+		skeleton ?: Array<{ [key : string] : any }>;
 		skeletonLoading : boolean;
 		placeholder : boolean;
 		loadingPage : boolean;
@@ -38,7 +40,7 @@
 		loadingText : string;
 		loadingTextFontSize : string;
 		loadingBgColor : string;
-		loadingColor:string;
+		loadingColor : string;
 	}>(), {
 		isBack: true,
 		bgColor: '#eef2f6',
@@ -51,12 +53,7 @@
 		handleCustomRouteJump: null,
 		showLoginModalDom: false,
 		needSkeleton: false,
-		skeleton: [{
+		skeleton: [],
-			type: 'line',
-			num: 3,
-			gap: '20rpx',
-			style: ['width: 200rpx;marginBottom: 50rpx;', 'height: 100rpx;', 'width: 500rpx;'],
-		}],
 		skeletonLoading: false,
 		placeholder: true,
 		loadingPage: false,
@@ -64,8 +61,29 @@
 		loadingText: '加载中...',
 		loadingTextFontSize: '24rpx',
 		loadingBgColor: 'rgba(255, 255, 255, 0.2)',
-		loadingColor:'#d33123'
+		loadingColor: '#d33123'
 	});
 </script>
 <style lang="scss" scoped>
+	.coreshop-skeleton {
+		padding: 20rpx;
+	}
+
+	:deep(.uv-skeleton) {
+		padding: 20rpx;
+	}
+</style>
+
+<style>
+	.coreshop-skeleton {
+		padding: 20rpx;
+	}
+
+	.uv-skeleton {
+		padding: 20rpx !important;
+	}
+
+	:deep(.uv-skeleton) {
+		padding: 20rpx !important;
+	}
 </style>

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

@@ -15,7 +15,6 @@ export const useSystemInfo = () => {
 	onMounted(() => {
 		const systemInfo = uni.getSystemInfoSync();
 		state.systemInfo = systemInfo;
-		
 		// #ifndef APP
 		const menuButton = uni.getMenuButtonBoundingClientRect();
 		state.menuButtonHeight = menuButton.height + (menuButton.top - systemInfo.statusBarHeight) * 2;

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

@@ -1,6 +1,6 @@
 <template>
-	<coreshop-page :isBack="false" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom
+	<coreshop-page :isBack="false" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom needSkeleton :skeleton="skeleton"
-		needLoadingPage :loadingPage="loading">
+		:skeletonLoading="loading">
 		<view class="layout-home-page page-bg">
 			<image class="home-bg" :src="handleStaticResources('/static/images/home-bg.jpg')"></image>
 			<uv-navbar :title="shopConfigStore.config?.shopName"
@@ -38,6 +38,7 @@
 	import { UserToken, onHomePageShow, shareUrl } from '@/core/consts';
 	import { useUserInfoStore, useShopConfigStore } from '@/core/store';
 	import { ShareClientEnum, ShareModelEnum, ShareEnum } from '@/core/enum';
+	import { skeleton } from './skeleton'
 
 	/** 获取项目配置 */
 	const shopConfigStore = useShopConfigStore();
@@ -47,6 +48,8 @@
 
 	const loading = ref(true);
 
+
+
 	const handleuQueryPageConfig = useLoadingFn(getPageConfig, loading);
 
 	const state = reactive<{
@@ -130,4 +133,11 @@
 
 <style lang="scss" scoped>
 	@import './home.scss';
+</style>
+
+<style lang="scss">
+	.page-bg,
+	page {
+		background-color: #ffffff !important;
+	}
 </style>

CoreCms.Net.Uni-App/CoreShop/pages/home/skeleton.ts

@@ -0,0 +1,52 @@
+export const skeleton = [
+	{
+		type: 'flex',
+		num: 1,
+		children: [{
+			type: 'line',
+			num: 1,
+			style: 'height:300rpx;marginLeft:20rpx;marginRight: 20rpx;marginTop:20rpx'
+		}]
+	},
+	30, {
+		type: 'flex',
+		num: 2,
+		children: [{
+			type: 'custom',
+			style: 'width:98rpx;height:98rpx;marginLeft:20rpx;border-radius: 100%;'
+		}, {
+			type: 'custom',
+			style: 'width:98rpx;height:98rpx;marginLeft:20rpx;border-radius: 100%;'
+		}, {
+			type: 'custom',
+			style: 'width:98rpx;height:98rpx;marginLeft:20rpx;border-radius: 100%;'
+		}, {
+			type: 'custom',
+			style: 'width:98rpx;height:98rpx;marginLeft:20rpx;border-radius: 100%;'
+		}, {
+			type: 'custom',
+			style: 'width:98rpx;height:98rpx;marginLeft:20rpx;border-radius: 100%;'
+		},
+		{
+			type: 'custom',
+			style: 'width:98rpx;height:98rpx;marginLeft:20rpx;border-radius: 100%;'
+		}
+		]
+	},
+	30,
+	30, {
+		type: 'flex',
+		num: 5,
+		children: [
+			{
+				type: 'custom',
+				style: 'width:160rpx;height:160rpx;marginLeft: 20rpx;marginRight: 20rpx;'
+			},
+			{
+				type: 'line',
+				num: 3,
+				gap: '30rpx',
+				style: ["marginRight: 20rpx;", "marginRight: 20rpx;", "marginRight: 20rpx;"]
+			}]
+	}
+]