129 lines
4.0 KiB
Plaintext
129 lines
4.0 KiB
Plaintext
<view class="shangjia-chongzhi-page">
|
|
<!-- 顶部余额展示 -->
|
|
<view class="balance-card">
|
|
<view class="balance-header">
|
|
<view class="balance-title">
|
|
<text class="title-text">商家余额</text>
|
|
<view class="title-decoration">
|
|
<view class="decoration-line"></view>
|
|
<view class="decoration-dot"></view>
|
|
<view class="decoration-line"></view>
|
|
</view>
|
|
</view>
|
|
<view class="balance-chip">
|
|
<text class="chip-text">VIP商家账户</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="balance-amount">
|
|
<text class="currency">¥</text>
|
|
<text class="amount" data-amount="{{sjyue}}">{{sjyue}}</text>
|
|
<text class="unit">元</text>
|
|
</view>
|
|
|
|
<view class="balance-footer">
|
|
<view class="balance-tag">
|
|
<text class="tag-text">资金安全</text>
|
|
</view>
|
|
<view class="balance-tag">
|
|
<text class="tag-text">实时到账</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 机甲装饰元素 -->
|
|
<view class="mech-decoration">
|
|
<view class="mech-line line-1"></view>
|
|
<view class="mech-line line-2"></view>
|
|
<view class="mech-corner corner-1"></view>
|
|
<view class="mech-corner corner-2"></view>
|
|
<view class="mech-corner corner-3"></view>
|
|
<view class="mech-corner corner-4"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 充值金额选择区域 -->
|
|
<view class="amount-section">
|
|
<view class="section-header">
|
|
<text class="section-title">充值金额</text>
|
|
<view class="section-subtitle">
|
|
<text class="subtitle-text">选择或输入充值金额</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快捷金额按钮 -->
|
|
<view class="quick-amount-grid">
|
|
<block wx:for="{{quickAmounts}}" wx:key="index">
|
|
<view
|
|
class="amount-item {{selectedAmount == item ? 'active' : ''}}"
|
|
data-amount="{{item}}"
|
|
bindtap="selectAmount"
|
|
>
|
|
<text class="amount-text">¥{{item}}</text>
|
|
<view class="amount-halo" wx:if="{{selectedAmount == item}}"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 自定义金额输入 -->
|
|
<view class="custom-amount">
|
|
<view class="custom-input-wrapper">
|
|
<text class="input-label">¥</text>
|
|
<input
|
|
class="custom-input"
|
|
type="digit"
|
|
placeholder="输入其他金额"
|
|
placeholder-class="placeholder"
|
|
value="{{customAmount}}"
|
|
bindinput="onCustomInput"
|
|
bindfocus="onInputFocus"
|
|
bindblur="onInputBlur"
|
|
maxlength="6"
|
|
/>
|
|
<view class="input-line {{inputFocus ? 'active' : ''}}"></view>
|
|
</view>
|
|
<text class="amount-hint">
|
|
单次充值范围：¥{{minAmount}} - ¥{{maxAmount}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付按钮 - 改为view更好控制 -->
|
|
<view class="pay-section">
|
|
<view class="pay-button-wrapper">
|
|
<view
|
|
class="pay-button {{canPay ? 'active' : ''}}"
|
|
bindtap="handlePay"
|
|
>
|
|
<view class="button-content">
|
|
<text class="button-text">立即充值</text>
|
|
</view>
|
|
<!-- 闪光特效 -->
|
|
<view class="pay-button-shine"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付状态提示 -->
|
|
<view class="payment-status" wx:if="{{showStatus}}">
|
|
<view class="status-content">
|
|
<text class="status-text">{{statusText}}</text>
|
|
<text class="status-subtext">{{statusSubtext}}</text>
|
|
|
|
<view class="status-actions" wx:if="{{showAction}}">
|
|
<view class="action-button" bindtap="handleStatusAction">
|
|
<text class="action-text">{{actionText}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载遮罩 -->
|
|
<view class="loading-mask" wx:if="{{isLoading}}">
|
|
<view class="loading-content">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">{{loadingText}}</text>
|
|
</view>
|
|
</view>
|
|
<global-notification id="global-notification" />
|
|
|
|
</view> |