buddhism/pages/test/simple-loading-demo.vue

<template>
  <view class="simple-loading-demo">
    <view class="demo-section">
      <text class="section-title">简化Loading使用示例</text>
      <text class="description">现在所有API调用都会自动显示loading，无需手动管理</text>

      <button @click="testAutoLoading" class="demo-btn">测试自动Loading</button>
      <button @click="testNoLoading" class="demo-btn">测试无Loading</button>
      <button @click="testMultipleRequests" class="demo-btn">测试多个请求</button>
    </view>

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

<script>
  import { get } from '@/utils/request.js'

  export default {
    data() {
      return {
        testResult: '',
      }
    },
    methods: {
      // 测试自动loading（默认行为）
      async testAutoLoading() {
        try {
          this.testResult = '正在测试自动loading...'
          // 这个请求会自动显示loading
          const result = await get('/app/monk/listMonk', { pageNum: 1, pageSize: 5 })
          this.testResult = `自动loading测试成功:\n${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `自动loading测试失败: ${error.message}`
        }
      },

      // 测试无loading
      async testNoLoading() {
        try {
          this.testResult = '正在测试无loading...'
          // 这个请求不会显示loading
          const result = await get(
            '/app/monk/listMonk',
            { pageNum: 1, pageSize: 5 },
            {
              showLoading: false,
            }
          )
          this.testResult = `无loading测试成功:\n${JSON.stringify(result, null, 2)}`
        } catch (error) {
          this.testResult = `无loading测试失败: ${error.message}`
        }
      },

      // 测试多个并发请求
      async testMultipleRequests() {
        try {
          this.testResult = '正在测试多个并发请求...'

          // 同时发起多个请求，loading会智能管理
          const promises = [
            get('/app/monk/listMonk', { pageNum: 1, pageSize: 3 }),
            get('/app/formed/listFormed', { pageNum: 1, pageSize: 3 }),
            get('/app/donor/listDonor', { formedId: '1', pageNum: 1, pageSize: 3 }),
          ]

          const results = await Promise.all(promises)
          this.testResult = `多个请求测试成功:\n${JSON.stringify(results, null, 2)}`
        } catch (error) {
          this.testResult = `多个请求测试失败: ${error.message}`
        }
      },
    },
  }
</script>

<style lang="scss">
  .simple-loading-demo {
    padding: 40rpx;
  }

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

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

  .description {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
    display: block;
    line-height: 1.5;
  }

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