捐款记录静态界面3.0

This commit is contained in:
minimaxagent1 2025-08-01 11:27:53 +08:00
parent 712460bf5a
commit eca711d745
2 changed files with 20 additions and 89 deletions

View File

@ -60,7 +60,7 @@ export default {
### 同时自定义图片和数量
```vue
<template>
<tile-grid :tile-count="8" :tile-image="customTileImage" />
<tile-grid :tile-count="8" :tile-image="customTileImage" />
</template>
```

View File

@ -20,13 +20,13 @@
<!-- 项目描述 -->
<view class="project-info">
<text class="project-title">始建"乾峰寺"(初建)</text>
<text class="project-desc">天王殿为"三门"内第一殿正中供奉弥勒菩萨弥勒菩萨背后供奉韦驮菩萨东西两侧为四大天王面阔五间采用歇 山式重檐建筑装饰剪瓷具有浓厚的南方特色使殿堂显得极其庄严肃穆四大天王像于1981年重塑时采用国家级"非遗"漆线雕工艺装饰此殿于19 25年重修2020年重建</text>
<text class="project-desc">天王殿为"三门"内第一殿正中供奉弥勒菩萨弥勒菩萨背后供奉韦驮菩萨东西两侧为四大天王面阔五间采用歇山式重檐建筑装饰剪瓷具有浓厚的南方特色使殿堂显得极其庄严肃穆四大天王像于1981年重塑时采用国家级"非遗"漆线雕工艺装饰此殿于1925年重修2020年重建</text>
</view>
<!-- 捐款统计区域 -->
<view class="donation-summary" :class="{ 'completed': isCompleted }">
<view class="donation-summary">
<view class="summary-item">
<text class="summary-label">{{ amountLabel }}</text>
<text class="summary-label">总造价()</text>
<text class="summary-value">{{ totalAmount.toLocaleString() }}</text>
</view>
<view class="summary-item">
@ -64,11 +64,6 @@
loading-text="加载中..."
/>
</view>
<!-- 底部固定按钮 -->
<view class="bottom-button" :class="{ 'completed': isCompleted }" @click="handleBottomAction">
<text class="button-text">{{ bottomButtonText }}</text>
</view>
</view>
</template>
@ -91,32 +86,20 @@ export default {
CommonEnum,
loading: false,
searchKeyword: '',
// 'active' 'completed'
pageStatus: 'active',
totalAmount: 28040062,
participantCount: 9062,
donationList: []
}
},
computed: {
//
isCompleted() {
return this.pageStatus === 'completed'
//
totalAmount() {
return this.donationList.reduce((sum, item) => sum + item.amount, 0)
},
//
amountLabel() {
return this.isCompleted ? '总造价(元)' : '当前筹款金额(元)'
},
//
bottomButtonText() {
return this.isCompleted ? '募捐结束' : '我要捐助'
//
participantCount() {
return this.donationList.length
}
},
onLoad(options) {
//
if (options.status) {
this.pageStatus = options.status
}
onLoad() {
//
this.loadDonationRecords()
},
@ -130,26 +113,6 @@ export default {
//
uni.showToast({ title: '筛选功能开发中', icon: 'none' })
},
refreshData() {
//
this.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
@ -160,14 +123,14 @@ export default {
//
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' }
{ id: 8, name: '李小明', amount: 500, time: '2025/03/09' },
{ id: 7, name: '王大力', amount: 2000, time: '2025/03/01' },
{ id: 6, name: '赵美丽', amount: 800, time: '2025/02/27' },
{ id: 5, name: '刘志强', amount: 1500, time: '2025/02/27' },
{ id: 4, name: '陈小红', amount: 1200, time: '2025/02/24' },
{ id: 3, name: '杨建国', amount: 3000, time: '2025/02/12' },
{ id: 2, name: '孙丽华', amount: 600, time: '2025/02/08' },
{ id: 1, name: '周志明', amount: 2500, time: '2025/02/01' }
]
//
@ -204,7 +167,6 @@ page {
display: flex;
align-items: flex-start;
flex-direction: column;
padding-bottom: 120rpx; /* 为底部按钮留出空间 */
padding: 0 15rpx 0 15rpx;
}
.search-filter-row {
@ -241,8 +203,7 @@ page {
.project-info {
width: 100%;
padding: 24rpx 20rpx;
margin-bottom: 20rpx;
background: rgba(243,210,162,0);
background: #F3D2A3;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 2rpx solid #F3D2A2;
}
@ -267,23 +228,16 @@ page {
font-style: normal;
text-transform: none;
}
.project-desc:last-child {
margin-bottom: 0;
}
//
.donation-summary {
width: 100%;
padding: 40rpx 24rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.donation-summary.completed {
background: #E8D5B5;
}
.summary-item {
display: flex;
flex-direction: column;
@ -390,27 +344,4 @@ 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>