Blizzard
99 lines
3.4 KiB
Plaintext
99 lines
3.4 KiB
Plaintext
<!-- 订阅支付页 -->
|
|
<page-meta page-style="overflow: hidden;" />
|
|
<view class="subscribe-page">
|
|
|
|
<!-- 顶部频道信息 -->
|
|
<view class="channel-card">
|
|
<view class="channel-avatar">
|
|
<text class="channel-avatar-emoji">📻</text>
|
|
</view>
|
|
<text class="channel-title">{{channelName}}</text>
|
|
<text class="channel-desc">选择适合你的订阅方案</text>
|
|
</view>
|
|
|
|
<!-- 价格套餐选择 -->
|
|
<view class="plans-wrap">
|
|
<!-- 包月 -->
|
|
<view
|
|
wx:if="{{monthlyPrice > 0}}"
|
|
class="plan-card {{selectedPlan === 'monthly' ? 'selected' : ''}}"
|
|
bindtap="selectPlan"
|
|
data-plan="monthly"
|
|
>
|
|
<view class="plan-top">
|
|
<text class="plan-name">包月</text>
|
|
<view class="plan-badge" wx:if="{{selectedPlan === 'monthly'}}">
|
|
<t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
|
|
</view>
|
|
</view>
|
|
<text class="plan-price">¥{{monthlyPrice}}</text>
|
|
<text class="plan-unit">/ 月</text>
|
|
</view>
|
|
|
|
<!-- 包季 -->
|
|
<view
|
|
wx:if="{{quarterlyPrice > 0}}"
|
|
class="plan-card {{selectedPlan === 'quarterly' ? 'selected' : ''}}"
|
|
bindtap="selectPlan"
|
|
data-plan="quarterly"
|
|
>
|
|
<view class="plan-top">
|
|
<text class="plan-name">包季</text>
|
|
<t-tag wx:if="{{quarterlyPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_quarterlySaving}}元</t-tag>
|
|
<view class="plan-badge" wx:if="{{selectedPlan === 'quarterly'}}">
|
|
<t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
|
|
</view>
|
|
</view>
|
|
<text class="plan-price">¥{{quarterlyPrice}}</text>
|
|
<text class="plan-unit">/ 季 · 约¥{{_quarterlyMonthly}}/月</text>
|
|
</view>
|
|
|
|
<!-- 包年 -->
|
|
<view
|
|
wx:if="{{annualPrice > 0}}"
|
|
class="plan-card popular {{selectedPlan === 'annual' ? 'selected' : ''}}"
|
|
bindtap="selectPlan"
|
|
data-plan="annual"
|
|
>
|
|
<view class="plan-hot-tag">最受欢迎</view>
|
|
<view class="plan-top">
|
|
<text class="plan-name">包年</text>
|
|
<t-tag wx:if="{{annualPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_annualSaving}}元</t-tag>
|
|
<view class="plan-badge" wx:if="{{selectedPlan === 'annual'}}">
|
|
<t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
|
|
</view>
|
|
</view>
|
|
<text class="plan-price">¥{{annualPrice}}</text>
|
|
<text class="plan-unit">/ 年 · 约¥{{_annualMonthly}}/月</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 权益说明 -->
|
|
<view class="benefits">
|
|
<view class="benefit-item">
|
|
<t-icon name="check" size="28rpx" color="#FF9E6D" />
|
|
<text>订阅后可无限收听该频道所有节目</text>
|
|
</view>
|
|
<view class="benefit-item">
|
|
<t-icon name="check" size="28rpx" color="#FF9E6D" />
|
|
<text>后台播放，边听边做其他事</text>
|
|
</view>
|
|
<view class="benefit-item">
|
|
<t-icon name="check" size="28rpx" color="#FF9E6D" />
|
|
<text>新节目第一时间推送通知</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部支付按钮 -->
|
|
<view class="pay-bar">
|
|
<view class="pay-amount" wx:if="{{selectedPlan}}">
|
|
<text class="pay-label">合计</text>
|
|
<text class="pay-price">¥{{currentPrice}}</text>
|
|
</view>
|
|
<view class="pay-btn tap-active" bindtap="onPay">
|
|
<text>立即订阅</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|