yingsa/miniprogram/pages/points/mall/index.wxml
2026-01-20 08:50:50 +08:00

85 lines
3.2 KiB
Plaintext

<!--积分商城页面-->
<view class="container">
<!-- 积分信息 -->
<view class="points-header">
<view class="points-info">
<text class="label">我的积分</text>
<text class="value">{{userInfo.totalPoints || 0}}</text>
</view>
<view class="points-actions">
<view class="action-btn" bindtap="goToRecords">
<image src="/images/icon-records.png" mode="aspectFit"></image>
<text>积分记录</text>
</view>
<view class="action-btn" bindtap="goToOrders">
<image src="/images/icon-order.png" mode="aspectFit"></image>
<text>我的订单</text>
</view>
</view>
</view>
<!-- 商品列表 -->
<view class="products-section">
<view class="section-title">积分好物</view>
<view class="products-grid" wx:if="{{products.length > 0}}">
<view
class="product-item"
wx:for="{{products}}"
wx:key="id"
bindtap="viewProduct"
data-product="{{item}}"
>
<image class="product-image" src="{{item.image || '/images/product-default.png'}}" mode="aspectFill"></image>
<view class="product-info">
<text class="product-name">{{item.name}}</text>
<view class="product-meta">
<view class="points-need">
<text class="num">{{item.pointsRequired}}</text>
<text class="unit">积分</text>
</view>
<text class="stock">库存 {{item.stock}}</text>
</view>
<text class="store-name">{{item.storeName}}</text>
</view>
</view>
</view>
<view class="empty-state" wx:else>
<image src="/images/empty-products.png" mode="aspectFit"></image>
<text>暂无可兑换商品</text>
</view>
</view>
<!-- 加载更多 -->
<view wx:if="{{loading}}" class="loading-state">
<text>加载中...</text>
</view>
</view>
<!-- 商品详情弹窗 -->
<view class="product-modal" wx:if="{{showProductModal}}" bindtap="closeProductModal">
<view class="modal-content" catchtap="">
<image class="modal-image" src="{{currentProduct.image || '/images/product-default.png'}}" mode="aspectFill"></image>
<view class="modal-info">
<text class="modal-name">{{currentProduct.name}}</text>
<text class="modal-desc">{{currentProduct.description || '暂无描述'}}</text>
<view class="modal-meta">
<view class="points-need">
<text class="num">{{currentProduct.pointsRequired}}</text>
<text class="unit">积分</text>
</view>
<text class="original-price" wx:if="{{currentProduct.originalPrice}}">原价 ¥{{currentProduct.originalPrice}}</text>
</view>
<view class="store-info">
<text class="store-label">兑换门店:</text>
<text class="store-name">{{currentProduct.storeName}}</text>
</view>
<text class="store-address">{{currentProduct.storeAddress}}</text>
</view>
<button class="btn-exchange" bindtap="exchangeProduct" disabled="{{userInfo.totalPoints < currentProduct.pointsRequired || currentProduct.stock <= 0}}">
{{currentProduct.stock <= 0 ? '已售罄' : userInfo.totalPoints < currentProduct.pointsRequired ? '积分不足' : '立即兑换'}}
</button>
</view>
</view>