全部筛选弹窗
This commit is contained in:
WindowBird
parent
6709d2415c
commit
f8b9fb4588
|
|
@ -2,110 +2,187 @@
|
|||
<view class="page">
|
||||
<custom-navbar title="捐款记录" />
|
||||
<tile-grid />
|
||||
<view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
|
||||
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
|
||||
<view class="search-filter-row">
|
||||
<search-box
|
||||
v-model="searchKeyword"
|
||||
:width="'100%'"
|
||||
placeholder="请输入搜索关键词"
|
||||
btn-text="搜索"
|
||||
placeholder="请输入搜索关键词"
|
||||
@search="onSearch"
|
||||
/>
|
||||
<view class="filter-btn" @click="onFilter">
|
||||
<image class="filter-icon" :src="CommonEnum.FILTER" mode="aspectFit" />
|
||||
<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-name="projectInfo.proName" :project-desc="projectInfo.proProfile" />
|
||||
<project-info
|
||||
:project-desc="projectInfo.proProfile"
|
||||
:project-name="projectInfo.proName"
|
||||
/>
|
||||
|
||||
<!-- 捐款统计组件 -->
|
||||
<donation-summary :total-amount="totalAmount" :participant-count="participantCount" />
|
||||
<donation-summary
|
||||
:participant-count="participantCount"
|
||||
:total-amount="totalAmount"
|
||||
/>
|
||||
|
||||
<!-- 捐款记录列表组件 -->
|
||||
<donation-list :donation-list="dataList" />
|
||||
|
||||
<status-display v-if="loading" type="loading" loading-text="加载中..." />
|
||||
<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"></u-icon>
|
||||
<view class="filterBody">
|
||||
<view class="filterTag">金额排序</view>
|
||||
<view class="filterTag">时间排序</view>
|
||||
<view class="filterTag">捐款区间</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'
|
||||
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 {
|
||||
CommonEnum,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 获取页面参数
|
||||
if (options.formedId) {
|
||||
this.initData(options.formedId)
|
||||
}
|
||||
},
|
||||
}
|
||||
export default {
|
||||
mixins: [donationMixin],
|
||||
components: {
|
||||
CustomNavbar,
|
||||
TileGrid,
|
||||
StatusDisplay,
|
||||
SearchBox,
|
||||
ProjectInfo,
|
||||
DonationSummary,
|
||||
DonationList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
CommonEnum,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
// 获取页面参数
|
||||
if (options.formedId) {
|
||||
this.initData(options.formedId);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f0e7;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
page {
|
||||
background: #f5f0e7;
|
||||
}
|
||||
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx 0 15rpx;
|
||||
.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;
|
||||
}
|
||||
.search-filter-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 10rpx 0 10rpx 0;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.filterClose {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50rpx;
|
||||
}
|
||||
.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;
|
||||
|
||||
.filterBody {
|
||||
height: 618rpx;
|
||||
background: #fff1dd;
|
||||
|
||||
.filterTag {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -155,9 +155,6 @@ export const donationMixin = {
|
|||
/**
|
||||
* 筛选功能
|
||||
*/
|
||||
onFilter() {
|
||||
uni.showToast({ title: "筛选功能开发中", icon: "none" });
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载更多捐款记录
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user