Blizzard
264 lines
9.8 KiB
Plaintext
264 lines
9.8 KiB
Plaintext
<!-- 会员/订阅中心 -->
|
||
<page-meta page-style="overflow: hidden;" />
|
||
<view class="vip-page">
|
||
|
||
<!-- ── 已是 VIP，展示会员权益页 ── -->
|
||
<view wx:if="{{isVip && mode === 'vip'}}" class="vip-done">
|
||
|
||
<!-- 头部云光装饰 -->
|
||
<view class="vip-glow"></view>
|
||
|
||
<!-- 安全区域占位 -->
|
||
<view style="height: {{statusBarHeight}}px;"></view>
|
||
|
||
<!-- 嵇章区 -->
|
||
<view class="vip-done-hero">
|
||
<view class="vip-crown-wrap">
|
||
<text class="vip-crown">👑</text>
|
||
<view class="vip-crown-ring ring-1"></view>
|
||
<view class="vip-crown-ring ring-2"></view>
|
||
</view>
|
||
<text class="vip-done-title">全频道会员</text>
|
||
<view wx:if="{{vipExpireAt}}" class="vip-expire-badge">
|
||
<text class="vip-expire-text">永久有效 · 不限期限</text>
|
||
</view>
|
||
<view wx:else class="vip-expire-badge">
|
||
<text class="vip-expire-text">永久有效 · 不限期限</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 权益卡片网格 -->
|
||
<view class="vip-done-benefits">
|
||
<view class="vip-benefit-item">
|
||
<text class="vb-icon">🔓</text>
|
||
<text class="vb-name">全频道解锁</text>
|
||
</view>
|
||
<view class="vip-benefit-item">
|
||
<text class="vb-icon">🎧</text>
|
||
<text class="vb-name">免广告收听</text>
|
||
</view>
|
||
<view class="vip-benefit-item">
|
||
<text class="vb-icon">⭐</text>
|
||
<text class="vb-name">优先推送</text>
|
||
</view>
|
||
<view class="vip-benefit-item">
|
||
<text class="vb-icon">💬</text>
|
||
<text class="vb-name">互动评论</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 返回按钮 -->
|
||
<view class="vip-done-actions">
|
||
<button class="done-back-btn" bindtap="goBack">返回收听</button>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- ── 主Scroll区域 ── -->
|
||
<scroll-view
|
||
wx:else
|
||
scroll-y
|
||
enhanced
|
||
show-scrollbar="{{false}}"
|
||
class="vip-scroll"
|
||
>
|
||
|
||
<!-- 头部区域，根据模式切换文案 -->
|
||
<view class="vip-hero">
|
||
<text class="vip-hero-title">{{mode === 'channel' ? channelName : '开通全频道会员'}}</text>
|
||
<text class="vip-hero-desc">
|
||
{{mode === 'channel' ? '选择适合你的订阅方案，随时随地收听' : '一次开通，永久解锁全部频道'}}
|
||
</text>
|
||
</view>
|
||
|
||
<!-- ────── MODE: VIP 全频道 ────── -->
|
||
<block wx:if="{{mode === 'vip'}}">
|
||
<!-- 权益卡片 -->
|
||
<view class="benefits-card-wrap">
|
||
<view class="card benefits-card">
|
||
<view class="benefits-title">
|
||
<text class="benefit-crown">👑</text>
|
||
<text>会员专属特权</text>
|
||
</view>
|
||
<view class="benefits-grid">
|
||
<view class="benefit-item">
|
||
<text class="benefit-check">🔓</text>
|
||
<view class="benefit-info">
|
||
<text class="benefit-name">全频道解锁</text>
|
||
<text class="benefit-desc">所有频道自由听</text>
|
||
</view>
|
||
</view>
|
||
<view class="benefit-item">
|
||
<text class="benefit-check">🎧</text>
|
||
<view class="benefit-info">
|
||
<text class="benefit-name">免广告收听</text>
|
||
<text class="benefit-desc">纯净无打扰体验</text>
|
||
</view>
|
||
</view>
|
||
<view class="benefit-item">
|
||
<text class="benefit-check">⭐</text>
|
||
<view class="benefit-info">
|
||
<text class="benefit-name">优先推送</text>
|
||
<text class="benefit-desc">新内容第一时间送达</text>
|
||
</view>
|
||
</view>
|
||
<view class="benefit-item">
|
||
<text class="benefit-check">💬</text>
|
||
<view class="benefit-info">
|
||
<text class="benefit-name">互动评论</text>
|
||
<text class="benefit-desc">与创作者直接交流</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 套餐 -->
|
||
<view class="plan-section">
|
||
<text class="plan-title">选择套餐</text>
|
||
<view
|
||
class="plan-card {{selectedPlan === 'vip-all' ? 'selected' : ''}}"
|
||
bindtap="selectPlan"
|
||
data-plan="vip-all"
|
||
>
|
||
<view wx:if="{{vipOriginalPrice}}" class="plan-badge">限时特惠</view>
|
||
<view class="plan-info">
|
||
<text class="plan-name">永久会员</text>
|
||
<text class="plan-desc">一次购买，永久畅听全部频道</text>
|
||
</view>
|
||
<view class="plan-price">
|
||
<text class="price-amount"><text class="price-symbol">¥</text>{{vipPrice || currentPrice}}</text>
|
||
<text class="price-original" wx:if="{{vipOriginalPrice}}">¥{{vipOriginalPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- VIP 提示（来自后端 remark） -->
|
||
<view wx:if="{{vipRemark}}" class="subscribe-disclaimer">
|
||
<text class="disclaimer-text">{{vipRemark}}</text>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- ────── MODE: 频道订阅 ────── -->
|
||
<block wx:else>
|
||
<!-- 权益说明 -->
|
||
<view class="benefits-card-wrap">
|
||
<view class="card benefits-card">
|
||
<view class="benefits-title">
|
||
<text class="benefit-crown">🎙️</text>
|
||
<text>订阅后专属权益</text>
|
||
</view>
|
||
<view class="benefit-item" style="width:100%; margin-bottom:16rpx;">
|
||
<text class="benefit-check">✅</text>
|
||
<view class="benefit-info">
|
||
<text class="benefit-name">无限收听该频道全部节目</text>
|
||
<text class="benefit-desc">订阅期内随时播放，无次数限制</text>
|
||
</view>
|
||
</view>
|
||
<view class="benefit-item" style="width:100%; margin-bottom:16rpx;">
|
||
<text class="benefit-check">🔔</text>
|
||
<view class="benefit-info">
|
||
<text class="benefit-name">新节目第一时间通知</text>
|
||
<text class="benefit-desc">每日晨间准时推送</text>
|
||
</view>
|
||
</view>
|
||
<view class="benefit-item" style="width:100%;">
|
||
<text class="benefit-check">🎧</text>
|
||
<view class="benefit-info">
|
||
<text class="benefit-name">后台播放，不中断</text>
|
||
<text class="benefit-desc">边听边做其他事</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 价格套餐 -->
|
||
<view class="plan-section">
|
||
<text class="plan-title">选择方案</text>
|
||
|
||
<!-- 包月 -->
|
||
<view
|
||
wx:if="{{monthlyPrice > 0}}"
|
||
class="plan-card {{selectedPlan === 'monthly' ? 'selected' : ''}}"
|
||
bindtap="selectPlan"
|
||
data-plan="monthly"
|
||
>
|
||
<view class="plan-info">
|
||
<text class="plan-name">包月</text>
|
||
<text class="plan-desc">按月订阅，随时取消</text>
|
||
</view>
|
||
<view class="plan-price">
|
||
<text class="price-amount"><text class="price-symbol">¥</text>{{monthlyPrice}}</text>
|
||
<text class="price-original">/ 月</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 包季 -->
|
||
<view
|
||
wx:if="{{quarterlyPrice > 0}}"
|
||
class="plan-card {{selectedPlan === 'quarterly' ? 'selected' : ''}}"
|
||
bindtap="selectPlan"
|
||
data-plan="quarterly"
|
||
>
|
||
<view wx:if="{{_quarterlySaving > 0}}" class="plan-badge plan-badge-save">省{{_quarterlySaving}}元</view>
|
||
<view class="plan-info">
|
||
<text class="plan-name">包季</text>
|
||
<text class="plan-desc">约¥{{_quarterlyMonthly}}/月，比包月更划算</text>
|
||
</view>
|
||
<view class="plan-price">
|
||
<text class="price-amount"><text class="price-symbol">¥</text>{{quarterlyPrice}}</text>
|
||
<text class="price-original">/ 季</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 包年 -->
|
||
<view
|
||
wx:if="{{annualPrice > 0}}"
|
||
class="plan-card {{selectedPlan === 'annual' ? 'selected' : ''}}"
|
||
bindtap="selectPlan"
|
||
data-plan="annual"
|
||
>
|
||
<view class="plan-badge plan-badge-hot">最受欢迎</view>
|
||
<view wx:if="{{_annualSaving > 0}}" class="plan-badge plan-badge-save" style="right: 96rpx;">省{{_annualSaving}}元</view>
|
||
<view class="plan-info">
|
||
<text class="plan-name">包年</text>
|
||
<text class="plan-desc">约¥{{_annualMonthly}}/月，最优惠</text>
|
||
</view>
|
||
<view class="plan-price">
|
||
<text class="price-amount"><text class="price-symbol">¥</text>{{annualPrice}}</text>
|
||
<text class="price-original">/ 年</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订阅免责提示 -->
|
||
<view class="subscribe-disclaimer">
|
||
<text class="disclaimer-text">声音产品属于虚拟数字内容，订阅成功后不支持退款及转让。感谢你对原创声音的支持，愿这段旅程让你觉得物超所值。</text>
|
||
</view>
|
||
</block>
|
||
|
||
</scroll-view>
|
||
|
||
<!-- 底部支付栏（scroll-view 外，flex 布局固定底部，真机可靠） -->
|
||
<view class="pay-bar" wx:if="{{!isVip || mode === 'channel'}}">
|
||
<view class="pay-summary">
|
||
<text class="pay-label">总计：</text>
|
||
<text class="pay-amount">¥{{currentPrice}}</text>
|
||
</view>
|
||
<view class="pay-method">
|
||
<text class="pay-method-text">使用 微信支付 支付</text>
|
||
<text class="wechat-check">✓</text>
|
||
</view>
|
||
<t-button
|
||
theme="primary"
|
||
shape="round"
|
||
block
|
||
size="large"
|
||
bind:tap="onPay"
|
||
style="--td-button-primary-bg-color: #FF9E6D; --td-button-primary-active-bg-color: #E88A35;"
|
||
>
|
||
{{mode === 'channel' ? '立即订阅并支付' : '立即开通并支付'}}
|
||
</t-button>
|
||
</view>
|
||
</view>
|