buddhism/pages/test/loading-manager-test.vue

<template>
  <view class="loading-manager-test">
    <view class="test-section">
      <text class="section-title">Loading管理器测试</text>
      <text class="description">测试抽离后的Loading管理器功能</text>

      <button @click="testBasicLoading" class="test-btn">基础Loading测试</button>
      <button @click="testConcurrentLoading" class="test-btn">并发请求测试</button>
      <button @click="testCustomConfig" class="test-btn">自定义配置测试</button>
      <button @click="testStatusMonitoring" class="test-btn">状态监控测试</button>
      <button @click="testPageLoading" class="test-btn">页面Loading测试</button>
      <button @click="testErrorHandling" class="test-btn">错误处理测试</button>
      <button @click="testCompleteWorkflow" class="test-btn">完整流程测试</button>
    </view>

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

<script>
  import { loadingExamples } from '@/utils/loading-example.js'

  export default {
    data() {
      return {
        testResult: '',
      }
    },
    methods: {
      // 基础Loading测试
      testBasicLoading() {
        this.testResult = '正在测试基础Loading...'
        loadingExamples.basicLoadingExample()
        setTimeout(() => {
          this.testResult = '基础Loading测试完成，请查看控制台'
        }, 3000)
      },

      // 并发请求测试
      testConcurrentLoading() {
        this.testResult = '正在测试并发请求Loading...'
        loadingExamples.concurrentLoadingExample()
        setTimeout(() => {
          this.testResult = '并发请求测试完成，请查看控制台'
        }, 3000)
      },

      // 自定义配置测试
      testCustomConfig() {
        this.testResult = '正在测试自定义配置...'
        loadingExamples.customConfigExample()
        setTimeout(() => {
          this.testResult = '自定义配置测试完成，请查看控制台'
        }, 4000)
      },

      // 状态监控测试
      testStatusMonitoring() {
        this.testResult = '正在测试状态监控...'
        loadingExamples.statusMonitoringExample()
        setTimeout(() => {
          this.testResult = '状态监控测试完成，请查看控制台'
        }, 3000)
      },

      // 页面Loading测试
      testPageLoading() {
        this.testResult = '正在测试页面Loading...'
        loadingExamples.pageLoadingExample()
        setTimeout(() => {
          this.testResult = '页面Loading测试完成，请查看控制台'
        }, 4000)
      },

      // 错误处理测试
      testErrorHandling() {
        this.testResult = '正在测试错误处理...'
        loadingExamples.errorHandlingExample()
        setTimeout(() => {
          this.testResult = '错误处理测试完成，请查看控制台'
        }, 2000)
      },

      // 完整流程测试
      testCompleteWorkflow() {
        this.testResult = '正在测试完整流程...'
        loadingExamples.completeWorkflowExample()
        setTimeout(() => {
          this.testResult = '完整流程测试完成，请查看控制台'
        }, 4000)
      },
    },
  }
</script>

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

  .test-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;
  }

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