CRMEB_Uniapp/pages/legou/index.vue

<template>
	<view class="container">
		<view class="header">
			<text class="title">乐购</text>
		</view>
		
		<view class="content">
			<view class="placeholder">
				<text class="placeholder-text">🛍️</text>
				<text class="placeholder-title">乐购专区</text>
				<text class="placeholder-desc">精选商品，快乐购物...</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { requireAuth, PROTECTED_ACTIONS } from '@/utils/auth.js'
	
	export default {
		name: 'Legou',
		onLoad() {
			console.log('乐购页面加载')
		},
		onShow() {
			// 乐购页面需要登录权限，无论是否登录都进行权限检查
			this.checkAuthAccess()
			// 更新自定义tabBar选中状态
			this.updateTabBar()
		},
		methods: {
			// 更新tabBar选中状态
			updateTabBar() {
				try {
					if (typeof this.getTabBar === 'function' && this.getTabBar()) {
						this.getTabBar().updateSelected(2) // 乐购索引为2
					}
				} catch (error) {
					console.log('更新tabBar状态失败:', error)
				}
			},
			
			checkAuthAccess() {
				requireAuth(() => {
					console.log('用户已登录，可以访问乐购')
				}, {
					action: PROTECTED_ACTIONS.VIEW_LEGOU,
					message: '访问乐购页面需要先登录'
				})
			}
		}
	}
</script>

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

.header {
	padding: 30rpx 0;
	text-align: center;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.content {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}

.placeholder {
	text-align: center;
	padding: 60rpx;
	
	.placeholder-text {
		font-size: 120rpx;
		display: block;
		margin-bottom: 30rpx;
	}
	
	.placeholder-title {
		font-size: 32rpx;
		color: #FF6600;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.placeholder-desc {
		font-size: 28rpx;
		color: #666;
		display: block;
	}
}
</style>