buddhism/pages/personalCenter/myDonationList.vue

<template>
  <view class="page">
    <custom-navbar ref="customNavbar" title="捐赠记录" />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <template>
        <view class="donation-container">
          <!-- 标题区域 -->
          <!--          <view class="donation-header">-->
          <!--            <text class="header-subtitle"-->
          <!--              >共{{ donationList.length }}笔捐赠-->
          <!--            </text>-->
          <!--          </view>-->

          <!-- 捐赠列表 -->
          <view class="donation-list">
            <view
              v-for="(item, index) in winB_List"
              :key="index"
              class="donation-item"
              @click="goToFormed(item.formedId)"
            >
              <view class="item-icon">
                <image :src="item.imgUrl" mode="widthFix" />
              </view>

              <!-- 中间内容 -->
              <view class="item-content">
                <text class="amount">捐赠{{ item.amount }}元</text>
                <text class="project">助力【{{ item.proName }}】</text>
                <text class="time">{{ item.createTime }}</text>
              </view>

              <!-- 右侧箭头 -->
              <!--              <view class="item-arrow">-->
              <!--                <image-->
              <!--                  class="arrow-image"-->
              <!--                  mode="aspectFit"-->
              <!--                  src="/static/images/right-arrow.png"-->
              <!--                />-->
              <!--              </view>-->

              <!-- 分割线 -->
              <view
                v-if="index < winB_List.length - 1"
                class="item-divider"
              ></view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <!-- 捐赠弹窗 -->
  </view>
</template>

<script>
import { createPagination } from "../../composables/winB_Pagination";
import { getUserDonorList } from "../../api/donor/donor";

export default {
  data() {
    return {};
  },
  mixins: [
    createPagination({
      fetchData: getUserDonorList,
      mode: "loadMore",
      pageSize: 10,
      autoLoad: false, // 设置为 false，不自动加载
    }),
  ],
  onLoad() {
    // 页面加载时获取数据
    this.winB_GetList();
  },
  methods: {
    goToFormed(formedId) {
      console.log(formedId);
      uni.navigateTo({
        url: `/pages/institutionalStructure/donationRecord?formedId=${formedId}`,
      });
    },
  },
  onReachBottom() {
    this.winB_LoadMore();
    console.log("加载更多");
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f5f0e7;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 15rpx;
}

.donation-container {
  padding: 30rpx;
  //background-color: #f5f5f5;
  min-height: 100vh;
  width: 100%;
}

.donation-header {
  margin-bottom: 40rpx;
  text-align: center;

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }

  .header-subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.donation-list {
  //background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.donation-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30rpx;
  //background-color: #fff;

  .item-icon {
    width: 160rpx;

    margin-right: 24rpx;
    background-color: #f0f0f0;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-image {
    }
  }

  .item-content {
    flex: 1;

    .amount {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }

    .project {
      font-size: 28rpx;
      color: #666;
      display: block;
      margin-bottom: 8rpx;
    }

    .time {
      font-size: 24rpx;
      color: #999;
      display: block;
    }
  }

  .item-arrow {
    width: 40rpx;
    height: 40rpx;

    .arrow-image {
      width: 100%;
      height: 100%;
      opacity: 0.5;
    }
  }

  .item-divider {
    position: absolute;
    bottom: 0;
    left: 134rpx; // 80 + 24 + 30
    right: 30rpx;
    height: 1rpx;
    background-color: #eee;
  }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .donation-container {
    padding: 20rpx;
  }

  .donation-item {
    padding: 24rpx;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .donation-container {
    background-color: #1a1a1a;
  }

  .donation-list {
    background-color: #2d2d2d;
  }

  .donation-item {
    background-color: #2d2d2d;

    .item-icon {
      background-color: #3d3d3d;
    }

    .amount {
      color: #fff !important;
    }

    .project {
      color: #ccc !important;
    }

    .time {
      color: #888 !important;
    }

    .item-divider {
      background-color: #444 !important;
    }
  }
}
</style>