捐款记录静态界面

enum/common.js

@@ -6,7 +6,8 @@ export const CommonEnum = {
     BASE_COLOR:"#FAF8F3", //基调颜色
     SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //通用搜索图标
     TILE: "https://api.ccttiot.com/image-1753750309203.png", //瓦片图片
-    FILTER: "https://api.ccttiot.com/image-1753954149098.png" //筛选图标
+    FILTER: "https://api.ccttiot.com/image-1753954149098.png", //筛选图标
+    REFRESH:"https://api.ccttiot.com/%E5%AE%B9%E5%99%A8-1754011714179.png" //刷新图标
 
 };
 export default CommonEnum;

pages/institutionalStructure/donationRecord.vue

@@ -7,7 +7,6 @@
         <search-box
           v-model="searchKeyword"
           :width="'100%'"
-          :search-icon="CommonEnum.SEARCH"
           placeholder="请输入搜索关键词"
           btn-text="搜索"
           @search="onSearch"
@@ -17,12 +16,47 @@
           <text class="filter-text">筛选</text>
         </view>
       </view>
+      
+      <!-- 捐款统计区域 -->
+      <view class="donation-summary">
+        <view class="summary-item">
+          <text class="summary-label">当前筹款金额(元)</text>
+          <text class="summary-value">{{ totalAmount.toLocaleString() }}</text>
+        </view>
+        <view class="summary-item">
+          <text class="summary-label">参与捐款人次</text>
+          <text class="summary-value">{{ participantCount.toLocaleString() }}</text>
+        </view>
+      </view>
+      
+      <!-- 刷新提示 -->
+      <view class="refresh-tip" @click="refreshData">
+        <text class="tip-text">下列信息实时更新,可</text>
+        <text class="refresh-text">点击刷新</text>
+        <image class="refresh-icon" :src="CommonEnum.REFRESH" mode="aspectFit" />
+      </view>
+      
+      <!-- 捐款记录列表 -->
+      <view class="donation-list">
+        <view class="list-header">
+          <text class="header-item">编号</text>
+          <text class="header-item">姓名</text>
+          <text class="header-item">捐款金额(元)</text>
+          <text class="header-item">捐款时间</text>
+        </view>
+        <view class="list-item" v-for="(item, index) in donationList" :key="index">
+          <text class="item-id">{{ item.id }}</text>
+          <text class="item-name">{{ item.name }}</text>
+          <text class="item-amount">{{ item.amount.toLocaleString() }}</text>
+          <text class="item-time">{{ item.time }}</text>
+        </view>
+      </view>
+      
       <status-display
         v-if="loading"
         type="loading"
         loading-text="加载中..."
       />
-      <!-- 捐款记录内容将在这里添加 -->
     </view>
   </view>
 </template>
@@ -45,7 +79,20 @@ export default {
     return {
       CommonEnum,
       loading: false,
-      searchKeyword: ''
+      searchKeyword: '',
+      totalAmount: 28040062,
+      participantCount: 9062,
+      donationList: [
+        { id: 9, name: '张珊珊', amount: 1000, time: '2025/03/11' },
+        { id: 8, name: '张珊珊', amount: 1000, time: '2025/03/09' },
+        { id: 7, name: '张珊珊', amount: 1000, time: '2025/03/01' },
+        { id: 6, name: '张珊珊', amount: 1000, time: '2025/02/27' },
+        { id: 5, name: '张珊珊', amount: 1000, time: '2025/02/27' },
+        { id: 4, name: '张珊珊', amount: 1000, time: '2025/02/24' },
+        { id: 3, name: '张珊珊', amount: 1000, time: '2025/02/12' },
+        { id: 2, name: '张珊珊', amount: 1000, time: '2025/02/08' },
+        { id: 1, name: '张珊珊', amount: 1000, time: '2025/02/01' }
+      ]
     }
   },
   onLoad() {
@@ -61,6 +108,10 @@ export default {
       // 筛选逻辑
       uni.showToast({ title: '筛选功能开发中', icon: 'none' })
     },
+    refreshData() {
+      // 刷新数据
+      this.loadDonationRecords()
+    },
     // 加载捐款记录
     async loadDonationRecords() {
       this.loading = true
@@ -90,7 +141,7 @@ page {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
-  padding: 0 15rpx;
+
   padding-bottom: 40rpx;
 }
 .search-filter-row {
@@ -98,7 +149,8 @@ page {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin: 0 0 32rpx 0;
+  margin: 10rpx 0 10rpx 0;
+  padding: 0 20rpx;
 }
 .search-filter-row search-box {
   flex: 1;
@@ -106,8 +158,8 @@ page {
 .filter-btn {
   display: flex;
   align-items: center;
-  margin-left: 24rpx;
+  margin-left: 20rpx;
-  padding: 0 12rpx;
+  padding: 0 16rpx;
   height: 70rpx;
   border-radius: 10rpx;
   cursor: pointer;
@@ -121,4 +173,123 @@ page {
   color: #6B4A1B;
   font-size: 28rpx;
 }
+
+// 捐款统计区域
+.donation-summary {
+  width: 100%;
+  background: #C7A26D;
+  padding: 40rpx 24rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+.summary-item:first-child::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rpx;
+  height: 100%;
+  background: #ffffff;
+}
+.summary-label {
+  font-size: 28rpx;
+  color: #ffffff;
+  margin-bottom: 20rpx;
+  text-align: center;
+}
+.summary-value {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #ffffff;
+  text-align: center;
+}
+
+// 刷新提示
+.refresh-tip {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20rpx;
+  cursor: pointer;
+  padding: 16rpx 0;
+}
+.tip-text {
+  font-size: 26rpx;
+  color: #999;
+  margin-right: 12rpx;
+}
+.refresh-text {
+  color: #E74C3C;
+  font-size: 26rpx;
+  margin-right: 8rpx;
+}
+.refresh-icon {
+  width: 26rpx;
+  height: 26rpx;
+  padding-bottom: 1rpx;
+}
+
+// 捐款记录列表
+.donation-list {
+  width: 100%;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+.list-header {
+  display: flex;
+
+  padding: 28rpx 20rpx;
+
+}
+.header-item {
+  flex: 1;
+  font-size: 30rpx;
+  color: #B3B7B5;
+  font-weight: bold;
+  text-align: center;
+}
+.list-item {
+  display: flex;
+  padding: 28rpx 20rpx;
+}
+.list-item:hover {
+  background: #FAFAFA;
+}
+.list-item:last-child {
+  border-bottom: none;
+}
+.item-id, .item-name, .item-amount, .item-time {
+  flex: 1;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 1.5;
+}
+.item-id {
+  color: #666;
+  font-weight: 500;
+}
+.item-name {
+  color: #333;
+  font-weight: 500;
+}
+.item-amount {
+  color: #E74C3C;
+  font-weight: bold;
+}
+.item-time {
+  color: #666;
+  font-size: 26rpx;
+}
 </style>