117 lines
4.4 KiB
Plaintext
117 lines
4.4 KiB
Plaintext
<!--积分商城页面 - 浅色高级感设计-->
|
||
<view class="page-container">
|
||
<!-- 顶部装饰背景 -->
|
||
<view class="hero-section">
|
||
<view class="hero-pattern"></view>
|
||
|
||
<!-- 积分信息卡片 -->
|
||
<view class="points-card">
|
||
<view class="points-card-accent"></view>
|
||
<view class="points-info">
|
||
<text class="points-label">我的积分</text>
|
||
<view class="points-value">
|
||
<text class="points-number">{{userInfo.totalPoints || 0}}</text>
|
||
<text class="points-unit">分</text>
|
||
</view>
|
||
</view>
|
||
<view class="points-action" bindtap="goToRecords">
|
||
<text class="action-text">积分记录</text>
|
||
<text class="action-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="product-section">
|
||
<view class="section-header">
|
||
<text class="section-title">积分好物</text>
|
||
<text class="section-count" wx:if="{{products.length > 0}}">共 {{products.length}} 件</text>
|
||
</view>
|
||
|
||
<view class="product-grid" wx:if="{{products.length > 0}}">
|
||
<view
|
||
class="product-card stagger-item"
|
||
wx:for="{{products}}"
|
||
wx:key="id"
|
||
bindtap="viewProduct"
|
||
data-product="{{item}}"
|
||
>
|
||
<view class="product-image-wrapper">
|
||
<image class="product-image" src="{{item.image || '/images/product-default.svg'}}" mode="aspectFill"></image>
|
||
<view class="product-tag" wx:if="{{item.isHot}}">热门</view>
|
||
<view class="product-stock-low" wx:if="{{item.stock > 0 && item.stock <= 5}}">仅剩{{item.stock}}件</view>
|
||
</view>
|
||
<view class="product-info">
|
||
<text class="product-name">{{item.name}}</text>
|
||
<view class="product-footer">
|
||
<view class="product-price">
|
||
<text class="price-value">{{item.pointsRequired}}</text>
|
||
<text class="price-unit">积分</text>
|
||
</view>
|
||
<view class="exchange-btn {{userInfo.totalPoints < item.pointsRequired || item.stock <= 0 ? 'disabled' : ''}}">
|
||
{{item.stock <= 0 ? '售罄' : '兑换'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" wx:else>
|
||
<image class="empty-icon" src="/images/empty-products.svg" mode="aspectFit"></image>
|
||
<text class="empty-title">暂无可兑换商品</text>
|
||
<text class="empty-desc">敬请期待更多精彩好物</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view wx:if="{{loading}}" class="loading-state">
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<!-- 底部安全区域 -->
|
||
<view class="safe-bottom"></view>
|
||
</view>
|
||
|
||
<!-- 商品详情弹窗 -->
|
||
<view class="product-modal-overlay {{showProductModal ? 'show' : ''}}" bindtap="closeProductModal">
|
||
<view class="product-modal {{showProductModal ? 'show' : ''}}" catchtap="">
|
||
<view class="modal-header">
|
||
<text class="modal-title">商品详情</text>
|
||
<view class="modal-close" bindtap="closeProductModal">×</view>
|
||
</view>
|
||
|
||
<view class="modal-content">
|
||
<image class="detail-image" src="{{currentProduct.image || '/images/product-default.svg'}}" mode="aspectFill"></image>
|
||
|
||
<view class="detail-info">
|
||
<text class="detail-name">{{currentProduct.name}}</text>
|
||
<text class="detail-desc">{{currentProduct.description || '暂无描述'}}</text>
|
||
</view>
|
||
|
||
<view class="detail-price-row">
|
||
<view class="detail-price">
|
||
<text class="detail-price-value">{{currentProduct.pointsRequired}}</text>
|
||
<text class="detail-price-unit">积分</text>
|
||
</view>
|
||
<text class="detail-stock">库存: {{currentProduct.stock}}</text>
|
||
</view>
|
||
|
||
<view class="store-info" wx:if="{{currentProduct.storeName}}">
|
||
<text class="store-label">兑换门店</text>
|
||
<text class="store-name">{{currentProduct.storeName}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-footer">
|
||
<button
|
||
class="exchange-btn-large {{userInfo.totalPoints < currentProduct.pointsRequired || currentProduct.stock <= 0 ? 'disabled' : ''}}"
|
||
bindtap="exchangeProduct"
|
||
disabled="{{userInfo.totalPoints < currentProduct.pointsRequired || currentProduct.stock <= 0}}"
|
||
>
|
||
{{currentProduct.stock <= 0 ? '已售罄' : userInfo.totalPoints < currentProduct.pointsRequired ? '积分不足' : '立即兑换'}}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|