init

uni_modules/nutui-uni/components/loadingpage/index.scss

@@ -0,0 +1,37 @@
+.nut-loading-page {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    &__warpper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-top: -150px;
+
+        /* #ifndef APP-NVUE */
+
+        font-size: $font-size-4;
+        color: $text-color;
+
+        /* #endif */
+        
+
+        &__loading-icon {
+            margin-bottom: $loadingpage-icon-margin-bottom;
+
+            &__img {
+                width: 40px;
+                height: 40px;
+            }
+        }
+
+        &__text {
+            font-size: $font-size-4;
+            color: $text-color;
+        }
+    }
+}

uni_modules/nutui-uni/components/loadingpage/index.ts

@@ -0,0 +1 @@
+export type * from './loadingpage'

uni_modules/nutui-uni/components/loadingpage/loadingpage.ts

@@ -0,0 +1,44 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumberProp, makeNumericProp, makeStringProp } from '../_utils'
+
+export const loadingpageProps = {
+  ...commonProps,
+  /**
+   * @description 提示内容
+   */
+  loadingText: makeStringProp('正在加载'),
+  /**
+   * @description 文字上方用于替换loading动画的图片
+   */
+  image: makeStringProp(''),
+  /**
+   * @description 是否加载中
+   */
+  loading: Boolean,
+  /**
+   * @description 背景颜色
+   */
+  bgColor: makeStringProp('#ffffff'),
+  /**
+   * @description 字体颜色
+   */
+  customColor: makeStringProp('#C8C8C8'),
+  /**
+   * @description 字体大小
+   */
+  fontSize: makeNumericProp(19),
+  /**
+   * @description 图标大小
+   */
+  iconSize: makeNumericProp(28),
+  /**
+   * @@description 边框和线条颜色
+   */
+  loadingColor: makeStringProp('#C8C8C8'),
+  /**
+   * @description 层级
+   */
+  zIndex: makeNumberProp(9999),
+}
+
+export type LoadingPageProps = ExtractPropTypes<typeof loadingpageProps>

uni_modules/nutui-uni/components/loadingpage/loadingpage.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import NutIcon from '../icon/icon.vue'
+import NutTransition from '../transition/transition.vue'
+import { loadingpageProps } from './loadingpage'
+
+const props = defineProps(loadingpageProps)
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-loading-page`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <NutTransition
+    :show="loading"
+    :custom-style="{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: bgColor,
+      display: 'flex',
+      zIndex,
+    }"
+  >
+    <view :class="classes" :style="customStyle">
+      <view class="nut-loading-page__warpper">
+        <view class="nut-loading-page__warpper__loading-icon">
+          <image
+            v-if="image"
+            :src="image"
+            class="nut-loading-page__warpper__loading-icon__img"
+            mode="widthFix"
+            :style="{
+              width: `${iconSize}px`,
+              height: `${iconSize}px`,
+            }"
+          />
+          <NutIcon
+            v-else
+            name="loading1"
+            :size="iconSize"
+            :custom-color="loadingColor"
+          />
+        </view>
+        <slot>
+          <text
+            class="nut-loading-page__warpper__text"
+            :style="{
+              fontSize: `${fontSize}px`,
+              color: customColor,
+            }"
+          >
+            {{ loadingText }}
+          </text>
+        </slot>
+      </view>
+    </view>
+  </NutTransition>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>