ajy/code/ajyApp/pages/test-toast/test-toast.nvue

<template>
	<view class="page">
		<view class="header">
			<text class="title">Toast 组件测试</text>
		</view>

		<!-- 基础功能测试 -->
		<view class="section">
			<text class="section-title">基础功能测试</text>

			<view class="btn" @click="testSuccess">
				<text class="btn-text">测试 Success</text>
			</view>

			<view class="btn" @click="testError">
				<text class="btn-text">测试 Error</text>
			</view>

			<view class="btn" @click="testLoading">
				<text class="btn-text">测试 Loading (3秒后关闭)</text>
			</view>

			<view class="btn" @click="testText">
				<text class="btn-text">测试 纯文字</text>
			</view>
		</view>

		<!-- 全局事件测试（模拟HTTP模块调用） -->
		<view class="section">
			<text class="section-title">全局事件测试 (模拟HTTP调用)</text>

			<view class="btn btn-orange" @click="testGlobalSuccess">
				<text class="btn-text">uni.$emit Success</text>
			</view>

			<view class="btn btn-orange" @click="testGlobalError">
				<text class="btn-text">uni.$emit Error</text>
			</view>

			<view class="btn btn-orange" @click="testGlobalLoading">
				<text class="btn-text">uni.$emit Loading</text>
			</view>
		</view>

		<!-- HTTP 请求集成测试 -->
		<view class="section">
			<text class="section-title">HTTP 请求测试</text>

			<view class="btn btn-blue" @click="testHttpSuccess">
				<text class="btn-text">模拟成功请求 (带loading)</text>
			</view>

			<view class="btn btn-blue" @click="testHttpError">
				<text class="btn-text">模拟失败请求 (显示错误)</text>
			</view>

			<view class="btn btn-blue" @click="testHttpNoLoading">
				<text class="btn-text">模拟请求 (不显示loading)</text>
			</view>

			<view class="btn btn-blue" @click="testHttpConcurrent">
				<text class="btn-text">模拟并发请求 (loading计数)</text>
			</view>
		</view>

		<!-- toast 工具方法测试 -->
		<view class="section">
			<text class="section-title">toast.js 工具方法测试</text>

			<view class="btn btn-green" @click="testToastUtil">
				<text class="btn-text">import toast 调用</text>
			</view>
		</view>

		<!-- 结果展示 -->
		<view class="section" v-if="logs.length > 0">
			<text class="section-title">测试日志</text>
			<view v-for="(log, index) in logs" :key="index" class="log-item">
				<text class="log-text">{{ log }}</text>
			</view>
		</view>

		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import toast from '@/utils/toast.js'

