CRMEB_Uniapp/pages/test/auth-test.vue

<template>
	<view class="auth-test">
		<view class="header">
			<text class="title">权限测试页面</text>
			<text class="subtitle">测试4个核心动作的登录拦截</text>
		</view>
		
		<view class="test-section">
			<view class="section-title">测试4个核心动作</view>
			
			<view class="test-item" @click="testAddToCart">
				<text class="test-icon">🛒</text>
				<text class="test-text">测试：加入购物车</text>
				<text class="test-desc">商品详情页-加入购物车按钮</text>
			</view>
			
			<view class="test-item" @click="testBuyNow">
				<text class="test-icon">💰</text>
				<text class="test-text">测试：立即购买</text>
				<text class="test-desc">商品详情页-立即购买按钮</text>
			</view>
			
			<view class="test-item" @click="testMyPage">
				<text class="test-icon">👤</text>
				<text class="test-text">测试：我的页面</text>
				<text class="test-desc">点击"我的"tab</text>
			</view>
			
			<view class="test-item" @click="testLegou">
				<text class="test-icon">🛍️</text>
				<text class="test-text">测试：乐购页面</text>
				<text class="test-desc">点击"乐购"tab</text>
			</view>
		</view>
		
		<view class="status-section">
			<view class="section-title">当前状态</view>
			<view class="status-item">
				<text class="status-label">登录状态：</text>
				<text class="status-value" :class="{ 'logged-in': isLoggedIn, 'guest': !isLoggedIn }">
					{{ isLoggedIn ? '已登录' : '游客模式' }}
				</text>
			</view>
			<view class="status-item" v-if="isLoggedIn">
				<text class="status-label">用户信息：</text>
				<text class="status-value">{{ userInfo.phone || '未知' }}</text>
			</view>
		</view>
		
		<view class="action-section">
			<view class="section-title">操作</view>
			<button class="action-btn logout-btn" @click="handleLogout" v-if="isLoggedIn">
				退出登录
			</button>
			<button class="action-btn login-btn" @click="handleLogin" v-else>
				去登录
			</button>
		</view>
	</view>
</template>

<script>
	import { isLoggedIn, getUserInfo, requireAuth, PROTECTED_ACTIONS, clearUserData, navigateToLogin } from '@/utils/auth.js'
	
	export default {
		name: 'AuthTest',
		data() {
			return {
				isLoggedIn: false,
				userInfo: {}
			}
		},
		onLoad() {
			console.log('权限测试页面加载')
		},
		onShow() {
			this.checkLoginStatus()
		},
		methods: {
			checkLoginStatus() {
				this.isLoggedIn = isLoggedIn()
				if (this.isLoggedIn) {
					this.userInfo = getUserInfo() || {}
				}
			},
			
			// 测试加入购物车
			testAddToCart() {
				requireAuth(() => {
					uni.showToast({
						title: '✅ 已登录，可以加入购物车',
						icon: 'success'
					})
				}, {
					action: PROTECTED_ACTIONS.ADD_TO_CART,
					returnUrl: '/pages/test/auth-test'
				})
			},
			
			// 测试立即购买
			testBuyNow() {
				requireAuth(() => {
					uni.showToast({
						title: '✅ 已登录，可以立即购买',
						icon: 'success'
					})
				}, {
					action: PROTECTED_ACTIONS.BUY_NOW,
					returnUrl: '/pages/test/auth-test'
				})
			},
			
			// 测试我的页面
			testMyPage() {
				requireAuth(() => {
					uni.showToast({
						title: '✅ 已登录，可以访问我的页面',
						icon: 'success'
					})
				}, {
					action: PROTECTED_ACTIONS.VIEW_MY_PAGE,
					returnUrl: '/pages/test/auth-test'
				})
			},
			
			// 测试乐购页面
			testLegou() {
				requireAuth(() => {
					uni.showToast({
						title: '✅ 已登录，可以访问乐购页面',
						icon: 'success'
					})
				}, {
					action: PROTECTED_ACTIONS.VIEW_LEGOU,
					returnUrl: '/pages/test/auth-test'
				})
			},
			
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							clearUserData()
							this.checkLoginStatus()
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
						}
					}
				})
			},
			
			// 去登录
			handleLogin() {
				navigateToLogin('/pages/test/auth-test')
			}
		}
	}
</script>

<style lang="scss" scoped>
.auth-test {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx;
}

.header {
	text-align: center;
	padding: 40rpx 0;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 26rpx;
		color: #666;
	}
}

.test-section, .status-section, .action-section {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		padding-bottom: 10rpx;
	}
}

.test-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	
	&:last-child {
		border-bottom: none;
	}
	
	.test-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}
	
	.test-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-right: 20rpx;
	}
	
	.test-desc {
		font-size: 24rpx;
		color: #999;
		flex: 1;
	}
}

.status-item {
	display: flex;
	align-items: center;
	padding: 15rpx 0;
	
	.status-label {
		font-size: 28rpx;
		color: #666;
		width: 160rpx;
	}
	
	.status-value {
		font-size: 28rpx;
		font-weight: bold;
		
		&.logged-in {
			color: #28a745;
		}
		
		&.guest {
			color: #dc3545;
		}
	}
}

.action-btn {
	width: 100%;
	height: 80rpx;
	border: none;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: bold;
	
	&.logout-btn {
		background: #dc3545;
		color: #ffffff;
	}
	
	&.login-btn {
		background: #28a745;
		color: #ffffff;
	}
}
</style>