MoeNovaClient/pages/vip/index.vue

<template>
	<view class="vip-container">
		<!-- 顶部会员信息 -->
		<view class="vip-header">
			<view class="vip-title">尊贵会员</view>
			<view class="vip-expire" v-if="userInfo.isVip">VIP到期时间: {{userInfo.vipExpireDate}}</view>
		</view>

		<!-- 会员价格选择 -->
		<view class="vip-price-options">
			<view class="price-option" v-for="(item, index) in priceOptions" :key="index"
				:class="{active: selectedPrice === index}" @tap="selectPrice(index)">
				<view class="price-tag" v-if="item.tag">{{item.tag}}</view>
				<view class="price">¥{{item.price}}</view>
				<view class="duration">{{item.name}}</view>
			</view>
		</view>

		<!-- 会员特权列表 -->
		<view class="vip-privileges">
			<view class="privileges-title">尊享特权</view>
			<view class="privileges-list">
				<view class="privilege-item" v-for="(item, index) in privileges" :key="index">
					<image class="privilege-icon" :src="item.icon" mode="aspectFit"></image>
					<view class="privilege-info">
						<view class="privilege-name">{{item.name}}</view>
						<view class="privilege-desc">{{item.desc}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部支付按钮 -->
		<view class="bottom-pay-btn">
			<view class="total-price">合计: <text class="price-value">¥{{priceOptions[selectedPrice].price}}</text></view>
			<view class="pay-button" @tap="showPaymentOptions">立即续费</view>
		</view>

		<!-- 支付方式选择弹窗 -->
		<uni-popup ref="paymentPopup" type="bottom">
			<view class="payment-popup">
				<view class="popup-header">
					<view class="popup-title">选择支付方式</view>
					<view class="popup-close" @tap="closePaymentPopup">×</view>
				</view>
				<view class="payment-options">
					<view class="payment-option" @tap="selectPayment('alipay')">
						<image class="payment-icon" src="../../static/icon/pay_ali.png" mode="aspectFit"></image>
						<view class="payment-name">支付宝支付</view>
						<image class="payment-select"
							:src="paymentMethod === 'alipay' ? 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9IiM3RjI4REUiIHN0cm9rZT0iIzk3NThERSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgogIDxwYXRoIGQ9Ik0xMCAyMCBMMTcgMjcgTDMwIDE0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=' : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgo8L3N2Zz4='"
							mode="aspectFit"></image>
					</view>
					<view class="payment-option" @tap="selectPayment('wechat')">
						<image class="payment-icon" src="../../static/icon/pay_wx.png" mode="aspectFit"></image>
						<view class="payment-name">微信支付</view>
						<image class="payment-select"
							:src="paymentMethod === 'wechat' ? 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9IiM3RjI4REUiIHN0cm9rZT0iIzk3NThERSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgogIDxwYXRoIGQ9Ik0xMCAyMCBMMTcgMjcgTDMwIDE0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=' : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiAvPgo8L3N2Zz4='"
							mode="aspectFit"></image>
					</view>
				</view>
				<view class="confirm-payment" @tap="confirmPayment">确认支付 ¥{{priceOptions[selectedPrice].price}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					isVip: false,
					vipExpireDate: '2023-10-23'
				},
				priceOptions: [{
						name: '月度VIP',
						price: '98.00',
						tag: ''
					},
					{
						name: '季度VIP',
						price: '198.00',
						tag: '推荐'
					},
					{
						name: '年度VIP',
						price: '398.00',
						tag: ''
					}
				],
				selectedPrice: 1, // 默认选中的价格选项索引
				privileges: [{
						name: '无限AI生成',
						icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTMwIDE1IEw0MCAyMCBMNDAgNDAgTDMwIDQ1IEwyMCA0MCBMMjAgMjAgWiIgZmlsbD0iIzk3NThERSIgLz4KICA8cGF0aCBkPSJNMzAgMjUgTDM1IDI3LjUgTDM1IDM3LjUgTDMwIDQwIEwyNSAzNy41IEwyNSAyNy41IFoiIGZpbGw9IiNmZmZmZmYiIC8+CiAgPHBhdGggZD0iTTE1IDIyIEwxOCAyNCBMMTggMjggTDE1IDMwIEwxMiAyOCBMMTIgMjQgWiIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNNDUgMjIgTDQ4IDI0IEw0OCAyOCBMNDUgMzAgTDQyIDI4IEw0MiAyNCBaIiBmaWxsPSIjZmZmZmZmIiAvPgo8L3N2Zz4=',
						desc: '无限次使用AI创作功能'
					},
					{
						name: '高级模型使用',
						icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMTUiIGZpbGw9IiM5NzU4REUiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNMTUgMTUgTDIwIDIwIE00NSAxNSBMNDAgMjAgTTE1IDQ1IEwyMCA0MCBNNDUgNDUgTDQwIDQwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgLz4KPC9zdmc+',
						desc: '使用更高级的AI模型创作'
					},
					{
						name: '优先创作队列',
						icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTE1IDIwIEg0NSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8cGF0aCBkPSJNMTUgMzAgSDM1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgogIDxwYXRoIGQ9Ik0xNSA0MCBIMjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+CiAgPHBhdGggZD0iTTQwIDM1IEw1MCA0NSIgc3Ryb2tlPSIjOTc1OERFIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8cGF0aCBkPSJNNTAgMzUgTDQwIDQ1IiBzdHJva2U9IiM5NzU4REUiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgo8L3N2Zz4=',
						desc: '创作请求优先处理'
					},
					{
						name: 'VIP专属客服',
						icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPGNpcmNsZSBjeD0iMzAiIGN5PSIyNSIgcj0iMTIiIGZpbGw9IiNmZmZmZmYiIC8+CiAgPHBhdGggZD0iTTE4IDQyIEMxOCAzNSwgMjQgMzIsIDMwIDMyIEMzNiAzMiwgNDIgMzUsIDQyIDQyIiBmaWxsPSIjOTc1OERFIiAvPgogIDxyZWN0IHg9IjIyIiB5PSIxNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjQiIHJ4PSIyIiBmaWxsPSIjNUYxN0REIiAvPgogIDxwYXRoIGQ9Ik0xOCA0MiBINDIiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIzIiAvPgo8L3N2Zz4=',
						desc: '专人解答任何问题'
					},
					{
						name: '尊贵身份标识',
						icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHBhdGggZD0iTTMwIDEwIEwzNyAyNCBMNTIgMjYgTDQxIDM3IEw0NCA1MiBMMzAgNDUgTDE2IDUyIEwxOSAzNyBMOCAyNiBMMjMgMjQgWiIgZmlsbD0iI2ZmZmZmZiIgLz4KICA8cGF0aCBkPSJNMjUgMjUgTDMwIDM1IEwzNSAyNSBMMjUgMjUgWiIgZmlsbD0iIzk3NThERSIgLz4KPC9zdmc+',
						desc: '展示您的VIP身份'
					},
					{
						name: '高级内容访问',
						icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiByeD0iMTUiIGZpbGw9IiM1RjE3REQiIC8+CiAgPHJlY3QgeD0iMTUiIHk9IjE1IiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHJ4PSI1IiBmaWxsPSIjOTc1OERFIiAvPgogIDxwYXRoIGQ9Ik0yMCAyNSBINDAgTTIwIDM1IEg0MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8dGV4dCB4PSIzMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgZmlsbD0iI2ZmZmZmZiIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+VklQPC90ZXh0Pgo8L3N2Zz4=',
						desc: '专享更多高级内容'
					}
				],
				paymentMethod: 'alipay', // 默认支付方式
				privilegesHeight: 0, // 添加存储特权区域高度的变量
			}
		},
		onLoad() {
			// 获取用户信息，检查是否为VIP
			this.getUserInfo();
		},
		onReady() {
			// 页面渲染完成后获取vip-privileges的高度
			this.getPrivilegesHeight();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				// 这里添加获取用户信息的API调用
				// 示例数据
				this.userInfo = {
					isVip: true,
					vipExpireDate: '2023-10-23'
				};
			},
			// 选择价格选项
			selectPrice(index) {
				this.selectedPrice = index;
			},
			// 显示支付方式选择弹窗
			showPaymentOptions() {
				this.$refs.paymentPopup.open();
			},
			// 关闭支付方式选择弹窗
			closePaymentPopup() {
				this.$refs.paymentPopup.close();
			},
			// 选择支付方式
			selectPayment(method) {
				this.paymentMethod = method;
			},
			// 确认支付
			confirmPayment() {
				// 根据选择的支付方式进行支付
				uni.showLoading({
					title: '支付中...'
				});

				// 模拟支付过程
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});
					this.$refs.paymentPopup.close();
				}, 1500);

				// 在实际应用中，这里会调用支付API
				console.log('支付方式:', this.paymentMethod);
				console.log('支付金额:', this.priceOptions[this.selectedPrice].price);
			},
			// 获取特权列表区域的高度
			getPrivilegesHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.vip-privileges').boundingClientRect(data => {
					if (data) {
						this.privilegesHeight = data.height;
						console.log('特权区域高度:', this.privilegesHeight);
					} else {
						console.log('未能获取到特权区域元素');
						// 如果首次获取失败，可以添加延迟重试
						setTimeout(() => {
							this.getPrivilegesHeight();
						}, 100);
					}
				}).exec();
			},
			// 如果需要在某些数据变化后重新获取高度
			updatePrivilegesHeight() {
				this.$nextTick(() => {
					this.getPrivilegesHeight();
				});
			}
		}
	}
