142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
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>
|