vist_go_uniApp/packageUser/pages/level/index.vue

<template>
	<view class="level-center">
		<!-- 用户当前等级信息 -->
		<view class="user-level-info">
			<view class="level-header">
				<view class="level-left">
					<view class="level-title">{{currentLevel.name}}</view>
					<view class="level-desc">距离下一个等级 <text class="next-level">{{nextLevel.name}}</text></view>
				</view>
				<view class="level-right" @click="goToOrderHistory">
					<view class="order-history">
						<u-icon name="clock" size="40" color="#fff"></u-icon>
						<text>购买记录</text>
					</view>
				</view>
			</view>

			<!-- 会员权益卡片 -->

		</view>

		<!-- 等级进度条 -->
		<view class="level-progress">
			<view class="progress-header">
				<text class="progress-title">升级进度</text>
				<text class="progress-percent">{{progressPercentage}}%</text>
			</view>
			<view class="progress-bar">
				<view class="progress-inner" :style="{width: progressPercentage + '%'}">
					<view class="progress-dot"></view>
				</view>
			</view>
			<view class="level-points">
				<view class="current-points">
					<text class="point-label">已购买商品</text>
					<text class="point-value">{{currentBuyCount}}个</text>
				</view>
				<view class="next-level-points">
					<text class="point-label">还需购买</text>
					<text class="point-value highlight">{{remainingCount}}个</text>
				</view>
			</view>
		</view>

		<!-- 等级图标展示 -->
		<view class="level-icons">
			<view v-for="(level, index) in levels" :key="index" class="level-icon-item"
				:class="{'active': currentLevelIndex >= index}">
				<view class="level-icon-wrapper" :class="[level.effect]">
					<image :src="level.icon" mode="aspectFit" class="level-icon"
						:style="level.color ? {filter: 'drop-shadow(0 0 3px '+level.color+') brightness(1.1)', fill: level.color} : ''">
					</image>
				</view>
				<text class="level-name" :style="level.color ? {color: level.color} : ''">{{level.name}}</text>
			</view>
		</view>

		<!-- 等级说明 -->
		<view class="level-description">
			<view class="desc-header">
				<text class="desc-title">等级说明</text>
				<text class="desc-subtitle">会员等级越高 优惠越多</text>
			</view>
			
			<!-- 等级计算规则说明 -->
			<view class="level-rule-notice">
				<view class="rule-icon">
					<u-icon name="info-circle" size="32" color="#8B5CF6"></u-icon>
				</view>
				<view class="rule-content">
					<view class="rule-title">等级计算规则</view>
					<view class="rule-text">您的会员等级将在每月1号根据上个月的购买商品数量进行更新，购买数量越多等级越高</view>
				</view>
			</view>
			
			<view class="desc-list">
				<view class="desc-item" v-for="(level, index) in levels" :key="index">
					<view class="desc-left">
						<view class="desc-level">{{level.name}}</view>
						<view class="desc-benefits">{{level.benefits}}</view>
					</view>
					<view class="desc-right">
						<view class="desc-requirement">购买商品数达到 <text class="highlight">{{level.requirement}}</text> 个
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		countPaidProducts
	} from '@/config/api';
	export default {
		data() {
			return {
				currentBuyCount: 0, // 当前购买数量，从接口获取
				levels: [{
						name: '普通会员',
						requirement: 0,
						icon: '/static/images/level.png',
						color: '',
						effect: ''
					},
					{
						name: 'S级会员',
						requirement: 20,
						icon: '/static/images/level1.png',
						color: '#FFB800',
						effect: 'level-effect-s'
					},
					{
						name: 'SS级会员',
						requirement: 40,
						icon: '/static/images/level2.png',
						color: '#FF6B6B',
						effect: 'level-effect-ss'
					},
					{
						name: 'SSS级会员',
						requirement: 55,
						icon: '/static/images/level3.png',
						color: '#8B5CF6',
						effect: 'level-effect-sss'
					}
				]
			}
		},
		computed: {
			currentLevelIndex() {
				for (let i = this.levels.length - 1; i >= 0; i--) {
					if (this.currentBuyCount >= this.levels[i].requirement) {
						return i;
					}
				}
				return 0;
			},
			currentLevel() {
				return this.levels[this.currentLevelIndex];
			},
			nextLevel() {
				return this.levels[Math.min(this.currentLevelIndex + 1, this.levels.length - 1)];
			},
			remainingCount() {
				if (this.currentLevelIndex === this.levels.length - 1) {
					return 0;
				}
				return this.nextLevel.requirement - this.currentBuyCount;
			},
			progressPercentage() {
				if (this.currentLevelIndex === this.levels.length - 1) {
					return 100;
				}
				const currentRange = this.nextLevel.requirement - this.currentLevel.requirement;
				const currentProgress = this.currentBuyCount - this.currentLevel.requirement;
				return Math.min(Math.floor((currentProgress / currentRange) * 100), 100);
			}
		},
		onLoad() {
			this.getCurrentBuyCount();
		},
		methods: {
			// 获取当前用户购买商品数量
			async getCurrentBuyCount() {
				try {
					const res = await countPaidProducts();
					if (res.code === 200 && res.data !== null) {
						this.currentBuyCount = res.data.productCount;
					}
				} catch (error) {
					console.error('获取购买商品数量失败:', error);
					// 如果接口调用失败，保持默认值
				}
			},
			goToOrderHistory() {
				uni.navigateTo({
					url: '/packageOrder/pages/list/index'
				});
			}
		}
	}
