412 lines
7.5 KiB
Vue
412 lines
7.5 KiB
Vue
<template>
|
||
<view class="subscribe-page">
|
||
<view class="banner">
|
||
<view class="banner-head">
|
||
<view class="banner-title-row">
|
||
<view class="banner-icon">
|
||
<text class="iconfont icon-lihe"></text>
|
||
</view>
|
||
<view class="banner-info">
|
||
<view class="banner-title">盲盒订阅</view>
|
||
<view class="banner-desc">每月惊喜，专属香氛体验</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="banner-meta">
|
||
<view class="meta-item">
|
||
<view class="meta-label">当前等级</view>
|
||
<view class="meta-value">{{ memberInfo.level }}</view>
|
||
</view>
|
||
<view class="meta-item">
|
||
<view class="meta-label">下次配送</view>
|
||
<view class="meta-value">{{ memberInfo.nextDelivery }}</view>
|
||
</view>
|
||
<view class="meta-item unlocked">
|
||
<view class="meta-label">已解锁</view>
|
||
<view class="meta-value">{{ memberInfo.unlocked }}种</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tab-bar">
|
||
<view
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
class="tab-item"
|
||
:class="{ active: activeTab === tab.key }"
|
||
@click="switchTab(tab.key)"
|
||
>
|
||
{{ tab.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="membership-card">
|
||
<view class="card-header">
|
||
<view class="card-icon">
|
||
<text class="iconfont icon-xingxing"></text>
|
||
</view>
|
||
<view class="card-title">
|
||
<view class="card-name">{{ plan.name }}</view>
|
||
<view class="card-subtitle">{{ plan.tagline }}</view>
|
||
</view>
|
||
<view class="card-price">
|
||
<view class="current">￥{{ plan.price }}</view>
|
||
<view class="original">￥{{ plan.originalPrice }}</view>
|
||
<view class="discount">{{ plan.discount }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-section">
|
||
<view class="section-title">会员权益</view>
|
||
<view class="benefit-list">
|
||
<view
|
||
class="benefit-item"
|
||
v-for="benefit in plan.benefits"
|
||
:key="benefit"
|
||
>
|
||
<view class="indicator"></view>
|
||
<text>{{ benefit }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-section">
|
||
<view class="section-title">订阅特色</view>
|
||
<view class="feature-tags">
|
||
<view
|
||
class="tag"
|
||
v-for="tag in plan.features"
|
||
:key="tag"
|
||
>
|
||
{{ tag }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-action">
|
||
<button class="subscribe-button" @click="handleSubscribe">
|
||
立即订阅
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeTab: 'plan',
|
||
tabs: [
|
||
{ key: 'plan', label: '订阅计划' },
|
||
{ key: 'scents', label: '香型管理' },
|
||
{ key: 'records', label: '配送记录' },
|
||
{ key: 'settings', label: '订阅设置' }
|
||
],
|
||
memberInfo: {
|
||
level: '品鉴会员',
|
||
nextDelivery: '2025-04-05',
|
||
unlocked: 4
|
||
},
|
||
plan: {
|
||
name: '探索会员',
|
||
tagline: '无门槛',
|
||
price: 99,
|
||
originalPrice: 129,
|
||
discount: '95折',
|
||
benefits: [
|
||
'盲盒95折优惠',
|
||
'月返5%积分',
|
||
'基础客服支持',
|
||
'每月1次退换货',
|
||
'标准配送'
|
||
],
|
||
features: ['4种香型', '基础包装', '标准配送']
|
||
}
|
||
};
|
||
},
|
||
methods: {
|
||
switchTab(key) {
|
||
this.activeTab = key;
|
||
|
||
if (key !== 'plan') {
|
||
uni.showToast({
|
||
title: '即将上线，敬请期待',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
handleSubscribe() {
|
||
uni.showToast({
|
||
title: '订阅成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.subscribe-page {
|
||
min-height: 100vh;
|
||
padding: 48rpx 32rpx 80rpx;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(180deg, #fdf2ff 0%, #ffffff 45%, #ffffff 100%);
|
||
}
|
||
|
||
.banner {
|
||
padding: 48rpx 36rpx 32rpx;
|
||
border-radius: 32rpx;
|
||
background: linear-gradient(135deg, #ff3fb4 0%, #8f39ff 100%);
|
||
color: #fff;
|
||
box-shadow: 0 30rpx 50rpx rgba(143, 57, 255, 0.18);
|
||
}
|
||
|
||
.banner-head {
|
||
/* display: flex;
|
||
align-items: center;
|
||
gap: 32rpx; */
|
||
}
|
||
.banner-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
.banner-icon {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.16);
|
||
font-size: 60rpx;
|
||
box-shadow: inset 0 10rpx 20rpx rgba(255, 255, 255, 0.2);
|
||
text-align: center;
|
||
}
|
||
.banner-icon text{
|
||
font-size: 60rpx;
|
||
margin-left: 50%;
|
||
}
|
||
|
||
.banner-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 42rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.banner-desc {
|
||
font-size: 28rpx;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.banner-meta {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
gap: 32rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.meta-label {
|
||
font-size: 24rpx;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.meta-value {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.meta-item.unlocked .meta-value {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.tab-bar {
|
||
margin-top: 32rpx;
|
||
padding: 4rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
display: flex;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
padding: 18rpx 0;
|
||
text-align: center;
|
||
border-radius: 18rpx;
|
||
font-size: 26rpx;
|
||
opacity: 0.85;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background: #fff;
|
||
color: #7b3cff;
|
||
box-shadow: 0 12rpx 20rpx rgba(255, 255, 255, 0.26);
|
||
opacity: 1;
|
||
}
|
||
|
||
.content {
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.membership-card {
|
||
background: #fff;
|
||
border-radius: 32rpx;
|
||
padding: 40rpx 36rpx;
|
||
box-shadow: 0 20rpx 40rpx rgba(30, 10, 80, 0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 40rpx;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28rpx;
|
||
}
|
||
|
||
.card-icon {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #ff60e9 0%, #894dff 100%);
|
||
color: #fff;
|
||
font-size: 52rpx;
|
||
box-shadow: 0 20rpx 40rpx rgba(137, 77, 255, 0.25);
|
||
}
|
||
|
||
.card-title {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.card-name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #2c2440;
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-size: 26rpx;
|
||
color: #8f87a5;
|
||
}
|
||
|
||
.card-price {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.card-price .current {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #7b3cff;
|
||
}
|
||
|
||
.card-price .original {
|
||
font-size: 26rpx;
|
||
color: #b4acc8;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.card-price .discount {
|
||
font-size: 24rpx;
|
||
color: #7b3cff;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
background: rgba(123, 60, 255, 0.1);
|
||
}
|
||
|
||
.card-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #30274a;
|
||
}
|
||
|
||
.benefit-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
font-size: 26rpx;
|
||
color: #4a3f63;
|
||
}
|
||
|
||
.benefit-item .indicator {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #ff62e2 0%, #864dff 100%);
|
||
}
|
||
|
||
.feature-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.feature-tags .tag {
|
||
padding: 14rpx 24rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #7b3cff;
|
||
background: rgba(123, 60, 255, 0.08);
|
||
}
|
||
|
||
.card-action {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.subscribe-button {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
border-radius: 28rpx;
|
||
background: linear-gradient(135deg, #ff47c8 0%, #8547ff 100%);
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 20rpx 40rpx rgba(133, 71, 255, 0.25);
|
||
}
|
||
|
||
.subscribe-button::after {
|
||
border: none;
|
||
}
|
||
</style> |