Initial commit
This commit is contained in:
sjk
156
miniprogram/pages/points/index.wxml
Normal file
156
miniprogram/pages/points/index.wxml
Normal file
@@ -0,0 +1,156 @@
|
||||
<view class="points-page">
|
||||
<!-- 积分总览 -->
|
||||
<view class="points-header">
|
||||
<view class="points-card">
|
||||
<view class="points-title">我的积分</view>
|
||||
<view class="points-amount">{{userPoints}}</view>
|
||||
<view class="points-desc">积分可用于兑换优惠券和商品</view>
|
||||
|
||||
<!-- 积分概览统计 -->
|
||||
<view class="points-stats">
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{pointsOverview.total_earned}}</view>
|
||||
<view class="stat-label">累计获得</view>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{pointsOverview.total_spent}}</view>
|
||||
<view class="stat-label">累计消费</view>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{pointsOverview.this_month_earned}}</view>
|
||||
<view class="stat-label">本月获得</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签页 -->
|
||||
<view class="tabs-container">
|
||||
<t-tabs
|
||||
defaultValue="{{currentTab}}"
|
||||
bind:change="onTabChange"
|
||||
tabList="{{tabList}}"
|
||||
t-class="tabs-external__inner"
|
||||
t-class-item="tabs-external__item"
|
||||
t-class-active="tabs-external__active"
|
||||
t-class-track="tabs-external__track"
|
||||
>
|
||||
<t-tab-panel
|
||||
wx:for="{{tabList}}"
|
||||
wx:for-index="index"
|
||||
wx:for-item="tab"
|
||||
wx:key="key"
|
||||
label="{{tab.text}}"
|
||||
value="{{tab.key}}"
|
||||
/>
|
||||
</t-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 积分明细 -->
|
||||
<view class="tab-content" wx:if="{{currentTab === 0}}">
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-container" wx:if="{{loading}}">
|
||||
<t-loading theme="circular" size="40rpx" text="加载中..." />
|
||||
</view>
|
||||
|
||||
<!-- 积分历史列表 -->
|
||||
<view class="points-history" wx:elif="{{pointsHistory.length > 0}}">
|
||||
<view class="history-item" wx:for="{{pointsHistory}}" wx:key="id">
|
||||
<view class="history-left">
|
||||
<view class="history-icon {{item.type === 'earn' ? 'earn' : 'spend'}}">
|
||||
<t-icon name="{{item.type === 'earn' ? 'add' : 'remove'}}" size="16" color="#fff" />
|
||||
</view>
|
||||
<view class="history-info">
|
||||
<view class="history-desc">{{item.description}}</view>
|
||||
<view class="history-time">{{item.date}} {{item.time}}</view>
|
||||
<view class="history-detail" wx:if="{{item.orderId}}">订单号：{{item.orderId}}</view>
|
||||
<view class="history-detail" wx:if="{{item.couponName}}">{{item.couponName}}</view>
|
||||
<view class="history-detail" wx:if="{{item.productName}}">商品：{{item.productName}}</view>
|
||||
<view class="history-detail" wx:if="{{item.days}}">连续签到{{item.days}}天</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="history-amount {{item.type === 'earn' ? 'earn' : 'spend'}}">
|
||||
{{item.type === 'earn' ? '+' : ''}}{{item.points}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view class="load-more" wx:if="{{hasMoreHistory}}">
|
||||
<t-loading theme="circular" size="32rpx" text="加载更多..." />
|
||||
</view>
|
||||
<view class="no-more" wx:else>
|
||||
<text>没有更多记录了</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:else>
|
||||
<view class="empty-icon">
|
||||
<t-icon name="file" size="80" color="#ccc" />
|
||||
</view>
|
||||
<view class="empty-text">暂无积分记录</view>
|
||||
<view class="empty-desc">快去购物赚取积分吧！</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分规则 -->
|
||||
<view class="tab-content" wx:if="{{currentTab === 1}}">
|
||||
<view class="rules-container">
|
||||
<view class="rule-item" wx:for="{{pointsRules}}" wx:key="title">
|
||||
<view class="rule-icon">
|
||||
<t-icon name="{{item.icon}}" size="24" color="#fa4126" />
|
||||
</view>
|
||||
<view class="rule-content">
|
||||
<view class="rule-title">{{item.title}}</view>
|
||||
<view class="rule-desc">{{item.description}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分兑换 -->
|
||||
<view class="tab-content" wx:if="{{currentTab === 2}}">
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-container" wx:if="{{loading}}">
|
||||
<t-loading theme="circular" size="40rpx" text="加载中..." />
|
||||
</view>
|
||||
|
||||
<!-- 兑换商品列表 -->
|
||||
<view class="exchange-container" wx:elif="{{exchangeItems.length > 0}}">
|
||||
<view class="exchange-item" wx:for="{{exchangeItems}}" wx:key="id" data-item="{{item}}" bind:tap="onExchangeItem">
|
||||
<view class="exchange-image">
|
||||
<t-icon name="{{item.type === 'coupon' ? 'coupon' : 'gift'}}" size="32" color="#fa4126" />
|
||||
</view>
|
||||
<view class="exchange-info">
|
||||
<view class="exchange-name">{{item.name}}</view>
|
||||
<view class="exchange-desc">{{item.description}}</view>
|
||||
<view class="exchange-stock" wx:if="{{item.stock <= 10}}">
|
||||
<text class="stock-warning">仅剩{{item.stock}}件</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="exchange-points">
|
||||
<view class="points-text">{{item.points}}积分</view>
|
||||
<t-button
|
||||
size="small"
|
||||
theme="{{userPoints >= item.points && item.stock > 0 ? 'primary' : 'default'}}"
|
||||
variant="{{userPoints >= item.points && item.stock > 0 ? 'base' : 'outline'}}"
|
||||
disabled="{{userPoints < item.points || item.stock <= 0}}"
|
||||
>
|
||||
{{item.stock <= 0 ? '已售罄' : (userPoints >= item.points ? '兑换' : '积分不足')}}
|
||||
</t-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:else>
|
||||
<view class="empty-icon">
|
||||
<t-icon name="shop" size="80" color="#ccc" />
|
||||
</view>
|
||||
<view class="empty-text">暂无兑换商品</view>
|
||||
<view class="empty-desc">敬请期待更多精彩商品</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user