动森场景尝试

pages.json

@@ -305,6 +305,11 @@
 			"style": {
 				"navigationBarTitleText": "我的星灵"
 			}
+		}, {
+			"path": "pages/isLand/mainLand",
+			"style": {
+				"navigationBarTitleText": "主大陆"
+			}
 		}
 	],
 	"globalStyle": {

pages/isLand/mainLand.scss

@@ -0,0 +1,72 @@
+
+.main-land-container {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  // background-color: #fff000; /* 天空蓝背景色 */
+  
+  .scroll-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    touch-action: pan-x;
+  }
+  
+    /* 第三层：背景层 */
+    .background-layer {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(to bottom, #87CEEB, #4682B4); /* 渐变背景 */
+      z-index: 1; /* 最底层 */
+      user-select: none; /* 禁止选中 */
+      pointer-events: none; /* 禁止交互 */
+    }
+
+    /* 第二层：地图层（可拖动） */
+    .map-layer {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 1536rpx;  /* 地图比屏幕大 */
+      height: 100%;
+      z-index: 2;   /* 中间层 */
+      cursor: grab; /* 拖动光标 */
+	  // background-color: red;
+    }
+
+    /* 第一层：UI层（最上层） */
+    .ui-layer {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3; /* 最上层 */
+      pointer-events: none; /* 允许穿透点击，但内部元素可交互 */
+    }
+    /* UI层内部元素需要启用交互 */
+    .ui-content {
+      pointer-events: auto; /* 重新启用交互 */
+	  bottom: 150px;
+      padding: 100px;
+    }
+
+    /* 示例按钮样式 */
+    .dialog-button {
+      background: white;
+	  // bottom: 150px;
+      padding: 10px 20px;
+      border-radius: 5px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    }
+
+  text {
+    font-size: 16px;
+    color: #333;
+  }
+} 

pages/isLand/mainLand.vue

@@ -0,0 +1,177 @@
+<template>
+ <view class="main-land-container">
+<!--    <view class="scroll-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" >
+      <view class="background" :style="{ transform: `translateX(${translateX}px)` }">
+        <image class="island-image" src="/static/island/island.png" mode="heightFix"></image>
+      </view>
+    </view> -->
+
+  
+    <!-- 第三层：背景 -->
+    <view class="background-layer"></view>
+  
+    <!-- 第二层：地图 -->
+    <view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup">
+      <!-- 这里可以放置地图元素（示例：一个方块） -->
+      <!-- <view style="position: absolute; top: 30%; left: 30%; width: 100px; height: 100px; background: green;"></view> -->
+	  <image class="island-image" src="/static/island/island.png" mode="widthFix" style="width:1536rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
+	  <image class="house-image" src="/static/island/building/4.png" mode="widthFix" style="width:670rpx; left: 980rpx; bottom:530rpx;position: absolute; transform:translate(-50%,50%);"></image>
+    </view>
+  
+    <!-- 第一层：UI -->
+    <view class="ui-layer">
+      <view class="ui-content">
+        <button class="dialog-button">打开对话框</button>
+      </view>
+    </view>
+  </view> 
+</template>
+
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				// // 背景位置控制
+				translateX: 0,
+				startX: 0,
+				currentX: 0,
+				isDragging : false,
+				// maxTranslate: 0,
+				
+				// // 获取屏幕宽度和背景宽度
+				screenWidth: 0,
+				backgroundWidth: 0,
+				islandHeight: 0
+			}
+		},
+		onLoad() {
+			let self = this;
+			// 获取屏幕宽度
+			uni.getSystemInfo({
+				success: (res) => {
+					self.screenWidth = res.windowWidth;
+					console.log('屏幕宽度:', self.screenWidth);
+				}
+			});
+		},
+		onShow() {
+			// this.loadData();
+		},
+		onReady() {
+			// 在组件渲染完成后获取图片尺寸
+			setTimeout(() => {
+				this.getImageSize();
+			}, 300);
+		},
+		methods: {
+			loadData() {
+				// 可以在这里加载其他数据
+			},
+			getImageSize() {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.island-image').boundingClientRect(data => {
+					if (data) {
+						// 获取岛屿图片的宽度和高度
+						this.backgroundWidth = data.width;
+						this.islandHeight = data.height;
+						// this.backgroundWidth = 1536;
+						// this.islandHeight = 1024;
+
+						
+						// 设置背景高度为岛屿高度的两倍（在CSS中实现）
+						
+						// 计算最大可移动距离
+						this.maxTranslate = this.backgroundWidth - this.screenWidth;
+						
+						// 初始位置居中
+						this.translateX = -this.maxTranslate / 2;
+						
+						// 打印调试信息
+						console.log('屏幕宽度:', this.screenWidth);
+						console.log('背景宽度:', this.backgroundWidth);
+						console.log('岛屿高度:', this.islandHeight);
+						console.log('屏幕宽度:',this.screenWidth);
+						console.log('最大可移动距离:',this.maxTranslate);
+						
+						console.log('岛屿data:', data);
+						
+					} else {
+						console.error('未能获取岛屿图片的尺寸');
+					}
+				}).exec();
+			},
+			// 触摸开始
+			touchStart(e) {
+				console.log('----------- touchStart');
+				this.startX = e.touches[0].clientX;
+				this.currentX = this.translateX;
+				console.log('this.startX =',this.startX);
+				console.log('this.currentX =',this.currentX);
+			},
+			// 触摸移动
+			touchMove(e) {
+				console.log('----------- touchMove');
+				const moveX = e.touches[0].clientX - this.startX;
+				let newTranslateX = this.currentX + moveX;
+				
+				// 限制移动范围，不让背景两侧露出
+				// if (newTranslateX > 0) {
+				// 	newTranslateX = 0;
+				// } else if (newTranslateX < -this.maxTranslate) {
+				// 	newTranslateX = -this.maxTranslate;
+				// }
+				
+				this.translateX = newTranslateX;
+				console.log('moveX =',moveX);
+				console.log('this.translateX =',this.translateX);
+			},
+			// 触摸结束
+			touchEnd() {
+				console.log('----------- touchEnd');
+				this.currentX = this.translateX;
+				console.log('this.currentX =',this.currentX);
+			},
+			
+			onmousedown(e) {
+				console.log('----------- onmousedown');
+				console.log('----------- e',e);
+				this.isDragging = true;
+				this.startX = e.clientX;
+				this.currentX = this.translateX;
+				mapLayer.style.cursor = 'grabbing';
+			},
+			
+			onmousemove(e) {
+				if(this.isDragging){
+					console.log('----------- onmousemove');
+					const moveX = e.clientX - this.startX;
+					let newTranslateX = this.currentX + moveX;
+					
+					//限制移动范围，不让背景两侧露出
+					if (newTranslateX > 0) {
+						newTranslateX = 0;
+					} else if (newTranslateX < -this.maxTranslate) {
+						newTranslateX = -this.maxTranslate;
+					}
+					
+					this.translateX = newTranslateX;
+					console.log('moveX =',moveX);
+					console.log('this.translateX =',this.translateX);
+				}
+			},
+			
+			onmouseup(e) {
+				console.log('----------- onmouseup');
+				this.isDragging = false;
+				mapLayer.style.cursor = 'grab';
+			},
+		}
+	}
+</script>
+
+
+<style lang="scss" scoped>
+@import './mainLand.scss';
+</style> 

pages/vip/index.vue

@@ -0,0 +1,420 @@
+<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>