捐款记录静态界面3.0
This commit is contained in:
parent
712460bf5a
commit
eca711d745
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user