基础界面的构建和状态展示组件的封装

components/status-display/status-display.vue

@@ -8,6 +8,10 @@
     <view v-else-if="type === 'empty'" class="empty">
       <text>{{ emptyText }}</text>
     </view>
+    <!-- 错误状态 -->
+    <view v-else-if="type === 'error'" class="error">
+      <text>{{ errorText }}</text>
+    </view>
   </view>
 </template>
 
@@ -15,11 +19,12 @@
 export default {
   name: 'StatusDisplay',
   props: {
-    // 状态类型：loading, empty
+    // 状态类型：loading, empty, error
     type: {
       type: String,
       required: true,
-      validator: value => ['loading', 'empty'].includes(value)
+      validator: value => ['loading', 'empty', 'error'].includes(value),
+      default: 'loading'
     },
     // 加载文本
     loadingText: {
@@ -30,6 +35,11 @@ export default {
     emptyText: {
       type: String,
       default: '暂无数据'
+    },
+    // 错误文本
+    errorText: {
+      type: String,
+      default: '加载失败'
     }
   }
 }
@@ -41,9 +51,10 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 200rpx;
 }
 
-.loading, .empty {
+.loading, .empty, .error {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,5 +62,10 @@ export default {
   font-size: 28rpx;
   background-color: #FFFBF5;
   padding: 40rpx 0;
+  border-radius: 8rpx;
+}
+
+.error {
+  color: #ff6b6b;
 }
 </style> 

pages.json

@@ -101,6 +101,14 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/basePage/basePage",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
 		}
 	],
 

pages/basePage/basePage.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="page">
+    <custom-navbar title="基础页面" />
+    <tile-grid :tile-image="tilesImageEnum.TILE" />
+    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
+      <!-- 状态展示 -->
+      <status-display
+          v-if="loading"
+          type="loading"
+          loading-text="加载中..."
+      />
+      <!-- 页面内容将在这里添加 -->
+    </view>
+
+  </view>
+</template>
+
+<script>
+import { tilesImageEnum } from '@/enum/institutionalStructure.js';
+import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
+import TileGrid from "../../components/tile-grid/tile-grid.vue";
+import CommonEnum from "../../enum/common";
+import StatusDisplay from "../../components/status-display/status-display.vue";
+
+export default {
+  components: {
+    CustomNavbar,
+    TileGrid,
+    StatusDisplay
+  },
+  data() {
+    return {
+      CommonEnum,
+      tilesImageEnum,
+      loading: false
+    }
+  },
+  onLoad() {
+    // 页面加载时获取数据
+    this.loadPageData()
+  },
+  methods: {
+    // 加载页面数据
+    async loadPageData() {
+      this.loading = true
+      try {
+        // TODO: 调用页面数据API
+        // const response = await getPageData()
+        // 模拟加载
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      } catch (error) {
+        console.error('获取页面数据失败:', error)
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  background: #F5F0E7;
+}
+.header {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 0 15rpx;
+  padding-bottom: 40rpx;
+}
+</style>

pages/institutionalStructure/donationRecord.vue

@@ -20,7 +20,7 @@ import { tilesImageEnum } from '@/enum/institutionalStructure.js';
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import CommonEnum from "../../enum/common";
-import StatusDisplay from "./components/status-display.vue";
+import StatusDisplay from "../../components/status-display/status-display.vue";
 
 export default {
   components: {

pages/institutionalStructure/institutionalStructure.vue

@@ -34,7 +34,7 @@ import { getInstitutionalList } from '@/api/institutionalStructure.js';
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import InstitutionalItem from "./components/institutional-item.vue";
-import StatusDisplay from "./components/status-display.vue";
+import StatusDisplay from "../../components/status-display/status-display.vue";
 import { InstitutionalDataFormatter } from "./utils/data-formatter.js";
 import { dataManagerMixin } from "./mixins/data-manager.js";
 import CommonEnum from "../../enum/common";