102 lines
4.2 KiB
Plaintext
102 lines
4.2 KiB
Plaintext
<view class="page safe-bottom">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="unified-header">
|
|
<view class="unified-header-left" bindtap="onBack">
|
|
<image src="/images/icon-back.png" class="unified-back-icon" mode="aspectFit"></image>
|
|
<text class="unified-back-text">返回</text>
|
|
</view>
|
|
<text class="unified-header-title">购买中心</text>
|
|
<view class="unified-header-right"></view>
|
|
</view>
|
|
|
|
<scroll-view class="content" scroll-y style="padding-top: 194rpx">
|
|
<view class="tab-content">
|
|
<view class="special-offers">
|
|
<view class="offer-card {{item.vipType}}" wx:for="{{products}}" wx:key="id" bindtap="openProductPay" data-id="{{item.id}}" style="{{item.gradient}}">
|
|
<view class="offer-tag" wx:if="{{item.tagText}}" style="{{item.tagStyle}}">{{item.tagText}}</view>
|
|
<view class="offer-body">
|
|
<view class="offer-price-row">
|
|
<text class="offer-symbol">¥</text>
|
|
<text class="offer-price">{{item.price}}</text>
|
|
<text class="offer-oprice" wx:if="{{item.originalPrice}}">¥{{item.originalPrice}}</text>
|
|
</view>
|
|
<text class="offer-title">{{item.title}}</text>
|
|
<text class="offer-sub">{{item.subtitle}}</text>
|
|
</view>
|
|
<view class="offer-btn">立即购买</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="member-center" wx:if="{{vipPackages.length}}">
|
|
<view class="section-head">
|
|
<view class="section-indicator" />
|
|
<text class="section-title">套餐内容</text>
|
|
</view>
|
|
|
|
<view class="vip-list">
|
|
<view class="vip-item" wx:for="{{vipPackages}}" wx:key="id" bindtap="openProductPay" data-id="{{item.id}}" style="{{item.borderStyle}}">
|
|
<view class="vip-tag-corner" wx:if="{{item.isRecommend}}">推荐</view>
|
|
<view class="vip-main">
|
|
<view class="vip-icon-box" style="{{item.iconGradient}}">
|
|
<app-icon name="{{item.icon}}" size="48" color="#ffffff" />
|
|
</view>
|
|
<view class="vip-info">
|
|
<text class="vip-title">{{item.title}}</text>
|
|
<text class="vip-desc">{{item.subtitle}}</text>
|
|
</view>
|
|
<view class="vip-price-col">
|
|
<text class="vip-price" style="{{item.priceColor}}">¥{{item.price}}</text>
|
|
<text class="vip-oprice" wx:if="{{item.originalPrice}}">¥{{item.originalPrice}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="vip-benefits" wx:if="{{item.benefits && item.benefits.length}}">
|
|
<view class="benefit-row" wx:for="{{item.benefits}}" wx:key="*this" wx:for-item="benefit">
|
|
<app-icon name="check" size="32" color="{{item.checkColor}}" />
|
|
<text class="benefit-text">{{benefit}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="btn-reset vip-buy-btn" style="{{item.btnGradient}}">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- Modal -->
|
|
<view wx:if="{{modal.visible}}" class="modal">
|
|
<view class="mask" catchtap="closeModal" />
|
|
<view class="sheet">
|
|
<view class="sheet-head">
|
|
<text class="sheet-title">确认订单</text>
|
|
<text class="sheet-sub">请确认您的购买信息</text>
|
|
</view>
|
|
|
|
<view class="sheet-card">
|
|
<view class="sheet-icon-box">
|
|
<app-icon name="crown" size="56" color="#B06AB3" />
|
|
</view>
|
|
<view class="sheet-info">
|
|
<text class="sheet-name">{{modal.title}}</text>
|
|
<text class="sheet-desc">购买开通</text>
|
|
</view>
|
|
<view class="sheet-price-box">
|
|
<text class="sheet-price-val">¥{{modal.price}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="vip-benefits" wx:if="{{modal.benefits && modal.benefits.length}}">
|
|
<view class="benefit-row" wx:for="{{modal.benefits}}" wx:key="*this" wx:for-item="benefit">
|
|
<app-icon name="check" size="32" color="#B06AB3" />
|
|
<text class="benefit-text">{{benefit}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="btn-reset sheet-btn" bindtap="confirmAction">
|
|
立即支付
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|