From 712460bf5a989409e25b716ae598418d576c2b35 Mon Sep 17 00:00:00 2001 From: minimaxagent1 Date: Fri, 1 Aug 2025 10:50:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8D=90=E6=AC=BE=E8=AE=B0=E5=BD=95=E9=9D=99?= =?UTF-8?q?=E6=80=81=E7=95=8C=E9=9D=A22.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../institutionalStructure/donationRecord.vue | 195 ++++++++++++++---- 1 file changed, 158 insertions(+), 37 deletions(-) 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