buddhism/pages/institutionalStructure/donationRecord.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"></u-icon>
        <view class="filterBody">
          <view class="filterTag">金额排序</view>
          <view class="custom-radio-group">
            <view
              :class="[
                'custom-radio-button',
                filter.sortAmount === 'desc' ? 'checked' : '',
              ]"
              @click="changeSortAmount('desc')"
            >
              由高到低
            </view>
            <view
              :class="[
                'custom-radio-button',
                filter.sortAmount === 'asc' ? 'checked' : '',
              ]"
              @click="changeSortAmount('asc')"
            >
              由低到高
            </view>
          </view>
          <view class="filterTag">时间排序</view>
          <view class="custom-radio-group">
            <view
              :class="[
                'custom-radio-button',
                filter.sortTime === 'desc' ? 'checked' : '',
              ]"
              @click="changeSortTime('desc')"
            >
              由远及近
            </view>
            <view
              :class="[
                'custom-radio-button',
                filter.sortTime === 'asc' ? 'checked' : '',
              ]"
              @click="changeSortTime('asc')"
            >
              由近及远
            </view>
          </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";

export default {
  mixins: [donationMixin],
  components: {
    CustomNavbar,
    TileGrid,
    StatusDisplay,
    SearchBox,
    ProjectInfo,
    DonationSummary,
    DonationList,
  },
  data() {
    return {
      show: true,

      filter: {
        sortAmount: "desc",
        sortTime: "desc",
      },

      CommonEnum,
    };
  },
  onLoad(options) {
    // 获取页面参数
    if (options.formedId) {
      this.initData(options.formedId);
    }
  },
  methods: {
    changeSortAmount(order) {
      this.filter.sortAmount = order;
      console.log("当前选择的排序方式:", order);
      // 触发排序操作
    },
    changeSortTime(order) {
      this.filter.sortTime = order;
      console.log("当前选择的排序方式:", order);
      // 触发排序操作
    },
  },
};
</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 {
      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;
      background-color: #f8f4e9;
      padding: 10px;
      border-radius: 8px;
      justify-content: space-around;

      .custom-radio-button {
        margin: 0 20rpx;
        flex: 1;
        padding: 12px 24px;
        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;
      }
    }
  }
}

.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>