捐款记录静态界面2.0

pages/institutionalStructure/donationRecord.vue

@@ -17,10 +17,16 @@
         </view>
       </view>
       
+      <!-- 项目描述 -->
+      <view class="project-info">
+        <text class="project-title">始建"乾峰寺"(初建)</text>
+        <text class="project-desc">天王殿为"三门"内第一殿，正中供奉弥勒菩萨，弥勒菩萨背后供奉韦驮菩萨，东西两侧为四大天王。面阔五间，采用歇 山式重檐建筑，装饰剪瓷，具有浓厚的南方特色，使殿堂显得极其庄严肃穆。四大天王像于1981年重塑时，采用国家级"非遗"漆线雕工艺装饰。此殿于19 25年重修，2020年重建。</text>
+      </view>
+      
       <!-- 捐款统计区域 -->
-      <view class="donation-summary">
+      <view class="donation-summary" :class="{ 'completed': isCompleted }">
         <view class="summary-item">
-          <text class="summary-label">当前筹款金额(元)</text>
+          <text class="summary-label">{{ amountLabel }}</text>
           <text class="summary-value">{{ totalAmount.toLocaleString() }}</text>
         </view>
         <view class="summary-item">
@@ -29,12 +35,12 @@
         </view>
       </view>
       
-      <!-- 刷新提示 -->
+<!--      &lt;!&ndash; 刷新提示 &ndash;&gt;-->
-      <view class="refresh-tip" @click="refreshData">
+<!--      <view class="refresh-tip" @click="refreshData">-->
-        <text class="tip-text">下列信息实时更新,可</text>
+<!--        <text class="tip-text">下列信息实时更新,可</text>-->
-        <text class="refresh-text">点击刷新</text>
+<!--        <text class="refresh-text">点击刷新</text>-->
-        <image class="refresh-icon" :src="CommonEnum.REFRESH" mode="aspectFit" />
+<!--        <image class="refresh-icon" :src="CommonEnum.REFRESH" mode="aspectFit" />-->
-      </view>
+<!--      </view>-->
       
       <!-- 捐款记录列表 -->
       <view class="donation-list">
@@ -58,6 +64,11 @@
         loading-text="加载中..."
       />
     </view>
+    
+    <!-- 底部固定按钮 -->
+    <view class="bottom-button" :class="{ 'completed': isCompleted }" @click="handleBottomAction">
+      <text class="button-text">{{ bottomButtonText }}</text>
+    </view>
   </view>
 </template>
 
