捐款记录静态界面
This commit is contained in:
minimaxagent1
parent
e93140ebd6
commit
773a1371d3
|
|
@ -6,7 +6,8 @@ export const CommonEnum = {
|
|||
BASE_COLOR:"#FAF8F3", //基调颜色
|
||||
SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //通用搜索图标
|
||||
TILE: "https://api.ccttiot.com/image-1753750309203.png", //瓦片图片
|
||||
FILTER: "https://api.ccttiot.com/image-1753954149098.png" //筛选图标
|
||||
FILTER: "https://api.ccttiot.com/image-1753954149098.png", //筛选图标
|
||||
REFRESH:"https://api.ccttiot.com/%E5%AE%B9%E5%99%A8-1754011714179.png" //刷新图标
|
||||
|
||||
};
|
||||
export default CommonEnum;
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
<search-box
|
||||
v-model="searchKeyword"
|
||||
:width="'100%'"
|
||||
:search-icon="CommonEnum.SEARCH"
|
||||
placeholder="请输入搜索关键词"
|
||||
btn-text="搜索"
|
||||
@search="onSearch"
|
||||
|
|
@ -17,12 +16,47 @@
|
|||
<text class="filter-text">筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 捐款统计区域 -->
|
||||
<view class="donation-summary">
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">当前筹款金额(元)</text>
|
||||
<text class="summary-value">{{ totalAmount.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">参与捐款人次</text>
|
||||
<text class="summary-value">{{ participantCount.toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 刷新提示 -->
|
||||
<view class="refresh-tip" @click="refreshData">
|
||||
<text class="tip-text">下列信息实时更新,可</text>
|
||||
<text class="refresh-text">点击刷新</text>
|
||||
<image class="refresh-icon" :src="CommonEnum.REFRESH" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 捐款记录列表 -->
|
||||
<view class="donation-list">
|
||||
<view class="list-header">
|
||||
<text class="header-item">编号</text>
|
||||
<text class="header-item">姓名</text>
|
||||
<text class="header-item">捐款金额(元)</text>
|
||||
<text class="header-item">捐款时间</text>
|
||||
</view>
|
||||
<view class="list-item" v-for="(item, index) in donationList" :key="index">
|
||||
<text class="item-id">{{ item.id }}</text>
|
||||
<text class="item-name">{{ item.name }}</text>
|
||||
<text class="item-amount">{{ item.amount.toLocaleString() }}</text>
|
||||
<text class="item-time">{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<status-display
|
||||
v-if="loading"
|
||||
type="loading"
|
||||
loading-text="加载中..."
|
||||
/>
|
||||
<!-- 捐款记录内容将在这里添加 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -45,7 +79,20 @@ export default {
|
|||
return {
|
||||
CommonEnum,
|
||||
loading: false,
|
||||
searchKeyword: ''
|
||||
searchKeyword: '',
|
||||
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' }
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -61,6 +108,10 @@ export default {
|
|||
// 筛选逻辑
|
||||
uni.showToast({ title: '筛选功能开发中', icon: 'none' })
|
||||
},
|
||||
refreshData() {
|
||||
// 刷新数据
|
||||
this.loadDonationRecords()
|
||||
},
|
||||
// 加载捐款记录
|
||||
async loadDonationRecords() {
|
||||
this.loading = true
|
||||
|
|
@ -90,7 +141,7 @@ page {
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
.search-filter-row {
|
||||
|
|
@ -98,7 +149,8 @@ page {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 0 32rpx 0;
|
||||
margin: 10rpx 0 10rpx 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.search-filter-row search-box {
|
||||
flex: 1;
|
||||
|
|
@ -106,8 +158,8 @@ page {
|
|||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24rpx;
|
||||
padding: 0 12rpx;
|
||||
margin-left: 20rpx;
|
||||
padding: 0 16rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 10rpx;
|
||||
cursor: pointer;
|
||||
|
|
@ -121,4 +173,123 @@ page {
|
|||
color: #6B4A1B;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
// 捐款统计区域
|
||||
.donation-summary {
|
||||
width: 100%;
|
||||
background: #C7A26D;
|
||||
padding: 40rpx 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.summary-item:first-child::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1rpx;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
}
|
||||
.summary-label {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.summary-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 刷新提示
|
||||
.refresh-tip {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
cursor: pointer;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
.tip-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.refresh-text {
|
||||
color: #E74C3C;
|
||||
font-size: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.refresh-icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
padding-bottom: 1rpx;
|
||||
}
|
||||
|
||||
// 捐款记录列表
|
||||
.donation-list {
|
||||
width: 100%;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.list-header {
|
||||
display: flex;
|
||||
|
||||
padding: 28rpx 20rpx;
|
||||
|
||||
}
|
||||
.header-item {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #B3B7B5;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.list-item {
|
||||
display: flex;
|
||||
padding: 28rpx 20rpx;
|
||||
}
|
||||
.list-item:hover {
|
||||
background: #FAFAFA;
|
||||
}
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.item-id, .item-name, .item-amount, .item-time {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.item-id {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
.item-name {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.item-amount {
|
||||
color: #E74C3C;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item-time {
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user