diff --git a/pages/institutionalStructure/donationRecord.vue b/pages/institutionalStructure/donationRecord.vue
index e1279af..862519a 100644
--- a/pages/institutionalStructure/donationRecord.vue
+++ b/pages/institutionalStructure/donationRecord.vue
@@ -17,10 +17,16 @@
+
+
+ 始建"乾峰寺"(初建)
+ 天王殿为"三门"内第一殿，正中供奉弥勒菩萨，弥勒菩萨背后供奉韦驮菩萨，东西两侧为四大天王。面阔五间，采用歇 山式重檐建筑，装饰剪瓷，具有浓厚的南方特色，使殿堂显得极其庄严肃穆。四大天王像于1981年重塑时，采用国家级"非遗"漆线雕工艺装饰。此殿于19 25年重修，2020年重建。
+
+
-
+
- 当前筹款金额(元)
+ {{ amountLabel }}
{{ totalAmount.toLocaleString() }}
@@ -29,12 +35,12 @@
-
-
- 下列信息实时更新,可
- 点击刷新
-
-
+
+
+
+
+
+
@@ -58,6 +64,11 @@
loading-text="加载中..."
/>
+
+
+
+ {{ bottomButtonText }}
+
@@ -80,22 +91,32 @@ export default {
CommonEnum,
loading: false,
searchKeyword: '',
+ // 页面状态：'active' 或 'completed'
+ pageStatus: 'active',
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' }
- ]
+ donationList: []
}
},
- 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
- // const response = await getDonationRecords()
- // 模拟加载
- setTimeout(() => {
- this.loading = false
- }, 1000)
+ // 模拟API调用
+ await new Promise(resolve => setTimeout(resolve, 1000))
+
+ // 模拟数据
+ const mockData = [
+ { 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: 40rpx;
+ padding-bottom: 120rpx; /* 为底部按钮留出空间 */
+ 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 20rpx;
-
+ padding: 28rpx 15rpx;
}
.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;
+}
\ No newline at end of file