128 lines
5.5 KiB
Plaintext
128 lines
5.5 KiB
Plaintext
<view class="coupon-center-container">
|
|
|
|
<!-- 优惠券列表 -->
|
|
<view class="coupon-list-container">
|
|
<block wx:if="{{!loading && availableCoupons.length > 0}}">
|
|
<view class="coupon-item" wx:for="{{availableCoupons}}" wx:key="id">
|
|
<view class="coupon-card {{item.isReceived ? 'received-card' : ''}} {{item.remainingCount === 0 ? 'soldout-card' : ''}}">
|
|
<!-- 状态标签 - 移除已领取标签 -->
|
|
<view class="coupon-status-tag soldout" wx:if="{{item.remainingCount === 0}}">
|
|
<text class="status-icon">!</text>
|
|
<text class="status-text">已抢完</text>
|
|
</view>
|
|
<view class="coupon-status-tag hot" wx:elif="{{item.remainingCount <= 10 && item.remainingCount > 0}}">
|
|
<text class="status-icon">🔥</text>
|
|
<text class="status-text">仅剩{{item.remainingCount}}张</text>
|
|
</view>
|
|
|
|
<!-- 优惠券主体 -->
|
|
<view class="coupon-main">
|
|
<view class="coupon-left {{item.type === 1 ? 'type-amount' : item.type === 2 ? 'type-discount' : 'type-shipping'}}">
|
|
<!-- 装饰元素 -->
|
|
<view class="value-decoration"></view>
|
|
|
|
<view class="coupon-value">
|
|
<block wx:if="{{item.type === 1}}">
|
|
<text class="value-symbol">¥</text>
|
|
<text class="value-number">{{item.value / 100}}</text>
|
|
<text class="value-unit">元</text>
|
|
</block>
|
|
<block wx:elif="{{item.type === 2}}">
|
|
<text class="value-number">{{item.value / 10}}</text>
|
|
<text class="value-unit">折</text>
|
|
</block>
|
|
<block wx:else>
|
|
<text class="value-text">免邮</text>
|
|
</block>
|
|
</view>
|
|
<view class="coupon-desc">{{item.desc}}</view>
|
|
</view>
|
|
|
|
<view class="coupon-right">
|
|
<view class="coupon-header">
|
|
<view class="coupon-name">{{item.name}}</view>
|
|
<view class="coupon-type-badge" wx:if="{{item.type === 1}}">满减券</view>
|
|
<view class="coupon-type-badge discount" wx:elif="{{item.type === 2}}">折扣券</view>
|
|
<view class="coupon-type-badge shipping" wx:else>包邮券</view>
|
|
</view>
|
|
|
|
<view class="coupon-details">
|
|
<view class="detail-item">
|
|
<text class="detail-icon">⏰</text>
|
|
<text class="detail-text">{{item.timeLimit}}</text>
|
|
</view>
|
|
<view class="detail-item" wx:if="{{item.totalCount > 0}}">
|
|
<text class="detail-icon">📦</text>
|
|
<text class="detail-text">剩余 {{item.remainingCount}} 张</text>
|
|
</view>
|
|
<view class="detail-item" wx:if="{{item.minAmount > 0}}">
|
|
<text class="detail-icon">💰</text>
|
|
<text class="detail-text">满{{item.minAmount / 100}}元可用</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 领取按钮 -->
|
|
<view class="coupon-action">
|
|
<view
|
|
class="receive-btn {{item.remainingCount === 0 ? 'disabled' : ''}} {{item.isReceived ? 'received' : ''}}"
|
|
catchtap="{{item.isReceived ? '' : 'receiveCoupon'}}"
|
|
data-couponid="{{item.id}}"
|
|
>
|
|
<view class="btn-content">
|
|
<block wx:if="{{item.isReceived}}">
|
|
<text class="btn-icon">✓</text>
|
|
<text class="btn-text">已领取</text>
|
|
</block>
|
|
<block wx:elif="{{item.remainingCount === 0}}">
|
|
<text class="btn-icon">😔</text>
|
|
<text class="btn-text">已抢完</text>
|
|
</block>
|
|
<block wx:else>
|
|
<text class="btn-icon">🎁</text>
|
|
<text class="btn-text">立即领取</text>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:if="{{!loading && availableCoupons.length === 0}}">
|
|
<view class="empty-animation">
|
|
<view class="empty-icon">🎫</view>
|
|
<view class="empty-sparkles">
|
|
<view class="sparkle sparkle-1">✨</view>
|
|
<view class="sparkle sparkle-2">⭐</view>
|
|
<view class="sparkle sparkle-3">💫</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty-content">
|
|
<view class="empty-text">暂无可领取的优惠券</view>
|
|
<view class="empty-desc">精彩活动即将上线，敬请期待</view>
|
|
<view class="empty-action">
|
|
<view class="refresh-btn" bindtap="onRefresh">
|
|
<text class="refresh-icon">🔄</text>
|
|
<text class="refresh-text">刷新试试</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading-state" wx:if="{{loading}}">
|
|
<view class="loading-animation">
|
|
<t-loading theme="circular" size="40rpx" />
|
|
<view class="loading-dots">
|
|
<view class="dot dot-1"></view>
|
|
<view class="dot dot-2"></view>
|
|
<view class="dot dot-3"></view>
|
|
</view>
|
|
</view>
|
|
<view class="loading-text">正在为您寻找最优惠券...</view>
|
|
</view>
|
|
</view>
|
|
</view> |