|
@@ -30,15 +30,13 @@
|
|
|
:class="selectedLevel === lv.levelCode ? 'level-tab-active' : ''"
|
|
:class="selectedLevel === lv.levelCode ? 'level-tab-active' : ''"
|
|
|
@click="selectLevel(lv.levelCode)">
|
|
@click="selectLevel(lv.levelCode)">
|
|
|
<text class="level-tab-name">{{ lv.levelName }}</text>
|
|
<text class="level-tab-name">{{ lv.levelName }}</text>
|
|
|
- <text class="level-tab-price">¥{{ getLevelYearlyPrice(lv.levelCode) }}/年</text>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 开通/升级卡片(免费用户开通,或已付费用户切换到其他等级时升级) -->
|
|
|
|
|
- <view class="upgrade-card" v-if="isFree || selectedLevel !== currentMemberLevel">
|
|
|
|
|
|
|
+ <!-- 开通/升级/续费卡片(标题统一为所选等级名) -->
|
|
|
|
|
+ <view class="upgrade-card">
|
|
|
<view class="upgrade-header">
|
|
<view class="upgrade-header">
|
|
|
<text class="upgrade-title">{{ getSelectedLevelName() }}</text>
|
|
<text class="upgrade-title">{{ getSelectedLevelName() }}</text>
|
|
|
- <text class="upgrade-subtitle">{{ selectedLevel }}</text>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 档位选择 -->
|
|
<!-- 档位选择 -->
|
|
|
<view class="period-tabs">
|
|
<view class="period-tabs">
|
|
@@ -57,29 +55,6 @@
|
|
|
<button class="btn-upgrade" @click="goNext">下一步</button>
|
|
<button class="btn-upgrade" @click="goNext">下一步</button>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 续费卡片(已付费用户保持当前等级) -->
|
|
|
|
|
- <view class="upgrade-card" v-else>
|
|
|
|
|
- <view class="upgrade-header">
|
|
|
|
|
- <text class="upgrade-title">续费会员</text>
|
|
|
|
|
- <text class="upgrade-subtitle">保持权益不中断</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- 档位选择 -->
|
|
|
|
|
- <view class="period-tabs">
|
|
|
|
|
- <view
|
|
|
|
|
- class="period-tab"
|
|
|
|
|
- v-for="p in visiblePeriods"
|
|
|
|
|
- :key="p.key"
|
|
|
|
|
- :class="selectedPeriod === p.key ? 'period-tab-active' : ''"
|
|
|
|
|
- @click="selectPeriod(p.key)"
|
|
|
|
|
- >
|
|
|
|
|
- <text class="period-tab-label">{{ p.label }}</text>
|
|
|
|
|
- <text class="period-tab-price">¥{{ getPriceForPeriod(p.key) }}</text>
|
|
|
|
|
- <text class="period-original" v-if="showOriginalPrice(p.key)">¥{{ getOriginalPriceForPeriod(p.key) / 100 }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <button class="btn-upgrade btn-renew" @click="goNext">下一步</button>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
<!-- 权益对比表 -->
|
|
<!-- 权益对比表 -->
|
|
|
<view class="compare-section">
|
|
<view class="compare-section">
|
|
|
<text class="section-title">权益对比</text>
|
|
<text class="section-title">权益对比</text>
|
|
@@ -151,7 +126,6 @@ export default {
|
|
|
],
|
|
],
|
|
|
selectedPeriod: 'yearly',
|
|
selectedPeriod: 'yearly',
|
|
|
selectedLevel: 'FAMILY',
|
|
selectedLevel: 'FAMILY',
|
|
|
- currentMemberLevel: 'FREE',
|
|
|
|
|
joinRules: [],
|
|
joinRules: [],
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -224,12 +198,10 @@ export default {
|
|
|
this.membership = membershipRes.data
|
|
this.membership = membershipRes.data
|
|
|
if (this.membership && this.membership.memberLevel && this.membership.memberLevel !== 'FREE') {
|
|
if (this.membership && this.membership.memberLevel && this.membership.memberLevel !== 'FREE') {
|
|
|
this.isFree = false
|
|
this.isFree = false
|
|
|
- this.currentMemberLevel = this.membership.memberLevel
|
|
|
|
|
this.currentLevelName = this.membership.levelName || '家庭会员'
|
|
this.currentLevelName = this.membership.levelName || '家庭会员'
|
|
|
this.selectedLevel = this.membership.memberLevel
|
|
this.selectedLevel = this.membership.memberLevel
|
|
|
} else {
|
|
} else {
|
|
|
this.isFree = true
|
|
this.isFree = true
|
|
|
- this.currentMemberLevel = 'FREE'
|
|
|
|
|
this.currentLevelName = '免费用户'
|
|
this.currentLevelName = '免费用户'
|
|
|
this.selectedLevel = 'FAMILY'
|
|
this.selectedLevel = 'FAMILY'
|
|
|
}
|
|
}
|
|
@@ -255,14 +227,6 @@ export default {
|
|
|
this.selectedLevel = code
|
|
this.selectedLevel = code
|
|
|
this.selectedPeriod = 'yearly'
|
|
this.selectedPeriod = 'yearly'
|
|
|
},
|
|
},
|
|
|
- getLevelYearlyPrice: function(code) {
|
|
|
|
|
- for (var i = 0; i < this.levels.length; i++) {
|
|
|
|
|
- if (this.levels[i].levelCode === code) {
|
|
|
|
|
- return this.levels[i].yearly ? (this.levels[i].yearly / 100).toFixed(0) : '0'
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- return '0'
|
|
|
|
|
- },
|
|
|
|
|
selectPeriod: function(key) {
|
|
selectPeriod: function(key) {
|
|
|
this.selectedPeriod = key
|
|
this.selectedPeriod = key
|
|
|
},
|
|
},
|
|
@@ -425,12 +389,6 @@ export default {
|
|
|
color: #1E293B;
|
|
color: #1E293B;
|
|
|
display: block;
|
|
display: block;
|
|
|
}
|
|
}
|
|
|
-.upgrade-subtitle {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: #94A3B8;
|
|
|
|
|
- margin-top: 6rpx;
|
|
|
|
|
- display: block;
|
|
|
|
|
-}
|
|
|
|
|
.btn-upgrade {
|
|
.btn-upgrade {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 88rpx;
|
|
height: 88rpx;
|
|
@@ -449,9 +407,6 @@ export default {
|
|
|
.btn-upgrade:active {
|
|
.btn-upgrade:active {
|
|
|
opacity: 0.9;
|
|
opacity: 0.9;
|
|
|
}
|
|
}
|
|
|
-.btn-renew {
|
|
|
|
|
- background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
|
|
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
/* ===== 权益对比 ===== */
|
|
/* ===== 权益对比 ===== */
|
|
|
.compare-section {
|
|
.compare-section {
|
|
@@ -562,12 +517,6 @@ export default {
|
|
|
color: #1E293B;
|
|
color: #1E293B;
|
|
|
display: block;
|
|
display: block;
|
|
|
}
|
|
}
|
|
|
-.level-tab-price {
|
|
|
|
|
- font-size: 22rpx;
|
|
|
|
|
- color: #F97316;
|
|
|
|
|
- margin-top: 6rpx;
|
|
|
|
|
- display: block;
|
|
|
|
|
-}
|
|
|
|
|
.level-tab-active .level-tab-name {
|
|
.level-tab-active .level-tab-name {
|
|
|
color: #F97316;
|
|
color: #F97316;
|
|
|
}
|
|
}
|