<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>
				<button class="go-shopping-btn" @click="goShopping">
					去购物
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	// 移除权限检查，游客可正常访问购物车页面
	
	export default {
		name: 'Cart',
		onLoad() {
			console.log('购物车页面加载')
		},
		onShow() {
			// 更新自定义tabBar选中状态
			this.updateTabBar()
		},
		methods: {
			// 更新tabBar选中状态
			updateTabBar() {
				try {
					if (typeof this.getTabBar === 'function' && this.getTabBar()) {
						this.getTabBar().updateSelected(3) // 购物车索引为3
					}
				} catch (error) {
					console.log('更新tabBar状态失败:', error)
				}
			},
			
			// 移除权限检查方法，游客可正常访问购物车页面
			
			goShopping() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</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: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.placeholder-desc {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 40rpx;
	}
	
	.go-shopping-btn {
		background: #FF6600;
		color: white;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		
		&:active {
			background: #E55A00;
			transform: scale(0.98);
		}
	}
}
</style>
