Loading page

docs/.vitepress/config.mts

@@ -333,6 +333,9 @@ export default defineConfig({
           }, {
             link: "/component/loading",
             text: "Loading 加载"
+          }, {
+            link: "/component/loading-page",
+            text: "LoadingPage 加载页"
           }, {
             link: "/component/message-box",
             text: "MessageBox 弹框"

docs/component/loading-page.md

@@ -0,0 +1,94 @@
+<frame/>
+
+# Loading-page 加载页
+
+## 基本用法
+
+基本用法
+
+```html
+<wd-loading-page :loading="show" />
+```
+
+```js
+const show = ref(false)
+```
+
+## 自定义背景色
+
+通过 `bgColor` 修改背景色。
+
+```html
+<wd-loading-page :loading="show" bgColor="rgba(0, 0, 0, .9)" />
+```
+
+```js
+const show = ref(false)
+```
+
+## 自定义图片
+
+通过 `loadingImage` 属性修改 loding 图片。
+
+```html
+<wd-loading-page :loading="show" loadingImage="https://wot-design-uni.pages.dev/wot-design.png" />
+```
+
+```js
+const show = ref(false)
+```
+
+## 自定义插槽内容
+
+通过 `#default` 自定义 loding 内容。
+
+```html
+<wd-loading-page :loading="show">
+  <template #default>
+    <view class="custom-class">
+      <view class="loading">
+        <wd-loading />
+      </view>
+      <view class="mt-2">加载中...</view>
+    </view>
+  </template>
+</wd-loading-page>
+```
+
+```js
+const show = ref(false)
+```
+
+```scss
+.custom-class {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+}
+
+.mt-2 {
+  margin-top: 8px;
+}
+```
+
+## Attributes
+
+| 参数         | 说明                                | 类型    | 可选值 | 默认值   | 最低版本         |
+| ------------ | ----------------------------------- | ------- | ------ | -------- | ---------------- |
+| fontSize     | 字体大小                            | string  | -      | 16px     | $LOWEST_VERSION$ |
+| color        | 字体颜色                            | string  | -      | 18px     | $LOWEST_VERSION$ |
+| loadingText  | 加载时显示的文字                    | string  | -      | 正在加载 | $LOWEST_VERSION$ |
+| loading      | 是否加载中                          | boolean | -      | false    | $LOWEST_VERSION$ |
+| bgColor      | 背景颜色                            | string  | -      | #ffffff  | $LOWEST_VERSION$ |
+| loadingColor | 加载图标颜色                        | string  | -      | #C8C8C8  | $LOWEST_VERSION$ |
+| loadingImage | 文字上方用于替换 loading 动画的图片 | string  | -      | 空字符串 | $LOWEST_VERSION$ |
+
+## 外部样式类
+
+| 类名         | 说明       | 最低版本 |
+| ------------ | ---------- | -------- |
+| custom-class | 根节点样式 | -        |

src/pages.json

@@ -211,6 +211,16 @@
         "navigationBarTitleText": "Loading 加载指示器"
       }
     },