export default {
	data() {
		return {
			logs: []
		}
	},
	methods: {
		addLog(msg) {
			const time = new Date().toLocaleTimeString()
			this.logs.unshift(`[${time}] ${msg}`)
			// 最多保留20条
			if (this.logs.length > 20) {
				this.logs = this.logs.slice(0, 20)
			}
		},

		// ===== 基础功能测试（通过 $refs 直接调用组件方法） =====
		testSuccess() {
			this.addLog('调用 this.$refs.ayToast.success')
			this.$refs.ayToast.success('操作成功！')
		},

		testError() {
			this.addLog('调用 this.$refs.ayToast.error')
			this.$refs.ayToast.error('操作失败！')
		},

		testLoading() {
			this.addLog('调用 this.$refs.ayToast.loading, 3秒后hide')
			this.$refs.ayToast.loading('加载中...')
			setTimeout(() => {
				this.$refs.ayToast.hide()
				this.addLog('loading 已关闭')
			}, 3000)
		},

		testText() {
			this.addLog('调用 this.$refs.ayToast.show (text)')
			this.$refs.ayToast.show({ type: 'text', title: '这是一条纯文字提示', duration: 2000 })
		},

		// ===== 全局事件测试 =====
		testGlobalSuccess() {
			this.addLog('uni.$emit ayToast:show (success)')
			uni.$emit('ayToast:show', {
				type: 'success',
				title: '全局事件-成功',
				duration: 2000
			})
		},

		testGlobalError() {
			this.addLog('uni.$emit ayToast:show (error)')
			uni.$emit('ayToast:show', {
				type: 'error',
				title: '全局事件-失败',
				duration: 2500
			})
		},

		testGlobalLoading() {
			this.addLog('uni.$emit ayToast:show (loading), 3秒后hide')
			uni.$emit('ayToast:show', {
				type: 'loading',
				title: '全局加载中...',
				duration: 0,
				mask: true
			})
			setTimeout(() => {
				uni.$emit('ayToast:hide')
				this.addLog('全局loading 已关闭')
			}, 3000)
		},

		// ===== HTTP 请求集成测试 =====
		testHttpSuccess() {
			this.addLog('发起模拟成功请求...')
			this._mockRequest(1500, true).then(res => {
				this.addLog(`请求成功: ${JSON.stringify(res)}`)
			}).catch(err => {
				this.addLog(`请求失败: ${err.message}`)
			})
		},

		testHttpError() {
			this.addLog('发起模拟失败请求...')
			this._mockRequest(1000, false).then(res => {
				this.addLog(`请求成功: ${JSON.stringify(res)}`)
			}).catch(err => {
				this.addLog(`请求失败: ${err.message}`)
			})
		},

		testHttpNoLoading() {
			this.addLog('发起请求(无loading)...')
			this._mockRequest(1000, true, false).then(res => {
				this.addLog(`请求成功(无loading): ${JSON.stringify(res)}`)
			}).catch(err => {
				this.addLog(`请求失败: ${err.message}`)
			})
		},

		testHttpConcurrent() {
			this.addLog('发起3个并发请求...')
			const p1 = this._mockRequest(1000, true)
			const p2 = this._mockRequest(2000, true)
			const p3 = this._mockRequest(3000, true)
			Promise.all([p1, p2, p3]).then(() => {
				this.addLog('3个并发请求全部完成')
			})
		},

		// ===== toast.js 工具方法测试 =====
		testToastUtil() {
			this.addLog('调用 toast.success (import方式)')
			toast.success('通过 import toast 调用')
		},

		// ===== 模拟HTTP请求 =====
		_mockRequest(delay = 1500, success = true, showLoading = true) {
			if (showLoading) {
				toast.loading('请求中...')
			}

			return new Promise((resolve, reject) => {
				setTimeout(() => {
					if (showLoading) {
						toast.hide()
					}

					if (success) {
						toast.success('请求成功')
						resolve({ code: 200, data: { id: 1, name: '测试数据' } })
					} else {
						toast.error('网络错误，请重试')
						reject(new Error('模拟网络错误'))
					}
				}, delay)
			})
		}
	}
}
</script>

<style scoped>
.page {
	padding-top: 40rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 60rpx;
	/* #ifndef APP-NVUE */
	min-height: 100vh;
	/* #endif */
	background-color: #f5f5f5;
}

.header {
	padding-top: 40rpx;
	padding-bottom: 40rpx;
	align-items: center;
	/* #ifndef APP-NVUE */
	display: flex;
	justify-content: center;
	/* #endif */
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.section {
	margin-bottom: 40rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #666666;
	margin-bottom: 20rpx;
}

.btn {
	background-color: #389588;
	border-radius: 12rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	margin-top: 16rpx;
	align-items: center;
	/* #ifndef APP-NVUE */
	display: flex;
	justify-content: center;
	/* #endif */
}

.btn-orange {
	background-color: #e6a23c;
}

.btn-blue {
	background-color: #409eff;
}

.btn-green {
	background-color: #67c23a;
}

.btn-text {
	color: #ffffff;
	font-size: 28rpx;
}

.log-item {
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: #eeeeee;
}

.log-text {
	font-size: 22rpx;
	color: #999999;
}
</style>