buddhism/pages/institutionalStructure/donationRecord.vue

<template>
  <view class="page">
    <custom-navbar title="捐款记录" />
    <tile-grid />
    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
      <view class="search-filter-row">
        <search-box
          v-model="searchKeyword"
          :width="'100%'"
          placeholder="请输入搜索关键词"
          btn-text="搜索"
          @search="onSearch"
        />
        <view class="filter-btn" @click="onFilter">
          <image class="filter-icon" :src="CommonEnum.FILTER" mode="aspectFit" />
          <text class="filter-text">筛选</text>
        </view>
      </view>
      
      <!-- 项目信息组件 -->
      <project-info 
        :project-name="projectInfo.proName"
        :project-desc="projectInfo.proProfile"
      />
      
      <!-- 捐款统计组件 -->
      <donation-summary 
        :total-amount="totalAmount"
        :participant-count="participantCount"
      />
      
      <!-- 捐款记录列表组件 -->
      <donation-list :donation-list="donationList" />
      
      <status-display
        v-if="loading"
        type="loading"
        loading-text="加载中..."
      />
    </view>
  </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 {
      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;

  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>