捐款记录组件基础框架搭建

pages.json

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

pages/institutionalStructure/donationRecord.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.vue";
+
+export default {
+  components: {
+    CustomNavbar,
+    TileGrid,
+    StatusDisplay
+  },
+  data() {
+    return {
+      CommonEnum,
+      tilesImageEnum,
+      loading: false
+    }
+  },
+  onLoad() {
+    // 页面加载时获取数据
+    this.loadDonationRecords()
+  },
+  methods: {
+    // 加载捐款记录
+    async loadDonationRecords() {
+      this.loading = true
+      try {
+        // TODO: 调用捐款记录API
+        // const response = await getDonationRecords()
+        // 模拟加载
+        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/institutionalStructure.vue

@@ -106,7 +106,4 @@ page {
   padding: 0 15rpx;
   padding-bottom: 40rpx;
 }
-
-
-
 </style>