</script>

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

		.user-level-info {
			background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
			padding: 30rpx;
			border-radius: 20rpx;
			color: #fff;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.2);

			.level-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 30rpx;

				.level-left {
					.level-title {
						font-size: 44rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.level-desc {
						font-size: 28rpx;
						opacity: 0.9;

						.next-level {
							color: #FFD700;
							font-weight: bold;
						}
					}
				}

				.level-right {
					.order-history {
						display: flex;
						flex-direction: column;
						align-items: center;
						background: rgba(255, 255, 255, 0.1);
						padding: 10rpx 20rpx;
						border-radius: 12rpx;

						text {
							font-size: 24rpx;
							margin-top: 6rpx;
						}
					}
				}
			}

			.level-benefits {
				display: flex;
				justify-content: space-around;
				margin-top: 20rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 16rpx;
				padding: 20rpx 0;

				.benefit-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.benefit-value {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 6rpx;
					}

					.benefit-label {
						font-size: 24rpx;
						opacity: 0.8;
					}
				}
			}
		}

		.level-progress {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.progress-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.progress-title {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
				}

				.progress-percent {
					font-size: 28rpx;
					color: #8B5CF6;
					font-weight: bold;
				}
			}

			.progress-bar {
				height: 16rpx;
				background-color: #E5E7EB;
				border-radius: 8rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				position: relative;

				.progress-inner {
					height: 100%;
					background: linear-gradient(to right, #8B5CF6, #6366F1);
					border-radius: 8rpx;
					transition: width 0.3s;
					position: relative;

					.progress-dot {
						position: absolute;
						right: -6rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 12rpx;
						height: 12rpx;
						background: #fff;
						border-radius: 50%;
						box-shadow: 0 0 10rpx rgba(139, 92, 246, 0.5);
					}
				}
			}

			.level-points {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;

				.current-points,
				.next-level-points {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.point-label {
						color: #666;
						margin-bottom: 4rpx;
					}

					.point-value {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;

						&.highlight {
							color: #FF6B6B;
						}
					}
				}
			}
		}

		.level-icons {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.level-icon-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				opacity: 0.5;

				&.active {
					opacity: 1;
				}

				.level-icon-wrapper {
					width: 90rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10rpx;
					position: relative;

					&.level-effect-s {
						&::before {
							content: '';
							position: absolute;
							width: 110%;
							height: 110%;
							border-radius: 50%;
							border: 2rpx solid rgba(255, 184, 0, 0.3);
							animation: borderPulse 1.5s ease-in-out infinite;
						}
					}

					&.level-effect-ss {
						&::before {
							content: '';
							position: absolute;
							width: 115%;
							height: 115%;
							border-radius: 50%;
							background: linear-gradient(45deg,
									rgba(255, 107, 107, 0.1) 0%,
									rgba(255, 107, 107, 0.2) 50%,
									rgba(255, 107, 107, 0.1) 100%);
							animation: shine 2s linear infinite;
						}
					}

					&.level-effect-sss {
						&::before {
							content: '';
							position: absolute;
							width: 120%;
							height: 120%;
							border-radius: 50%;
							background: linear-gradient(135deg,
									rgba(139, 92, 246, 0.1) 0%,
									rgba(139, 92, 246, 0.2) 50%,
									rgba(139, 92, 246, 0.1) 100%);
							animation: shine 1.5s linear infinite;
						}
					}

					.level-icon {
						width: 70rpx;
						height: 70rpx;
						position: relative;
						z-index: 1;
					}
				}

				@keyframes borderPulse {
					0% {
						transform: scale(1);
						opacity: 0.6;
					}

					50% {
						transform: scale(1.1);
						opacity: 0.3;
					}

					100% {
						transform: scale(1);
						opacity: 0.6;
					}
				}

				@keyframes shine {
					0% {
						transform: rotate(0deg);
						opacity: 0.3;
					}

					50% {
						opacity: 0.5;
					}

					100% {
						transform: rotate(360deg);
						opacity: 0.3;
					}
				}

				.level-name {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.level-description {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.level-rule-notice {
				display: flex;
				align-items: flex-start;
				background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
				border: 2rpx solid rgba(139, 92, 246, 0.1);
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 30rpx;

				.rule-icon {
					margin-right: 16rpx;
					margin-top: 4rpx;
					flex-shrink: 0;
				}

				.rule-content {
					flex: 1;

					.rule-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #8B5CF6;
						margin-bottom: 8rpx;
					}

					.rule-text {
						font-size: 26rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}

			.desc-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #f5f5f5;

				.desc-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.desc-subtitle {
					font-size: 24rpx;
					color: #666;
				}
			}

			.desc-list {
				.desc-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 1px solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}

					.desc-left {
						.desc-level {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 6rpx;
						}

						.desc-benefits {
							font-size: 24rpx;
							color: #666;
						}
					}

					.desc-right {
						.desc-requirement {
							font-size: 26rpx;
							color: #666;

							.highlight {
								color: #8B5CF6;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>