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%'"
          :search-icon="CommonEnum.SEARCH"
          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>
      <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";

export default {
  components: {
    CustomNavbar,
    TileGrid,
    StatusDisplay,
    SearchBox
  },
  data() {
    return {
      CommonEnum,
      loading: false,
      searchKeyword: ''
    }
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadDonationRecords()
  },
  methods: {
    onSearch(val) {
      // 搜索逻辑
      console.log('搜索内容：', val)
    },
    onFilter() {
      // 筛选逻辑
      uni.showToast({ title: '筛选功能开发中', icon: 'none' })
    },
    // 加载捐款记录
    async loadDonationRecords() {
      this.loading = true
      try {
        // TODO: 调用捐款记录API
        // const response = await getDonationRecords()
        // 模拟加载
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } catch (error) {
        console.error('获取捐款记录失败:', error)
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background: #F5F0E7;
}
.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 15rpx;
  padding-bottom: 40rpx;
}
.search-filter-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 0 32rpx 0;
}
.search-filter-row search-box {
  flex: 1;
}
.filter-btn {
  display: flex;
  align-items: center;
  margin-left: 24rpx;
  padding: 0 12rpx;
  height: 70rpx;
  border-radius: 10rpx;
  cursor: pointer;
}
.filter-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}
.filter-text {
  color: #6B4A1B;
  font-size: 28rpx;
}
</style>