houserent-front/pages_subpack/member/index.vue

<template>
	<view class="u-page">
		<!-- 头部会员卡片 -->
		<view class="member-header">
			<view class="member-card">
				<view class="card-bg">
					<view class="member-title">
						<uv-icon name="level" size="60rpx" color="#FFD700"></uv-icon>
						<text class="title-text">会员中心</text>
					</view>
					<view class="member-desc">开通永久会员，享受更多专属权益</view>
				</view>
			</view>
		</view>

		<!-- 会员权益 -->
		<view class="rights-section">
			<view class="section-title">
				<text>会员专享权益</text>
			</view>
			<view class="rights-list">
				<view class="right-item">
					<view class="right-icon">
						<uv-icon name="map-fill" size="40rpx" color="#FF6B6B"></uv-icon>
					</view>
					<view class="right-content">
						<text class="right-title">查看详细地址</text>
						<text class="right-desc">查看具体定位和村址，普通用户只能看到乡镇</text>
					</view>
				</view>
				<view class="right-item">
					<view class="right-icon">
						<uv-icon name="phone-fill" size="40rpx" color="#4ECDC4"></uv-icon>
					</view>
					<view class="right-content">
						<text class="right-title">查看联系方式</text>
						<text class="right-desc">查看房主手机号，方便直接联系</text>
					</view>
				</view>
				<view class="right-item">
					<view class="right-icon">
						<uv-icon name="star-fill" size="40rpx" color="#FFD700"></uv-icon>
					</view>
					<view class="right-content">
						<text class="right-title">优先查看房源</text>
						<text class="right-desc">抢先查看最新房源信息</text>
					</view>
				</view>
				<view class="right-item">
					<view class="right-icon">
						<uv-icon name="heart-fill" size="40rpx" color="#9B59B6"></uv-icon>
					</view>
					<view class="right-content">
						<text class="right-title">专属客服</text>
						<text class="right-desc">享受一对一专属客服服务</text>
					</view>
				</view>
				<view class="right-item">
					<view class="right-icon">
						<uv-icon name="gift-fill" size="40rpx" color="#E74C3C"></uv-icon>
					</view>
					<view class="right-content">
						<text class="right-title">永久会员标识</text>
						<text class="right-desc">尊贵的永久会员身份标识</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 永久会员价格 -->
		<view class="package-section">
			<view class="price-card">
				<view class="price-header">
					<view class="price-tag">
						<text class="currency">￥</text>
						<text class="price">99</text>
					</view>
					<text class="price-desc">永久会员</text>
				</view>
				<view class="price-benefits">
					<text class="benefit-text">• 一次购买，终身享受所有会员权益</text>
					<text class="benefit-text">• 无需续费，永久有效</text>
				</view>
			</view>
		</view>

		<!-- 开通按钮 -->
		<view class="action-section">
			<uv-button type="primary" @click="openMember" 
				style="background: linear-gradient(135deg, #1EC77A 0%, #16A085 100%); border: none; border-radius: 50rpx; height: 100rpx; font-size: 32rpx; font-weight: bold;">
				立即开通永久会员 - ￥99
			</uv-button>
			<view class="agreement">
				<text>开通即表示同意</text>
				<text class="link" @click="showAgreement">《永久会员服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			memberPrice: 99 // 永久会员价格
		}
	},
	methods: {
		openMember() {
			uni.showModal({
				title: '确认开通',
				content: `确定开通永久会员吗？\n价格：￥${this.memberPrice}\n终身享受会员权益`,
				confirmText: '确认开通',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.processPay()
					}
				}
			})
		},
		processPay() {
			// 这里应该调用支付接口
			uni.showLoading({
				title: '处理中...'
			})
			
			// 模拟支付处理
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '永久会员开通成功',
					icon: 'success',
					duration: 2000
				})
				
				// 返回上一页并刷新用户信息
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}, 2000)
		},
		showAgreement() {
			uni.showModal({
				title: '永久会员服务协议',
				content: '1. 永久会员享有查看详细地址和联系方式的权限\n2. 会员权益包括但不限于：查看具体定位、村址信息、房主手机号等\n3. 永久会员权益终身有效，无需续费\n4. 其他会员服务条款...',
				showCancel: false,
				confirmText: '我知道了'
			})
		}
	}
}
</script>

<style scoped>
.u-page {
	background: linear-gradient(180deg, #1EC77A 0%, #f5f5f5 30%);
	min-height: 100vh;
}

.member-header {
	padding: 40rpx 30rpx;
}

.member-card {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 20rpx;
	padding: 40rpx;
	backdrop-filter: blur(10rpx);
}

.member-title {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 40rpx;
	font-weight: bold;
	color: white;
	margin-left: 20rpx;
}

.member-desc {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.rights-section, .package-section {
	margin: 30rpx;
	background: white;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
}

.rights-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.right-item {
	display: flex;
	align-items: center;
}

.right-icon {
	margin-right: 20rpx;
}

.right-content {
	flex: 1;
}

.right-title {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

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

.price-card {
	text-align: center;
	background: linear-gradient(135deg, #1EC77A 0%, #16A085 100%);
	border-radius: 20rpx;
	padding: 50rpx 30rpx;
	color: white;
	position: relative;
	overflow: hidden;
}

.price-card::before {
	content: '';
	position: absolute;
	top: -50rpx;
	right: -50rpx;
	width: 200rpx;
	height: 200rpx;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
}

.price-header {
	margin-bottom: 30rpx;
}

.price-tag {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 10rpx;
}

.currency {
	font-size: 40rpx;
	font-weight: bold;
}

.price {
	font-size: 120rpx;
	font-weight: bold;
	line-height: 1;
}

.price-desc {
	font-size: 32rpx;
	font-weight: bold;
	opacity: 0.9;
}

.price-benefits {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.benefit-text {
	font-size: 26rpx;
	opacity: 0.9;
	text-align: left;
}

.action-section {
	padding: 30rpx;
}

.agreement {
	text-align: center;
	margin-top: 20rpx;
	font-size: 24rpx;
	color: #666;
}

.link {
	color: #1EC77A;
}
</style>