528 lines
20 KiB
Plaintext
528 lines
20 KiB
Plaintext
<!--pages/dashou-chongzhi/index.wxml-->
|
||
<view class="page-container">
|
||
<!-- ❌ 删除自定义导航栏区块 -->
|
||
|
||
<!-- ======================= -->
|
||
<!-- VIP会员区域 - 放在上面 -->
|
||
<!-- ======================= -->
|
||
<view class="vip-section">
|
||
<view class="section-header">
|
||
<view class="header-decoration">
|
||
<view class="dec-line"></view>
|
||
<view class="dec-diamond"></view>
|
||
<text class="dec-text">VIP会员充值</text>
|
||
<view class="dec-diamond"></view>
|
||
<view class="dec-line"></view>
|
||
</view>
|
||
<text class="section-subtitle">选择你的会员</text>
|
||
</view>
|
||
|
||
<!-- 会员卡片滑动区域 -->
|
||
<swiper
|
||
class="vip-swiper"
|
||
current="{{currentHuiyuanIndex}}"
|
||
circular="{{true}}"
|
||
previous-margin="120rpx"
|
||
next-margin="120rpx"
|
||
duration="500"
|
||
easing-function="easeOutCubic"
|
||
bindchange="onSwiperChange">
|
||
<swiper-item wx:for="{{huiyuanList}}" wx:key="id">
|
||
<view class="vip-card {{index === currentHuiyuanIndex ? 'active' : ''}}"
|
||
data-index="{{index}}" bindtap="selectHuiyuan">
|
||
<!-- 机甲风格边框 -->
|
||
<view class="card-frame">
|
||
<view class="frame-corner tl"></view>
|
||
<view class="frame-corner tr"></view>
|
||
<view class="frame-corner bl"></view>
|
||
<view class="frame-corner br"></view>
|
||
<view class="frame-line top"></view>
|
||
<view class="frame-line right"></view>
|
||
<view class="frame-line bottom"></view>
|
||
<view class="frame-line left"></view>
|
||
</view>
|
||
|
||
<!-- 卡片内容 -->
|
||
<view class="card-content">
|
||
<view class="vip-badge" wx:if="{{item.isBought}}">
|
||
<text class="badge-text">已拥有</text>
|
||
</view>
|
||
|
||
<view class="vip-title">
|
||
<text class="title-text">{{item.mingzi}}</text>
|
||
<view class="title-underline"></view>
|
||
</view>
|
||
|
||
<view class="vip-price">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-number">{{item.jiage}}</text>
|
||
<text class="price-unit">/{{item.formal_days || 30}}天</text>
|
||
</view>
|
||
|
||
<view class="vip-features">
|
||
<view class="feature-item" wx:for="{{item.features || ['特权功能', '专属标识', '优先接单']}}"
|
||
wx:key="index">
|
||
<image class="feature-icon" src="/static/images/check-tech.png"></image>
|
||
<text class="feature-text">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选中状态指示器 -->
|
||
<view class="card-indicator" wx:if="{{index === currentHuiyuanIndex}}">
|
||
<view class="indicator-triangle"></view>
|
||
<view class="indicator-glow"></view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 会员详细介绍 -->
|
||
<view class="vip-detail">
|
||
<view class="detail-header">
|
||
<view class="detail-title">
|
||
<image class="detail-icon" src="/static/images/info-tech.png"></image>
|
||
<text class="title-text">{{currentHuiyuan.mingzi}} - 会员详情</text>
|
||
</view>
|
||
<view class="detail-tech"></view>
|
||
</view>
|
||
|
||
<view class="detail-content">
|
||
<scroll-view class="detail-scroll" scroll-y>
|
||
<text class="detail-text">{{currentHuiyuan.jieshao || '加载中...'}}</text>
|
||
|
||
<view class="detail-rules">
|
||
<view class="rule-item" wx:for="{{detailRules}}" wx:key="index">
|
||
<view class="rule-number">{{index + 1}}</view>
|
||
<text class="rule-text">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 购买区域 - 点击按钮先弹出支付方式选择 -->
|
||
<view class="buy-section">
|
||
<view class="buy-info">
|
||
<view class="price-display">
|
||
<!-- 🔥 将“机甲能源”改为“价格” -->
|
||
<text class="price-label">价格：</text>
|
||
<text class="price-value">¥{{currentHuiyuan.jiage}}</text>
|
||
<text class="price-days">/{{currentHuiyuan.formal_days || 30}}天</text>
|
||
</view>
|
||
<text class="buy-desc" wx:if="{{currentHuiyuan.isBought && currentHuiyuan.buyInfo}}">
|
||
已激活，<text class="expire-date">{{currentHuiyuan.buyInfo.daoqi}}</text>后到期
|
||
</text>
|
||
<text class="buy-desc" wx:else>正式会员支持微信或余额抵扣</text>
|
||
<text class="buy-desc trial-hint" wx:if="{{currentHuiyuan.can_buy_trial}}">
|
||
体验版仅微信支付 ¥{{currentHuiyuan.trial_price}}/{{currentHuiyuan.trial_days}}天，终身1次
|
||
</text>
|
||
</view>
|
||
|
||
<view class="buy-action">
|
||
<view class="tech-buy-btn {{currentHuiyuan.isBought ? 'renew' : ''}}"
|
||
bindtap="onBuyHuiyuanClick" data-id="{{currentHuiyuan.id}}" data-trial="false">
|
||
<view class="buy-btn-bg"></view>
|
||
<view class="buy-btn-glow"></view>
|
||
<text class="buy-btn-text">
|
||
{{currentHuiyuan.isBought ? '正式续费' : '购买正式版'}}
|
||
</text>
|
||
<view class="buy-btn-energy">
|
||
<view class="energy-dot"></view>
|
||
<view class="energy-dot"></view>
|
||
<view class="energy-dot"></view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
wx:if="{{currentHuiyuan.can_buy_trial}}"
|
||
class="tech-buy-btn trial-buy-btn"
|
||
bindtap="onBuyHuiyuanClick"
|
||
data-id="{{currentHuiyuan.id}}"
|
||
data-trial="true"
|
||
>
|
||
<view class="buy-btn-bg"></view>
|
||
<text class="buy-btn-text">购买体验版</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ======================= -->
|
||
<!-- 三卡片区域 - 放在下面 -->
|
||
<!-- ======================= -->
|
||
<view class="tech-grid">
|
||
<!-- 会员区域 - 高度限制最多3个，超出可滚动 -->
|
||
<view class="tech-card huiyuan-card">
|
||
<view class="card-header">
|
||
<view class="card-title">
|
||
<text class="title-text">我的会员</text>
|
||
<view class="title-text">👑</view>
|
||
</view>
|
||
<view class="card-badge">{{clubmber.length}}</view>
|
||
</view>
|
||
|
||
<scroll-view
|
||
class="huiyuan-scroll"
|
||
scroll-y
|
||
enable-flex
|
||
style="height: {{huiyuanListHeight}}rpx">
|
||
<view wx:for="{{clubmber}}" wx:key="huiyuanid" class="huiyuan-item" data-item="{{item}}" bindtap="showMemberDetail">
|
||
<view class="huiyuan-tag tech-tag">
|
||
<view class="tag-triangle"></view>
|
||
<text class="tag-name">{{item.huiyuanming}}</text>
|
||
<text class="tag-time">到期: {{formatDaoqiTime(item.daoqi)}}</text>
|
||
<view class="tag-glow"></view>
|
||
</view>
|
||
</view>
|
||
<view wx:if="{{clubmber.length === 0}}" class="empty-huiyuan">
|
||
<image class="empty-icon" src="/static/images/empty-member.png"></image>
|
||
<text class="empty-text">暂无会员</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="card-footer">
|
||
<text class="footer-text">共{{clubmber.length}}个会员</text>
|
||
<view class="footer-line"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 押金区域 - 点击充值按钮弹出押金输入弹窗 -->
|
||
<view class="tech-card yajin-card">
|
||
<view class="card-header">
|
||
<view class="card-title">
|
||
<text class="title-text">我的押金</text>
|
||
<view class="title-text">💰</view>
|
||
</view>
|
||
<view class="card-corner"></view>
|
||
</view>
|
||
|
||
<view class="yajin-display">
|
||
<view class="amount-container">
|
||
<text class="amount-symbol">¥</text>
|
||
<text class="amount-number">{{yajin}}</text>
|
||
</view>
|
||
<text class="amount-unit">可用余额</text>
|
||
</view>
|
||
|
||
<view class="tech-line"></view>
|
||
|
||
<view class="action-container">
|
||
<view class="tech-btn yajin-btn" bindtap="onYajinClick">
|
||
<view class="btn-bg"></view>
|
||
<text class="btn-text">立即充值</text>
|
||
<view class="btn-arrow" style="display:none;">➤</view>
|
||
<view class="btn-glow"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-corner corner-bottom"></view>
|
||
</view>
|
||
|
||
<!-- 积分区域 - 点击补充按钮弹出支付方式选择 -->
|
||
<view class="tech-card jifen-card">
|
||
<view class="card-header">
|
||
<view class="card-title">
|
||
<text class="title-text">我的积分</text>
|
||
<view class="title-text">⭐</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="jifen-display">
|
||
<view class="circle-progress">
|
||
<view class="circle-bg"></view>
|
||
<view class="circle-mask" style="transform: rotate({{jifenProgress}}deg);"></view>
|
||
<view class="circle-fill" style="transform: rotate({{jifenProgress}}deg);"></view>
|
||
<view class="circle-center">
|
||
<text class="jifen-value">{{jifen}}</text>
|
||
<text class="jifen-label">积分</text>
|
||
</view>
|
||
<view class="circle-dots">
|
||
<view class="circle-dot" wx:for="{{10}}" wx:key="index"
|
||
style="transform: rotate({{index * 36}}deg);"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="jifen-status">
|
||
<text class="status-text" wx:if="{{jifen < 10}}">积分不足，影响接单,提现权限</text>
|
||
<text class="status-text full" wx:else>积分充足，无需补充</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="action-container">
|
||
<view class="tech-btn jifen-btn" bindtap="onJifenClick" data-disabled="{{jifen >= 10}}">
|
||
<view class="btn-bg"></view>
|
||
<text class="btn-text">{{jifen >= 10 ? '积分已满' : '立即补充'}}</text>
|
||
<view class="btn-energy" wx:if="{{jifen < 10}}"></view>
|
||
<view class="btn-glow" wx:if="{{jifen < 10}}"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ======================= -->
|
||
<!-- 押金充值弹窗（原有，确认事件改为 onYajinConfirm） -->
|
||
<!-- ======================= -->
|
||
<view class="tech-modal" wx:if="{{showYajinModal}}">
|
||
<view class="modal-backdrop" bindtap="hideYajinModal"></view>
|
||
<view class="modal-container">
|
||
<view class="modal-corner tl"></view>
|
||
<view class="modal-corner tr"></view>
|
||
<view class="modal-corner bl"></view>
|
||
<view class="modal-corner br"></view>
|
||
|
||
<view class="modal-header">
|
||
<text class="modal-title">押金充值</text>
|
||
<text class="modal-subtitle">充值保证金</text>
|
||
<view class="modal-close" bindtap="hideYajinModal">
|
||
<text class="close-text">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<view class="input-section">
|
||
<view class="input-label">
|
||
<image class="label-icon" src="/static/images/money-tech.png"></image>
|
||
<text class="label-text">充值金额 (1-10000元)</text>
|
||
</view>
|
||
|
||
<view class="input-container">
|
||
<view class="input-prefix">¥</view>
|
||
<input
|
||
class="yajin-input"
|
||
type="digit"
|
||
placeholder="输入充值金额"
|
||
placeholder-class="input-placeholder"
|
||
value="{{yajinAmount}}"
|
||
bindinput="onYajinInput"
|
||
maxlength="5"
|
||
focus="{{showYajinModal}}"/>
|
||
<view class="input-underline"></view>
|
||
</view>
|
||
|
||
<text class="input-tip">支持1-10000元整数充值</text>
|
||
</view>
|
||
|
||
<view class="quick-section">
|
||
<text class="quick-title">快速选择</text>
|
||
<view class="quick-buttons">
|
||
<view
|
||
class="quick-btn {{yajinAmount == '100' ? 'active' : ''}}"
|
||
bindtap="setYajinAmount"
|
||
data-amount="100">
|
||
<text class="quick-text">100元</text>
|
||
</view>
|
||
<view
|
||
class="quick-btn {{yajinAmount == '500' ? 'active' : ''}}"
|
||
bindtap="setYajinAmount"
|
||
data-amount="500">
|
||
<text class="quick-text">500元</text>
|
||
</view>
|
||
<view
|
||
class="quick-btn {{yajinAmount == '1000' ? 'active' : ''}}"
|
||
bindtap="setYajinAmount"
|
||
data-amount="1000">
|
||
<text class="quick-text">1000元</text>
|
||
</view>
|
||
<view
|
||
class="quick-btn {{yajinAmount == '5000' ? 'active' : ''}}"
|
||
bindtap="setYajinAmount"
|
||
data-amount="5000">
|
||
<text class="quick-text">5000元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-footer">
|
||
<view class="modal-btn cancel-btn" bindtap="hideYajinModal">
|
||
<text class="btn-text">取消</text>
|
||
</view>
|
||
<view class="modal-divider"></view>
|
||
<view class="modal-btn confirm-btn" bindtap="onYajinConfirm">
|
||
<text class="btn-text">确认支付</text>
|
||
<view class="btn-sparkle"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ====== 支付方式选择弹窗 ====== -->
|
||
<view class="tech-modal" wx:if="{{showPayMethodModal}}">
|
||
<view class="modal-backdrop" bindtap="hidePayMethodModal"></view>
|
||
<view class="modal-container small">
|
||
<view class="modal-corner tl"></view>
|
||
<view class="modal-corner tr"></view>
|
||
<view class="modal-corner bl"></view>
|
||
<view class="modal-corner br"></view>
|
||
|
||
<view class="modal-header">
|
||
<text class="modal-title">选择支付方式</text>
|
||
<view class="modal-close" bindtap="hidePayMethodModal">
|
||
<text class="close-text">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<view class="pay-method-list">
|
||
<view class="pay-method-item" bindtap="onPayMethodSelect" data-method="wx">
|
||
<image class="method-icon" src="/static/images/wechat-pay.png"></image>
|
||
<text class="method-name">微信支付</text>
|
||
<text class="method-desc">安全快捷</text>
|
||
</view>
|
||
<view class="pay-method-item" bindtap="onPayMethodSelect" data-method="balance">
|
||
<image class="method-icon" src="/static/images/balance-pay.png"></image>
|
||
<text class="method-name">余额抵扣</text>
|
||
<text class="method-desc">使用佣金或分红</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ====== 余额抵扣身份选择弹窗 ====== -->
|
||
<view class="tech-modal" wx:if="{{showBalanceModal}}">
|
||
<view class="modal-backdrop" bindtap="hideBalanceModal"></view>
|
||
<view class="modal-container">
|
||
<view class="modal-corner tl"></view>
|
||
<view class="modal-corner tr"></view>
|
||
<view class="modal-corner bl"></view>
|
||
<view class="modal-corner br"></view>
|
||
|
||
<view class="modal-header">
|
||
<text class="modal-title">选择抵扣身份</text>
|
||
<view class="modal-close" bindtap="hideBalanceModal">
|
||
<text class="close-text">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<view class="balance-list">
|
||
<view wx:for="{{balanceOptions}}" wx:key="id" class="balance-item"
|
||
data-id="{{item.id}}" bindtap="onBalanceSelect">
|
||
<view class="balance-info">
|
||
<text class="balance-name">{{item.jieshao}}</text>
|
||
<text class="balance-amount">需¥{{item.xuyao}}</text>
|
||
</view>
|
||
<view class="balance-arrow">➤</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ====== 余额抵扣确认弹窗 ====== -->
|
||
<view class="tech-modal" wx:if="{{showConfirmModal}}">
|
||
<view class="modal-backdrop" bindtap="hideConfirmModal"></view>
|
||
<view class="modal-container">
|
||
<view class="modal-corner tl"></view>
|
||
<view class="modal-corner tr"></view>
|
||
<view class="modal-corner bl"></view>
|
||
<view class="modal-corner br"></view>
|
||
|
||
<view class="modal-header">
|
||
<text class="modal-title">确认抵扣</text>
|
||
<view class="modal-close" bindtap="hideConfirmModal">
|
||
<text class="close-text">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<view class="confirm-detail">
|
||
<view class="detail-row">
|
||
<text class="detail-label">抵扣身份：</text>
|
||
<text class="detail-value">{{selectedBalanceInfo && selectedBalanceInfo.jieshao}}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="detail-label">所需金额：</text>
|
||
<text class="detail-value">¥{{selectedBalanceInfo && selectedBalanceInfo.xuyao}}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="detail-label">实际扣除：</text>
|
||
<text class="detail-value">¥{{selectedBalanceInfo && selectedBalanceInfo.xuyao}}</text>
|
||
</view>
|
||
<view class="detail-tip">确认后将从您的余额中扣除</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-footer">
|
||
<view class="modal-btn cancel-btn" bindtap="hideConfirmModal">
|
||
<text class="btn-text">取消</text>
|
||
</view>
|
||
<view class="modal-divider"></view>
|
||
<view class="modal-btn confirm-btn" bindtap="confirmBalancePay">
|
||
<text class="btn-text">确认支付</text>
|
||
<view class="btn-sparkle"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ====== 会员详情弹窗 ====== -->
|
||
<view class="tech-modal" wx:if="{{showMemberModal}}">
|
||
<view class="modal-backdrop" bindtap="hideMemberModal"></view>
|
||
<view class="modal-container">
|
||
<view class="modal-corner tl"></view>
|
||
<view class="modal-corner tr"></view>
|
||
<view class="modal-corner bl"></view>
|
||
<view class="modal-corner br"></view>
|
||
|
||
<view class="modal-header">
|
||
<text class="modal-title">会员详情</text>
|
||
<view class="modal-close" bindtap="hideMemberModal">
|
||
<text class="close-text">✕</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<view class="member-detail">
|
||
<view class="detail-row">
|
||
<text class="detail-label">会员名称：</text>
|
||
<text class="detail-value">{{currentMemberDetail && currentMemberDetail.huiyuanming}}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="detail-label">到期时间：</text>
|
||
<text class="detail-value">{{currentMemberDetail && currentMemberDetail.daoqi}}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="detail-label">剩余天数：</text>
|
||
<text class="detail-value">{{formatRemainTime(currentMemberDetail && currentMemberDetail.daoqi)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ❌ 删除“进入提示弹窗”整个区块 -->
|
||
|
||
<!-- ======================= -->
|
||
<!-- 支付加载动画（原有） -->
|
||
<!-- ======================= -->
|
||
<view class="tech-loading" wx:if="{{payLoading}}">
|
||
<view class="loading-backdrop"></view>
|
||
<view class="loading-content">
|
||
<view class="loading-spinner">
|
||
<view class="spinner-ring ring-1"></view>
|
||
<view class="spinner-ring ring-2"></view>
|
||
<view class="spinner-ring ring-3"></view>
|
||
<view class="spinner-core"></view>
|
||
<view class="spinner-energy"></view>
|
||
</view>
|
||
<text class="loading-text">{{loadingText}}</text>
|
||
<text class="loading-subtext">正在连接支付系统...</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ======================= -->
|
||
<!-- 底部机甲装饰 -->
|
||
<!-- ======================= -->
|
||
<view class="tech-footer">
|
||
<view class="footer-line"></view>
|
||
<view class="footer-text">星阙网络 © 科技</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 通知组件 -->
|
||
<global-notification id="global-notification" />
|
||
|
||
<!-- 🆕 统一弹窗组件 -->
|
||
<popup-notice id="popupNotice" /> |