YwxAppThink/addon/wxchat/YwxMakeFriends/pages/my/income.uvue

<template>
	<view class="page">
		<view class="-status-bar"></view>
		<view class="header">
			<uni-icons type="vip" size="44" color="#FFD700"></uni-icons>
			<text class="title">会员中心</text>
			<text class="sub">开通会员，尊享更多特权</text>
		</view>

		<scroll-view direction="vertical" :show-scrollbar="false" style="flex:1;">
			<view class="plan-row">
				<view v-for="(p, idx) in plans" :key="p.id" class="plan-card" :class="{ active: selected == p.id }" @click="selected = p.id">
					<text class="plan-name">{{ p.name }}</text>
					<view class="plan-price">
						<text class="price-num">¥{{ p.price }}</text>
						<text class="price-unit">/{{ p.unit }}</text>
					</view>
					<text class="plan-tip">{{ p.tip }}</text>
				</view>
			</view>

			<view class="benefits">
				<text class="benefits-title">会员特权</text>
				<view class="benefit-item" v-for="(b, idx) in benefits" :key="idx">
					<uni-icons type="checkmark" size="18" color="#34C759"></uni-icons>
					<text class="benefit-text">{{ b }}</text>
				</view>
			</view>

			<view class="open-btn" @click="onOpen">
				<text class="open-text">立即开通</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
	type IPlan = { id : number, name : string, price : number, unit : string, tip : string }

	const selected = ref<number>(2)
	const plans = reactive<IPlan[]>([
		{ id: 1, name: '月度会员', price: 30, unit: '月', tip: '灵活体验' },
		{ id: 2, name: '季度会员', price: 78, unit: '季', tip: '省21元' },
		{ id: 3, name: '年度会员', price: 268, unit: '年', tip: '最划算' }
	])
	const benefits = reactive<string[]>([
		'无限畅聊，消息免打扰',
		'查看谁看过我 / 超级喜欢',
		'每日专属推荐位曝光',
		'专属动态置顶与标识',
		'会员专属装扮与客服优先'
	])

	function onOpen() {
		uni.showToast({ title: '跳转支付（演示）', icon: 'none' })
	}
</script>

<style lang="scss">
	.page {
		flex: 1;
		background-color: #f7f7f7;
	}

	.-status-bar {
		height: var(--status-bar-height);
		background: linear-gradient(135deg, #2C2C3A 0%, #1A1A24 100%);
	}

	.header {
		background: linear-gradient(135deg, #2C2C3A 0%, #1A1A24 100%);
		padding: 50rpx 30rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFD700;
		margin-top: 16rpx;
	}

	.sub {
		font-size: 24rpx;
		color: #bbb;
		margin-top: 10rpx;
	}

	.plan-row {
		display: flex;
		flex-flow: row nowrap;
		padding: 30rpx;
		justify-content: space-between;
	}

	.plan-card {
		width: 31%;
		padding: 30rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 2rpx solid #f0f0f0;
	}

	.plan-card.active {
		border-color: #FFD700;
		background: linear-gradient(180deg, #FFF8E1 0%, #FFFFFF 100%);
	}

	.plan-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.plan-price {
		display: flex;
		flex-flow: row nowrap;
		align-items: baseline;
		margin: 16rpx 0 8rpx;
	}

	.price-num {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF9500;
	}

	.price-unit {
		font-size: 22rpx;
		color: #999;
		margin-left: 4rpx;
	}

	.plan-tip {
		font-size: 22rpx;
		color: #999;
	}

	.benefits {
		margin: 10rpx 30rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.benefits-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.benefit-item {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: 16rpx 0;
	}

	.benefit-text {
		font-size: 28rpx;
		color: #555;
		margin-left: 16rpx;
	}

	.open-btn {
		margin: 40rpx 60rpx 60rpx;
		height: 92rpx;
		border-radius: 46rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 30rpx rgba(255, 168, 0, 0.3);
	}

	.open-text {
		color: #5a3d00;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>