@@ -80,22 +91,32 @@ export default {
       CommonEnum,
       loading: false,
       searchKeyword: '',
+      // 页面状态：'active' 或 'completed'
+      pageStatus: 'active',
       totalAmount: 28040062,
       participantCount: 9062,
-      donationList: [
+      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() {
+  computed: {
+    // 是否已完成募捐
+    isCompleted() {
+      return this.pageStatus === 'completed'
+    },
+    // 金额标签
+    amountLabel() {
+      return this.isCompleted ? '总造价(元)' : '当前筹款金额(元)'
+    },
+    // 底部按钮文字
+    bottomButtonText() {
+      return this.isCompleted ? '募捐结束' : '我要捐助'
+    }
+  },
+  onLoad(options) {
+    // 获取页面参数
+    if (options.status) {
+      this.pageStatus = options.status
+    }
     // 页面加载时获取数据
     this.loadDonationRecords()
   },
@@ -103,6 +124,7 @@ export default {
     onSearch(val) {
       // 搜索逻辑
       console.log('搜索内容：', val)
+      this.loadDonationRecords(val)
     },
     onFilter() {
       // 筛选逻辑
@@ -112,18 +134,59 @@ export default {
       // 刷新数据
       this.loadDonationRecords()
     },
-    // 加载捐款记录
+    // 处理底部按钮点击
-    async loadDonationRecords() {
+    handleBottomAction() {
+      if (this.isCompleted) {
+        uni.showToast({ 
+          title: '募捐已结束', 
+          icon: 'none' 
+        })
+      } else {
+        uni.showToast({ 
+          title: '跳转到捐助页面', 
+          icon: 'none' 
+        })
+        // 这里可以跳转到捐助页面
+        // uni.navigateTo({ url: '/pages/donation/donate' })
+      }
+    },
+    // 模拟获取捐款记录API
+    async loadDonationRecords(keyword = '') {
       this.loading = true
       try {
-        // TODO: 调用捐款记录API
+        // 模拟API调用
-        // const response = await getDonationRecords()
+        await new Promise(resolve => setTimeout(resolve, 1000))
-        // 模拟加载
+        
-        setTimeout(() => {
+        // 模拟数据
-          this.loading = false
+        const mockData = [
-        }, 1000)
+          { 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' }
+        ]
+        
+        // 如果有搜索关键词，过滤数据
+        if (keyword) {
+          this.donationList = mockData.filter(item => 
+            item.name.includes(keyword) || 
+            item.amount.toString().includes(keyword)
+          )
+        } else {
+          this.donationList = mockData
+        }
+        
       } catch (error) {
         console.error('获取捐款记录失败:', error)
+        uni.showToast({
+          title: '获取数据失败',
+          icon: 'none'
+        })
+      } finally {
         this.loading = false
       }
     }
@@ -141,8 +204,8 @@ page {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
-
+  padding-bottom: 120rpx; /* 为底部按钮留出空间 */
-  padding-bottom: 40rpx;
+  padding: 0 15rpx 0 15rpx;
 }
 .search-filter-row {
   width: 100%;
@@ -174,10 +237,43 @@ page {
   font-size: 28rpx;
 }
 
+// 项目信息
+.project-info {
+  width: 100%;
+  padding: 24rpx 20rpx;
+  margin-bottom: 20rpx;
+  background: rgba(243,210,162,0);
+  border-radius: 20rpx 20rpx 20rpx 20rpx;
+  border: 2rpx solid #F3D2A2;
+}
+.project-title {
+  display: block;
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #522510;
+  line-height: 42rpx;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.project-desc {
+  display: block;
+  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #522510;
+  line-height: 32rpx;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.project-desc:last-child {
+  margin-bottom: 0;
+}
+
 // 捐款统计区域
 .donation-summary {
   width: 100%;
-  background: #C7A26D;
   padding: 40rpx 24rpx;
   margin-bottom: 20rpx;
   display: flex;
@@ -185,6 +281,9 @@ page {
   align-items: center;
   position: relative;
 }
+.donation-summary.completed {
+  background: #E8D5B5;
+}
 .summary-item {
   display: flex;
   flex-direction: column;
@@ -204,14 +303,14 @@ page {
 }
 .summary-label {
   font-size: 28rpx;
-  color: #ffffff;
+  color: #C7A26D;
   margin-bottom: 20rpx;
   text-align: center;
 }
 .summary-value {
   font-size: 48rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: #C7A26D;
   text-align: center;
 }
 
@@ -246,17 +345,16 @@ page {
   width: 100%;
   border-radius: 16rpx;
   overflow: hidden;
+  padding-bottom: 106rpx;
 }
 .list-header {
   display: flex;
-
+  padding: 28rpx 15rpx;
-  padding: 28rpx 20rpx;
-
 }
 .header-item {
   flex: 1;
   font-size: 30rpx;
-  color: #B3B7B5;
+  color: #643B27;
   font-weight: bold;
   text-align: center;
 }
@@ -292,4 +390,27 @@ page {
   color: #666;
   font-size: 26rpx;
 }
+
+// 底部固定按钮
+.bottom-button {
+  position: fixed;
+  bottom: 22rpx;
+  left: 34rpx;
+  right: 34rpx;
+  height: 84rpx;
+  background: #C7A26D;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  border-radius: 30rpx 30rpx 30rpx 30rpx;
+}
+.bottom-button.completed {
+  background: #F3D2A2;
+}
+.button-text {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #522510;
+}
 </style>