buddhism/pages/test/donation-test.vue

<template>
  <view class="donation-test-page">
    <view class="test-section">
      <text class="section-title">捐款记录API测试</text>
      <input v-model="formedId" placeholder="请输入建制ID" class="input-field" />
      <button @click="testDonorList" class="test-btn">测试捐款记录API</button>
      <button @click="testInstitutionalDetail" class="test-btn">测试项目详情API</button>
    </view>

    <view class="result-section">
      <text class="section-title">测试结果</text>
      <text class="result-text">{{ testResult }}</text>
    </view>
  </view>
</template>

<script>
  import { getDonorList } from '@/api/donor/donor.js'
  import { getInstitutionalDetail } from '@/api/institutionalStructure/institutionalStructureDetail.js'

  export default {
    data() {
      return {
        testResult: '',
        formedId: '1', // 默认测试ID
      }
    },
    methods: {
      async testDonorList() {
        try {
          this.testResult = '正在测试捐款记录API...'
          const params = {
            formedId: this.formedId,
            pageNum: 1,
            pageSize: 5,
          }
          const result = await getDonorList(params)
          this.testResult = `捐款记录API测试成功:\n${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `捐款记录API测试失败: ${error.message}`
        }
      },

      async testInstitutionalDetail() {
        try {
          this.testResult = '正在测试项目详情API...'
          const result = await getInstitutionalDetail(this.formedId)
          this.testResult = `项目详情API测试成功:\n${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `项目详情API测试失败: ${error.message}`
        }
      },
    },
  }
</script>

<style lang="scss">
  .donation-test-page {
    padding: 40rpx;
  }

  .test-section {
    margin-bottom: 40rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }

  .input-field {
    width: 100%;
    height: 80rpx;
    border: 1px solid #ccc;
    border-radius: 10rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
  }

  .test-btn {
    margin: 20rpx 0;
    padding: 20rpx;
    background-color: #007aff;
    color: white;
    border-radius: 10rpx;
  }

  .result-section {
    margin-top: 40rpx;
  }

  .result-text {
    font-size: 24rpx;
    color: #666;
    word-break: break-all;
    white-space: pre-wrap;
  }
</style>