buddhism/pages/test/data-structure-test.vue

<template>
  <view class="data-structure-test-page">
    <view class="test-section">
      <text class="section-title">数据结构测试</text>
      <button @click="testStandardStructure" class="test-btn">测试标准结构</button>
      <button @click="testAlternativeStructure" class="test-btn">测试备用结构</button>
      <button @click="testInvalidStructure" class="test-btn">测试无效结构</button>
    </view>

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

<script>
  export default {
    data() {
      return {
        testResult: '',
      }
    },
    methods: {
      // 模拟标准数据结构：response.data.list.rows
      testStandardStructure() {
        const mockResponse = {
          code: 200,
          msg: '操作成功',
          data: {
            donorCount: 3,
            proProfile: '简介',
            list: {
              total: 2,
              rows: [
                {
                  id: '13',
                  formedId: '5',
                  realName: '吴键辉',
                  amount: 100.1,
                  donationDate: '2025-07-23 00:00:00',
                },
                {
                  id: '14',
                  formedId: '5',
                  realName: '张三',
                  amount: 200.5,
                  donationDate: '2025-07-24 00:00:00',
                },
              ],
            },
          },
        }

        this.parseDataStructure(mockResponse, '标准结构测试')
      },

      // 模拟备用数据结构：response.data 直接是数组
      testAlternativeStructure() {
        const mockResponse = {
          code: 200,
          msg: '操作成功',
          data: [
            {
              id: '13',
              formedId: '5',
              realName: '李四',
              amount: 150.0,
              donationDate: '2025-07-25 00:00:00',
            },
          ],
        }

        this.parseDataStructure(mockResponse, '备用结构测试')
      },

      // 模拟无效数据结构
      testInvalidStructure() {
        const mockResponse = {
          code: 200,
          msg: '操作成功',
          data: {
            someOtherField: '不是数组',
          },
        }

        this.parseDataStructure(mockResponse, '无效结构测试')
      },

      // 解析数据结构的通用方法
      parseDataStructure(response, testName) {
        this.testResult = `${testName}开始...\n`
        this.testResult += `原始响应: ${JSON.stringify(response, null, 2)}\n\n`

        if (response.code === 200) {
          let dataArray = []

          const structureInfo = {
            hasData: !!response.data,
            hasDataList: !!(response.data && response.data.list),
            hasDataListRows: !!(response.data && response.data.list && response.data.list.rows),
            dataIsArray: Array.isArray(response.data),
            hasRows: !!response.rows,
            rowsIsArray: Array.isArray(response.rows),
          }

          this.testResult += `数据结构分析: ${JSON.stringify(structureInfo, null, 2)}\n\n`

          if (response.data && response.data.list && response.data.list.rows) {
            dataArray = response.data.list.rows
            this.testResult += '✅ 使用标准结构: response.data.list.rows\n'
          } else if (response.data && Array.isArray(response.data)) {
            dataArray = response.data
            this.testResult += '✅ 使用备用结构: response.data\n'
          } else if (response.rows && Array.isArray(response.rows)) {
            dataArray = response.rows
            this.testResult += '✅ 使用备用结构: response.rows\n'
          } else {
            this.testResult += '❌ 无法找到数据数组\n'
            return
          }

          this.testResult += `✅ 成功解析数据，共 ${dataArray.length} 条记录\n`
          this.testResult += `数据内容: ${JSON.stringify(dataArray, null, 2)}\n`
        } else {
          this.testResult += `❌ API响应失败: ${response.msg}\n`
        }
      },
    },
  }
</script>

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

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

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

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