520 lines
12 KiB
Vue
520 lines
12 KiB
Vue
<template>
|
|
<view class="page">
|
|
<custom-navbar title="捐款记录" />
|
|
<tile-grid />
|
|
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
|
|
<view class="search-filter-row">
|
|
<search-box
|
|
v-model="searchKeyword"
|
|
:width="'100%'"
|
|
btn-text="搜索"
|
|
placeholder="请输入搜索关键词"
|
|
@search="onSearch()"
|
|
/>
|
|
<view class="filter-btn" @click="show = true">
|
|
<image
|
|
:src="CommonEnum.FILTER"
|
|
class="filter-icon"
|
|
mode="aspectFit"
|
|
/>
|
|
<text class="filter-text">筛选</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 项目信息组件 -->
|
|
<project-info
|
|
:project-desc="projectInfo.proProfile"
|
|
:project-name="projectInfo.proName"
|
|
/>
|
|
|
|
<!-- 捐款统计组件 -->
|
|
<donation-summary
|
|
:participant-count="participantCount"
|
|
:total-amount="totalAmount"
|
|
/>
|
|
|
|
<!-- 捐款记录列表组件 -->
|
|
<donation-list :donation-list="dataList" />
|
|
|
|
<status-display v-if="loading" loading-text="加载中..." type="loading" />
|
|
</view>
|
|
|
|
<u-popup
|
|
v-model="show"
|
|
border-radius="30"
|
|
height="880rpx"
|
|
mode="bottom"
|
|
width="750rpx"
|
|
>
|
|
<view class="filterBox">
|
|
<view class="filterAll">全部筛选</view>
|
|
<u-icon class="filterClose" name="close" @click="show = false"></u-icon>
|
|
<view class="filterBody">
|
|
<view class="filterTag">金额排序</view>
|
|
<view class="custom-radio-group">
|
|
<view
|
|
:class="[
|
|
'custom-radio-button',
|
|
filter.orderAmount === 'desc' ? 'checked' : '',
|
|
]"
|
|
@click="changeorderAmount('desc')"
|
|
>
|
|
由高到低
|
|
</view>
|
|
<view
|
|
:class="[
|
|
'custom-radio-button',
|
|
filter.orderAmount === 'asc' ? 'checked' : '',
|
|
]"
|
|
@click="changeorderAmount('asc')"
|
|
>
|
|
由低到高
|
|
</view>
|
|
</view>
|
|
<view class="filterTag">时间排序</view>
|
|
<view class="custom-radio-group">
|
|
<view
|
|
:class="[
|
|
'custom-radio-button',
|
|
filter.orderTime === 'desc' ? 'checked' : '',
|
|
]"
|
|
@click="changeorderTime('desc')"
|
|
>
|
|
由远及近
|
|
</view>
|
|
<view
|
|
:class="[
|
|
'custom-radio-button',
|
|
filter.orderTime === 'asc' ? 'checked' : '',
|
|
]"
|
|
@click="changeorderTime('asc')"
|
|
>
|
|
由近及远
|
|
</view>
|
|
</view>
|
|
<view class="filterTag">捐款区间</view>
|
|
<template>
|
|
<view class="container">
|
|
<!-- 金额区间选择网格 -->
|
|
<view class="amount-grid">
|
|
<view
|
|
v-for="(item, index) in amountOptions"
|
|
:key="index"
|
|
:class="[
|
|
'amount-item',
|
|
selectedRange.key === item.key ? 'selected' : '',
|
|
]"
|
|
@click="selectRange(item)"
|
|
>
|
|
<text class="amount-text">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="[amount-text,customAmount]"
|
|
@click="selectedRange.key = 'custom'"
|
|
>
|
|
<view class="customItem">
|
|
<input
|
|
v-model="filter.minAmount"
|
|
placeholder="自定义最低"
|
|
type="number"
|
|
/>
|
|
</view>
|
|
-
|
|
<view class="customItem">
|
|
<input
|
|
v-model="filter.maxAmount"
|
|
placeholder="自定义最高"
|
|
type="number"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<view class="optionColumn">
|
|
<view class="reset">
|
|
<text>清空选择</text>
|
|
</view>
|
|
<view class="confirm" @click="filterSearch(filter)">
|
|
<text>确定</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
|
import TileGrid from "../../components/tile-grid/tile-grid.vue";
|
|
import CommonEnum from "../../enum/common";
|
|
import StatusDisplay from "../../components/status-display/status-display.vue";
|
|
import SearchBox from "../../components/search-box/search-box.vue";
|
|
import ProjectInfo from "./components/project-info.vue";
|
|
import DonationSummary from "./components/donation-summary.vue";
|
|
import DonationList from "./components/donation-list.vue";
|
|
import { donationMixin } from "./mixins/donation-mixin.js";
|
|
|
|
export default {
|
|
mixins: [donationMixin],
|
|
components: {
|
|
CustomNavbar,
|
|
TileGrid,
|
|
StatusDisplay,
|
|
SearchBox,
|
|
ProjectInfo,
|
|
DonationSummary,
|
|
DonationList,
|
|
},
|
|
data() {
|
|
return {
|
|
// 金额选项配置
|
|
amountOptions: [
|
|
{ key: "under100", label: "100元以下", min: 0, max: 100 },
|
|
{ key: "100to500", label: "100~500元", min: 100, max: 500 },
|
|
{ key: "501to1000", label: "501~1000元", min: 501, max: 1000 },
|
|
{ key: "over1000", label: "1000元以上", min: 1000, max: null },
|
|
],
|
|
|
|
// 当前选中的区间
|
|
selectedRange: {},
|
|
|
|
// 自定义金额输入
|
|
customMin: "",
|
|
customMax: "",
|
|
|
|
show: false,
|
|
|
|
filter: {
|
|
minAmount: "",
|
|
maxAmount: "",
|
|
orderAmount: "desc",
|
|
orderTime: "desc",
|
|
sortAmount: "amount",
|
|
sortTime: "time",
|
|
},
|
|
|
|
CommonEnum,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 获取页面参数
|
|
if (options.formedId) {
|
|
this.initData(options.formedId);
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
// 触底事件
|
|
|
|
this.loadMoreDonationRecords();
|
|
},
|
|
methods: {
|
|
changeorderAmount(order) {
|
|
this.filter.orderAmount = order;
|
|
console.log("当前选择的排序方式:", order);
|
|
// 触发排序操作
|
|
},
|
|
changeorderTime(order) {
|
|
this.filter.orderTime = order;
|
|
console.log("当前选择的排序方式:", order);
|
|
// 触发排序操作
|
|
},
|
|
// 选择金额区间
|
|
selectRange(item) {
|
|
this.selectedRange = { ...item };
|
|
|
|
// 更新筛选条件
|
|
if (item.key !== "custom" && item.key !== "customMax") {
|
|
this.filter.minAmount = item.min;
|
|
this.filter.maxAmount = item.max;
|
|
}
|
|
|
|
// 如果是自定义选项，初始化输入值
|
|
if (item.key === "custom") {
|
|
this.customMin = "";
|
|
this.customMax = "";
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f5f0e7;
|
|
}
|
|
|
|
.filterBox {
|
|
position: relative;
|
|
|
|
.filterAll {
|
|
width: 750rpx;
|
|
height: 122rpx;
|
|
background: #fffbf5;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 40rpx;
|
|
color: #695347;
|
|
line-height: 122rpx;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.filterClose {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 50rpx;
|
|
}
|
|
|
|
.filterBody {
|
|
height: 618rpx;
|
|
background: #fff1dd;
|
|
padding: 20rpx;
|
|
|
|
.filterTag {
|
|
margin-left: 40rpx;
|
|
width: 96rpx;
|
|
height: 32rpx;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #c7a26d;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.custom-radio-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
justify-content: space-around;
|
|
|
|
.custom-radio-button {
|
|
margin: 0 20rpx;
|
|
flex: 1;
|
|
padding: 12rpx 24rpx;
|
|
background-color: #ffffff;
|
|
color: #333333;
|
|
text-align: center;
|
|
border: 1px solid #eee;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
/* 选中状态 */
|
|
.custom-radio-button.checked {
|
|
background-color: #c0a580;
|
|
color: #ffffff;
|
|
border-color: #c0a580;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
padding: 20rpx;
|
|
|
|
border-radius: 12rpx;
|
|
|
|
.customAmount {
|
|
background-color: #ffffff;
|
|
margin-top: 16rpx;
|
|
padding: 16rpx;
|
|
display: flex;
|
|
gap: 16rpx;
|
|
justify-content: center;
|
|
|
|
.customItem {
|
|
display: flex;
|
|
width: 327rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
input {
|
|
width: 150rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.amount-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16rpx;
|
|
|
|
.amount-item {
|
|
height: 80rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
border: 2rpx solid #eeeeee;
|
|
|
|
&.selected {
|
|
background-color: #c0a580;
|
|
border-color: #c0a580;
|
|
|
|
.amount-text {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.custom-hint {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
.amount-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.custom-hint {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-input-area {
|
|
margin-top: 20rpx;
|
|
padding: 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 8rpx;
|
|
|
|
.input-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
|
|
.input-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
width: 140rpx;
|
|
}
|
|
|
|
.amount-input {
|
|
flex: 1;
|
|
height: 60rpx;
|
|
border: 2rpx solid #ddd;
|
|
border-radius: 6rpx;
|
|
padding: 0 16rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-left: 12rpx;
|
|
width: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.optionColumn {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
margin-left: 34rpx;
|
|
width: 686rpx;
|
|
height: 90rpx;
|
|
|
|
border-radius: 13rpx 13rpx 13rpx 13rpx;
|
|
|
|
.reset {
|
|
width: 344rpx;
|
|
height: 90rpx;
|
|
background: #fff1dd;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 13rpx 0 0 13rpx;
|
|
|
|
text {
|
|
height: 50rpx;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #a24242;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
.confirm {
|
|
width: 344rpx;
|
|
height: 90rpx;
|
|
background: #a24242;
|
|
border-radius: 0 13rpx 13rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
text {
|
|
height: 50rpx;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #fff1dd;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
padding: 0 15rpx 0 15rpx;
|
|
}
|
|
|
|
.search-filter-row {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 10rpx 0 10rpx 0;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.search-filter-row search-box {
|
|
flex: 1;
|
|
}
|
|
|
|
.filter-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
padding: 0 16rpx;
|
|
height: 70rpx;
|
|
border-radius: 10rpx;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.filter-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.filter-text {
|
|
color: #6b4a1b;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|