+    {
+      "path": "pages/loadingPage/Index",
+      "name": "loadingPage",
+      "style": {
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "navigationBarTitleText": "LoadingPage 加载页"
+      }
+    },
     {
       "path": "pages/progress/Index",
       "name": "progress",

src/pages/index/Index.vue

@@ -242,6 +242,10 @@ const list = ref([
         id: 'loading',
         name: 'Loading 加载指示器'
       },
+      {
+        id: 'loadingPage',
+        name: 'LoadingPage 加载页'
+      },
       {
         id: 'messageBox',
         name: 'MessageBox 弹框'

src/pages/loadingPage/Index.vue

@@ -0,0 +1,86 @@
+<template>
+  <page-wraper>
+    <demo-block title="基本用法">
+      <view class="flex" @click="clickShow">基本用法</view>
+      <wd-loading-page :loading="show" />
+    </demo-block>
+    <demo-block title="自定义背景色">
+      <view class="flex" @click="clickShow2">自定义背景色</view>
+      <wd-loading-page :loading="show2" bgColor="rgba(0, 0, 0, .9)" />
+    </demo-block>
+    <demo-block title="自定义图片">
+      <view class="flex" @click="clickShow3">自定义图片</view>
+      <wd-loading-page :loading="show3" loadingImage="https://wot-design-uni.pages.dev/wot-design.png" />
+    </demo-block>
+    <demo-block title="自定义插槽内容">
+      <view class="flex" @click="clickShow4">自定义插槽内容</view>
+      <wd-loading-page :loading="show4">
+        <template #default>
+          <view class="custom-class">
+            <view class="loading">
+              <wd-loading />
+            </view>
+            <view class="mt-2">加载中...</view>
+          </view>
+        </template>
+      </wd-loading-page>
+    </demo-block>
+  </page-wraper>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const show = ref(false)
+const show2 = ref(false)
+const show3 = ref(false)
+const show4 = ref(false)
+const clickShow = () => {
+  show.value = !show.value
+
+  // 模拟请求-3秒后关闭
+  setTimeout(() => {
+    show.value = false
+  }, 3000)
+}
+const clickShow2 = () => {
+  show2.value = !show2.value
+
+  // 模拟请求-3秒后关闭
+  setTimeout(() => {
+    show2.value = false
+  }, 3000)
+}
+
+const clickShow3 = () => {
+  show3.value = !show3.value
+
+  // 模拟请求-3秒后关闭
+  setTimeout(() => {
+    show3.value = false
+  }, 6000)
+}
+
+const clickShow4 = () => {
+  show4.value = !show4.value
+
+  // 模拟请求-3秒后关闭
+  setTimeout(() => {
+    show4.value = false
+  }, 3000)
+}
+</script>
+<style lang="scss" scoped>
+.custom-class {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+}
+
+.mt-2 {
+  margin-top: 8px;
+}
+</style>

src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts

@@ -0,0 +1,43 @@
+/*
+ * @Author: PdxLook
+ * @Date: 2024-10-30 10:14:34
+ * @LastEditTime: 2024-10-30 10:48:34
+ * @LastEditors: PdxLook
+ * @Description: 定义了加载页面组件的 props 属性及其类型，用于控制加载页面的显示内容和样式。
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loading-page/types.ts
+ */
+
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+/**
+ * 定义加载页面组件的属性，包括文本内容、颜色和加载状态等。
+ * 可通过传递不同的 props 值来自定义组件的显示效果。
+ */
+export const loadingPageProps = {
+  // 继承通用属性，便于在多个组件中重复使用
+  ...baseProps,
+
+  // 提示内容：加载页面显示的文本，默认为“正在加载”
+  loadingText: makeStringProp('正在加载'),
+
+  // 是否加载中：布尔值，指示是否处于加载状态，默认值为 false
+  loading: makeBooleanProp(false),
+
+  // 背景颜色：加载页面的背景色，默认为白色（#ffffff）
+  bgColor: makeStringProp('#ffffff'),
+
+  // 字体颜色：加载文本的颜色，默认为浅灰色（#C8C8C8）
+  color: makeStringProp('#C8C8C8'),
+
+  // 字体大小：加载文本的字号大小，默认为 16px
+  fontSize: makeStringProp('16px'),
+
+  // 加载图标颜色：加载动画的颜色，默认为浅灰色（#C8C8C8）
+  loadingColor: makeStringProp('#C8C8C8'),
+
+  // 文字上方用于替换loading动画的图片：路径默认为空字符串；如有值，替换默认的加载动画
+  loadingImage: makeStringProp('')
+}
+
+export type LoadingPageProps = ExtractPropTypes<typeof loadingPageProps>

src/uni_modules/wot-design-uni/components/wd-loading-page/wd-loading-page.vue

@@ -0,0 +1,58 @@
+<template>
+  <view :class="`wd-loading-page ${props.customClass}`">
+    <wd-overlay :show="props.loading" :style="`--wot-overlay-bg:${props.bgColor}`">
+      <slot v-if="$slots.default"></slot>
+      <view class="wrapper" v-else>
+        <view v-if="props.loadingImage">
+          <image class="" :src="props.loadingImage" mode="aspectFill"></image>
+        </view>
+        <wd-loading :color="props.loadingColor" v-else />
+        <view class="wd-loading-page-text" :style="textStyle">{{ props.loadingText }}</view>
+      </view>
+    </wd-overlay>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-loading-page',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, type CSSProperties } from 'vue'
+import { objToStyle, addUnit, isDef } from '../common/util'
+import { loadingPageProps } from './types'
+
+const props = defineProps(loadingPageProps)
+
+//  计算样式
+const textStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.fontSize)) {
+    style.fontSize = addUnit(props.fontSize)
+  }
+  if (isDef(props.color)) {
+    style.color = props.color
+  }
+  return `${objToStyle(style)}; ${props.customStyle}`
+})
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+
+  .wd-loading-page-text {
+    margin: var(--wd-loading-page-text-margin, 8px 0 0 0);
+  }
+}
+</style>