215 lines
9.1 KiB
Plaintext
215 lines
9.1 KiB
Plaintext
<!-- VIP 会员 + 积分充值页 -->
|
|
<view class="vip-page">
|
|
<image wx:if="{{imgUrls.pageBg}}" class="page-bg" src="{{imgUrls.pageBg}}" mode="widthFix" />
|
|
<view class="page-bg-fallback" wx:else></view>
|
|
|
|
<view class="page-body">
|
|
<view class="user-row">
|
|
<image class="user-avatar" src="{{avatarUrl}}" mode="aspectFill" binderror="onAvatarError" />
|
|
<view class="user-info">
|
|
<text class="user-name">{{nickname || '打手'}}</text>
|
|
<text class="user-id">会员ID: {{uid || '--'}}</text>
|
|
</view>
|
|
<view class="member-badge">{{memberBadge}}</view>
|
|
</view>
|
|
|
|
<swiper
|
|
class="vip-swiper"
|
|
current="{{currentHuiyuanIndex}}"
|
|
circular="{{huiyuanList.length > 1}}"
|
|
previous-margin="40rpx"
|
|
next-margin="40rpx"
|
|
duration="400"
|
|
bindchange="onSwiperChange">
|
|
<swiper-item wx:for="{{huiyuanList}}" wx:key="id">
|
|
<view class="vip-card {{index === currentHuiyuanIndex ? 'vip-card--active' : ''}}" data-index="{{index}}" bindtap="selectHuiyuan">
|
|
<image wx:if="{{item.cardBgUrl}}" class="vip-card-bg-img" src="{{item.cardBgUrl}}" mode="aspectFill" />
|
|
<view class="vip-card-bg" wx:else></view>
|
|
<view class="vip-card-inner">
|
|
<view class="vip-card-left">
|
|
<view class="vip-title-row">
|
|
<text class="vip-name">{{item.mingzi}}</text>
|
|
<view class="vip-status">{{item.isBought ? '已激活' : '未激活'}}</view>
|
|
</view>
|
|
<view class="vip-price-row">
|
|
<text class="vip-currency">¥</text>
|
|
<text class="vip-price">{{item.jiage}}</text>
|
|
</view>
|
|
<text class="vip-validity">有效期 {{item.formal_days || 30}} 天</text>
|
|
</view>
|
|
<view class="vip-card-right">
|
|
<view class="icon-clip icon-clip-vip" wx:if="{{item.cardImageUrl}}">
|
|
<image class="icon-clip-img" src="{{item.cardImageUrl}}" mode="aspectFill" />
|
|
</view>
|
|
<view class="vip-logo-fallback" wx:else>
|
|
<text class="vip-logo-text">VIP</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="vip-shimmer"></view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">{{rulesTitle || ((currentHuiyuan.mingzi || '会员') + '规则')}}</text>
|
|
</view>
|
|
<scroll-view class="rules-scroll" scroll-x enable-flex>
|
|
<view class="rules-row">
|
|
<view wx:for="{{detailRules}}" wx:key="index" class="rule-card">
|
|
<view class="rule-num">{{index + 1}}</view>
|
|
<text class="rule-text">{{item}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">{{benefitsTitle || ((currentHuiyuan.mingzi || '会员') + '专属权益')}}</text>
|
|
</view>
|
|
<view class="benefits-row">
|
|
<view wx:for="{{memberBenefits}}" wx:key="title" class="benefit-card">
|
|
<view wx:if="{{item.iconUrl}}" class="icon-clip icon-clip-benefit">
|
|
<image class="icon-clip-img" src="{{item.iconUrl}}" mode="aspectFill" />
|
|
</view>
|
|
<text class="benefit-title">{{item.title}}</text>
|
|
<text class="benefit-desc" style="{{item.accentStyle}}">{{item.desc}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">{{advantagesTitle || '平台优势'}}</text>
|
|
</view>
|
|
<view class="advantage-grid">
|
|
<view wx:for="{{platformAdvantages}}" wx:key="title" class="advantage-item">
|
|
<view wx:if="{{item.iconUrl}}" class="icon-clip icon-clip-advantage">
|
|
<image class="icon-clip-img" src="{{item.iconUrl}}" mode="aspectFill" />
|
|
</view>
|
|
<text class="advantage-title">{{item.title}}</text>
|
|
<text class="advantage-desc">{{item.desc}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view id="jifen-section" class="jifen-section">
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">积分充值</text>
|
|
</view>
|
|
<view class="jifen-card">
|
|
<view class="jifen-left">
|
|
<text class="jifen-label">当前积分</text>
|
|
<text class="jifen-value">{{jifen}}</text>
|
|
<text class="jifen-tip" wx:if="{{jifen < 10}}">积分不足将影响接单与提现</text>
|
|
<text class="jifen-tip jifen-tip--ok" wx:else>积分充足</text>
|
|
</view>
|
|
<view class="jifen-btn {{jifen >= 10 ? 'jifen-btn--disabled' : ''}}" bindtap="onJifenClick" data-disabled="{{jifen >= 10}}">
|
|
{{jifen >= 10 ? '已满' : '补充积分'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="owned-section" wx:if="{{clubmber.length > 0}}">
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">我的会员</text>
|
|
</view>
|
|
<view wx:for="{{clubmber}}" wx:key="huiyuanid" class="owned-item" data-item="{{item}}" bindtap="showMemberDetail">
|
|
<text class="owned-name">{{item.huiyuanming}}</text>
|
|
<text class="owned-expire">到期 {{formatDaoqiTime(item.daoqi)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer-bar">
|
|
<view class="deposit-banner" bindtap="goToDeposit">
|
|
<text class="deposit-banner-text">缴纳履约金，快人一步</text>
|
|
<text class="deposit-banner-link">去缴纳 ></text>
|
|
</view>
|
|
<view class="agree-row" bindtap="toggleAgree">
|
|
<view class="agree-check {{agreed ? 'agree-check--on' : ''}}">{{agreed ? '✓' : ''}}</view>
|
|
<text class="agree-text">已阅读并同意</text>
|
|
<text class="agree-link">《{{currentHuiyuan.mingzi || '会员'}}协议》</text>
|
|
</view>
|
|
<view class="buy-row">
|
|
<view
|
|
wx:if="{{currentHuiyuan.can_buy_trial}}"
|
|
class="buy-btn buy-btn--outline"
|
|
bindtap="onTapTrial"
|
|
data-id="{{currentHuiyuan.id}}"
|
|
data-trial="true">
|
|
体验会员 (￥{{currentHuiyuan.trial_price}})
|
|
</view>
|
|
<view
|
|
class="buy-btn buy-btn--primary {{currentHuiyuan.can_buy_trial ? '' : 'buy-btn--full'}}"
|
|
bindtap="onTapFormal"
|
|
data-id="{{currentHuiyuan.id}}"
|
|
data-trial="false">
|
|
{{currentHuiyuan.isBought ? '续费正式会员' : '升级正式会员'}} (￥{{currentHuiyuan.jiage}})
|
|
<view class="buy-btn-shimmer"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付方式 -->
|
|
<view class="modal-mask" wx:if="{{showPayMethodModal}}" bindtap="hidePayMethodModal">
|
|
<view class="modal-panel" catchtap="stopPropagation">
|
|
<text class="modal-title">选择支付方式</text>
|
|
<view class="pay-method-item" bindtap="onPayMethodSelect" data-method="wx">
|
|
<text class="pay-method-name">微信支付</text>
|
|
<text class="pay-method-desc">安全快捷</text>
|
|
</view>
|
|
<view class="pay-method-item" bindtap="onPayMethodSelect" data-method="alipay">
|
|
<text class="pay-method-name">支付宝</text>
|
|
<text class="pay-method-desc">扫码支付</text>
|
|
</view>
|
|
<view class="pay-method-item" bindtap="onPayMethodSelect" data-method="balance">
|
|
<text class="pay-method-name">余额抵扣</text>
|
|
<text class="pay-method-desc">使用佣金或分红</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-mask" wx:if="{{showBalanceModal}}" bindtap="hideBalanceModal">
|
|
<view class="modal-panel" catchtap="stopPropagation">
|
|
<text class="modal-title">选择抵扣身份</text>
|
|
<view wx:for="{{balanceOptions}}" wx:key="id" class="balance-item" bindtap="onBalanceSelect" data-id="{{item.id}}">
|
|
<text>{{item.jieshao}}</text>
|
|
<text class="balance-need">需¥{{item.xuyao}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-mask" wx:if="{{showConfirmModal}}" bindtap="hideConfirmModal">
|
|
<view class="modal-panel" catchtap="stopPropagation">
|
|
<text class="modal-title">确认抵扣</text>
|
|
<view class="confirm-row"><text>身份</text><text>{{selectedBalanceInfo.jieshao}}</text></view>
|
|
<view class="confirm-row"><text>金额</text><text>¥{{selectedBalanceInfo.xuyao}}</text></view>
|
|
<view class="modal-actions">
|
|
<view class="modal-btn cancel" bindtap="hideConfirmModal">取消</view>
|
|
<view class="modal-btn confirm" bindtap="confirmBalancePay">确认支付</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-mask" wx:if="{{showMemberModal}}" bindtap="hideMemberModal">
|
|
<view class="modal-panel" catchtap="stopPropagation">
|
|
<text class="modal-title">会员详情</text>
|
|
<view class="confirm-row"><text>名称</text><text>{{currentMemberDetail.huiyuanming}}</text></view>
|
|
<view class="confirm-row"><text>到期</text><text>{{currentMemberDetail.daoqi}}</text></view>
|
|
<view class="confirm-row"><text>剩余</text><text>{{formatRemainTime(currentMemberDetail.daoqi)}}</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loading-mask" wx:if="{{payLoading}}">
|
|
<view class="loading-box">
|
|
<view class="loading-spinner"></view>
|
|
<text>{{loadingText}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<global-notification id="global-notification" />
|
|
<popup-notice id="popupNotice" />
|