94 lines
3.8 KiB
Plaintext
94 lines
3.8 KiB
Plaintext
<view class="page-container">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="nav-container">
|
|
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
|
|
<view class="nav-bar" style="height: {{navBarHeight}}px;">
|
|
<view class="nav-back" bindtap="goBack">
|
|
<image src="/images/icon-chevron-left.png" class="back-icon" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="nav-title">礼品商城</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;" enhanced show-scrollbar="{{false}}">
|
|
<view class="content-wrap">
|
|
<view class="love-card">
|
|
<view class="love-card-bg"></view>
|
|
<view class="love-card-blur"></view>
|
|
<view class="love-card-bottom-shade"></view>
|
|
|
|
<view class="love-card-content">
|
|
<view class="love-info">
|
|
<view class="love-header">
|
|
<image src="/images/figma-gift-shop-love-icon.svg" class="love-icon" mode="aspectFit"></image>
|
|
<text class="love-label">我的爱心</text>
|
|
</view>
|
|
<text class="love-value">{{lovePoints}}</text>
|
|
<view class="love-action" bindtap="onViewDetails">
|
|
<text class="love-action-text">点击查看明细</text>
|
|
<image src="/images/figma-gift-shop-chevron-right.svg" class="love-action-arrow" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="love-decoration">
|
|
<image src="/images/figma-gift-shop-decor-icon.svg" class="decoration-icon" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="gifts-section">
|
|
<view class="gifts-header">
|
|
<image src="/images/figma-gift-shop-section-icon.svg" class="gifts-icon" mode="aspectFit"></image>
|
|
<text class="gifts-title">超值兑换</text>
|
|
</view>
|
|
|
|
<view wx:if="{{giftsLoading}}" class="gifts-grid">
|
|
<view wx:for="{{skeletonGifts}}" wx:key="id" class="gift-card skeleton">
|
|
<view class="gift-image-wrap"></view>
|
|
<view class="gift-name skeleton-line"></view>
|
|
<view class="gift-footer">
|
|
<view class="gift-price skeleton-line"></view>
|
|
<view class="gift-exchange-btn skeleton-btn"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:elif="{{giftsError}}" class="gifts-error">
|
|
<text class="gifts-error-text">{{giftsError}}</text>
|
|
<view class="gifts-retry" bindtap="loadGifts">重试</view>
|
|
</view>
|
|
|
|
<view wx:else>
|
|
<view wx:if="{{!gifts || gifts.length === 0}}" class="gifts-empty">
|
|
<text class="gifts-empty-text">暂无可兑换礼品</text>
|
|
</view>
|
|
<view wx:else class="gifts-grid">
|
|
<view wx:for="{{gifts}}" wx:key="id" class="gift-card" bindtap="onGiftTap" data-id="{{item.id}}">
|
|
<view class="gift-image-wrap">
|
|
<image src="{{item.image || '/images/icon-empty.png'}}" class="gift-image" mode="aspectFill"></image>
|
|
<view class="gift-image-overlay"></view>
|
|
<view class="gift-badge">热兑</view>
|
|
</view>
|
|
|
|
<text class="gift-name">{{item.name}}</text>
|
|
|
|
<view class="gift-footer">
|
|
<view class="gift-price">
|
|
<image src="/images/figma-gift-shop-price-icon.svg" class="gift-heart-icon" mode="aspectFit"></image>
|
|
<text class="gift-price-text">{{item.love_cost}}</text>
|
|
</view>
|
|
<view class="gift-exchange-btn">兑换</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-tip">
|
|
<text class="tip-text">更多精美礼品持续上新中...</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|