</script>

<style lang="scss">
	.vip-container {
		min-height: 100vh;
		background-color: #161616;
		padding-bottom: 120rpx;
	}

	.vip-header {
		background: linear-gradient(to right, #7F28DE, #5F17DD);
		padding: 80rpx 40rpx;
		color: #ffffff;
		border-radius: 0 0 30rpx 30rpx;
	}

	.vip-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.vip-expire {
		font-size: 28rpx;
		opacity: 0.8;
	}

	.vip-price-options {
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
		margin-top: -60rpx;
	}

	.price-option {
		width: 210rpx;
		height: 240rpx;
		background-color: #242424;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		transition: all 0.3s;

		&.active {
			background: linear-gradient(to bottom, #9758DE, #5F17DD);
			transform: scale(1.05);
		}
	}

	.price-tag {
		position: absolute;
		top: -20rpx;
		padding: 6rpx 20rpx;
		background-color: #FF6B00;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 20rpx;
	}

	.price {
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 20rpx;
	}

	.duration {
		font-size: 28rpx;
		color: #cccccc;
	}

	.vip-privileges {
		padding: 40rpx;
	}

	.privileges-title {
		font-size: 32rpx;
		color: #ffffff;
		margin-bottom: 40rpx;
		font-weight: bold;
	}

	.privileges-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.privilege-item {
		width: 48%;
		background-color: #242424;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.privilege-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.privilege-name {
		font-size: 28rpx;
		color: #ffffff;
		margin-bottom: 10rpx;
	}

	.privilege-desc {
		font-size: 24rpx;
		color: #999999;
	}

	.bottom-pay-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #242424;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
	}

	.total-price {
		color: #cccccc;
		font-size: 28rpx;
	}

	.price-value {
		color: #ffffff;
		font-size: 40rpx;
		font-weight: bold;
	}

	.pay-button {
		background: linear-gradient(to right, #9758DE, #5F17DD);
		color: #ffffff;
		padding: 20rpx 60rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	/* 支付方式选择弹窗样式 */
	.payment-popup {
		background-color: #242424;
		border-radius: 30rpx 30rpx 0 0;
		padding: 40rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.popup-title {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.popup-close {
		font-size: 48rpx;
		color: #999999;
		line-height: 1;
	}

	.payment-options {
		margin-bottom: 40rpx;
	}

	.payment-option {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #333333;
	}

	.payment-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.payment-name {
		flex: 1;
		color: #ffffff;
		font-size: 30rpx;
	}

	.payment-select {
		width: 40rpx;
		height: 40rpx;
	}

	.confirm-payment {
		background: linear-gradient(to right, #9758DE, #5F17DD);
		color: #ffffff;
		text-align: center;
		padding: 30rpx 0;
		border-radius: 50rpx;
		font-size: 32rpx;
		margin-top: 60rpx;
	}
</style>