<template>
	<view class="vip-page" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh;">
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- VIP状态头部 -->
			<view class="vip-header">
				<view class="vip-crown">
					<text class="crown-icon">👑</text>
				</view>
				<text class="vip-title">{{ isVip ? 'VIP会员' : '成为VIP会员' }}</text>
				<text class="vip-subtitle">{{ isVip ? '尊享专属特权' : '解锁更多权益' }}</text>
				<view class="vip-status" :class="{ active: isVip }">
					<text class="status-text">{{ isVip ? 'VIP会员' : '普通用户' }}</text>
				</view>
			</view>

			<!-- 会员功能 -->
			<view class="features-section">
				<text class="section-title">会员功能</text>
				<view class="feature-card">
					<view class="feature-icon">💾</view>
					<text class="feature-text">永久存储数据</text>
				</view>
			</view>

			<!-- VIP状态信息 -->
			<view v-if="isVip" class="vip-info">
				<view class="info-card">
					<text class="info-label">会员状态</text>
					<text class="info-value active">已激活</text>
				</view>
				<view class="info-card">
					<text class="info-label">有效期至</text>
					<text class="info-value">{{ expireDisplay }}</text>
				</view>
			</view>

			<!-- 价格和购买 -->
			<view v-if="!isVip" class="purchase-section">
				<view class="price-card">
					<text class="price-label">会员价格</text>
					<view class="price-display">
						<text class="price-symbol">¥</text>
						<text class="price-amount">{{ price }}</text>
						<text class="price-period">/月</text>
					</view>
				</view>
				<button class="purchase-btn" @click="onPay">
					<text class="btn-text">立即开通VIP</text>
				</button>
			</view>
		</view>

		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
			<view class="decoration-circle circle-3"></view>
		</view>
	</view>
</template>

<script>
import { VIP_PRICE_PER_MONTH } from '../../common/config.js'

export default {
	data(){
		return {
			isVip: false,
			expire: '',
			price: VIP_PRICE_PER_MONTH
		}
	},
	onShow(){
		this.loadVip()
	},
	computed: {
		expireDisplay(){
			const s = String(this.expire || '')
			return s || '11年11月11日'
		}
	},
	methods: {
		loadVip(){
			try {
				this.isVip = String(uni.getStorageSync('USER_VIP_IS_VIP') || 'false').toLowerCase() === 'true'
				this.expire = uni.getStorageSync('USER_VIP_END') || ''
			} catch(e) {}
		},
		onPay(){
			uni.showToast({ title: '静态页面演示：支付功能未接入', icon: 'none' })
		}
	}
}
</script>

<style lang="scss">
page {
	background: #1a1a2e !important;
}

.vip-page {
	min-height: 100vh;
	width: 100%;
	position: relative;
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.main-content {
	flex: 1;
	padding: 60rpx 40rpx 40rpx;
	position: relative;
	z-index: 10;
}

/* VIP头部区域 */
.vip-header {
	text-align: center;
	margin-bottom: 80rpx;
	
	.vip-crown {
		margin-bottom: 30rpx;
		
		.crown-icon {
			font-size: 80rpx;
			filter: drop-shadow(0 4rpx 12rpx rgba(255, 215, 0, 0.3));
		}
	}
	
	.vip-title {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: #fff;
		margin-bottom: 16rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.vip-subtitle {
		display: block;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 40rpx;
	}
	
	.vip-status {
		display: inline-block;
		padding: 16rpx 32rpx;
		border-radius: 50rpx;
		background: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 215, 0, 0.4);
		
		&.active {
			background: linear-gradient(45deg, #ffd700, #ffed4e);
			border: 1rpx solid rgba(255, 215, 0, 0.3);
			
			.status-text {
				color: #333;
			}
		}
		
		.status-text {
			font-size: 26rpx;
			font-weight: 600;
			color: #fff;
		}
	}
}

/* 会员功能区域 */
.features-section {
	margin-bottom: 60rpx;
	
	.section-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.feature-card {
		background: rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(15rpx);
		border-radius: 24rpx;
		padding: 40rpx;
		text-align: center;
		border: 1rpx solid rgba(255, 215, 0, 0.3);
		transition: all 0.3s ease;
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
		}
		
		.feature-icon {
			font-size: 60rpx;
			margin-bottom: 24rpx;
			filter: drop-shadow(0 4rpx 12rpx rgba(255, 215, 0, 0.3));
		}
		
		.feature-text {
			display: block;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			letter-spacing: 1rpx;
		}
	}
}

/* VIP信息卡片 */
.vip-info {
	margin-bottom: 60rpx;
	
	.info-card {
		background: rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(15rpx);
		border-radius: 20rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid rgba(255, 215, 0, 0.3);
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.info-label {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}
		
		.info-value {
			font-size: 30rpx;
			font-weight: 600;
			color: #fff;
			
			&.active {
				color: #ffd700;
			}
		}
	}
}

/* 购买区域 */
.purchase-section {
	.price-card {
		background: rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(15rpx);
		border-radius: 24rpx;
		padding: 40rpx;
		text-align: center;
		margin-bottom: 40rpx;
		border: 1rpx solid rgba(255, 215, 0, 0.3);
		
		.price-label {
			display: block;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 16rpx;
		}
		
		.price-display {
			display: flex;
			align-items: baseline;
			justify-content: center;
			gap: 8rpx;
			
			.price-symbol {
				font-size: 32rpx;
				color: #ffd700;
				font-weight: 600;
			}
			
			.price-amount {
				font-size: 60rpx;
				font-weight: 700;
				color: #ffd700;
			}
			
			.price-period {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
	
	.purchase-btn {
		width: 100%;
		height: 96rpx;
		background: linear-gradient(45deg, #ffd700, #ffed4e);
		border-radius: 50rpx;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3);
		transition: all 0.3s ease;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
		}
		
		.btn-text {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
}

/* 背景装饰 */
.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
	
	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.05);
		
		&.circle-1 {
			width: 300rpx;
			height: 300rpx;
			top: -150rpx;
			right: -100rpx;
		}
		
		&.circle-2 {
			width: 200rpx;
			height: 200rpx;
			bottom: 200rpx;
			left: -100rpx;
		}
		
		&.circle-3 {
			width: 150rpx;
			height: 150rpx;
			top: 50%;
			right: 50rpx;
			transform: translateY(-50%);
		}
	}
}

/* 响应式调整 */
@media (max-width: 375px) {
	.benefits-grid {
		grid-template-columns: 1fr;
	}
	
	.vip-header .vip-title {
		font-size: 42rpx;
	}
	
	.main-content {
		padding: 40rpx 30rpx;
	}
}
</style>


