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

89 lines
3.2 KiB
Plaintext

<!--兑换订单页面-->
<view class="container">
<!-- 状态筛选 -->
<view class="status-tabs">
<view
class="tab {{status === '' ? 'active' : ''}}"
bindtap="setStatus"
data-status=""
>全部</view>
<view
class="tab {{status === '0' ? 'active' : ''}}"
bindtap="setStatus"
data-status="0"
>待核销</view>
<view
class="tab {{status === '1' ? 'active' : ''}}"
bindtap="setStatus"
data-status="1"
>已完成</view>
</view>
<!-- 订单列表 -->
<view class="order-list" wx:if="{{orders.length > 0}}">
<view
class="order-item"
wx:for="{{orders}}"
wx:key="id"
bindtap="viewOrder"
data-order="{{item}}"
>
<view class="order-header">
<text class="order-no">订单号: {{item.orderNo}}</text>
<text class="order-status status-{{item.status}}">{{getStatusText(item.status)}}</text>
</view>
<view class="order-content">
<image class="product-image" src="{{item.productImage || '/images/product-default.png'}}" mode="aspectFill"></image>
<view class="product-info">
<text class="product-name">{{item.productName}}</text>
<text class="store-name">{{item.storeName}}</text>
<text class="points-used">-{{item.pointsUsed}} 积分</text>
</view>
</view>
<view class="order-footer">
<text class="order-time">{{item.createdAt}}</text>
<view class="btn-qrcode" wx:if="{{item.status === 0}}">查看兑换码</view>
</view>
</view>
</view>
<view class="empty-state" wx:else>
<image src="/images/empty-order.png" mode="aspectFit"></image>
<text>暂无订单</text>
</view>
<!-- 加载更多 -->
<view wx:if="{{loading}}" class="loading-state">
<text>加载中...</text>
</view>
</view>
<!-- 订单详情弹窗 -->
<view class="order-modal" wx:if="{{showOrderModal}}" bindtap="closeOrderModal">
<view class="modal-content" catchtap="">
<view class="modal-header">
<text class="modal-title">兑换详情</text>
<text class="order-status status-{{currentOrder.status}}">{{getStatusText(currentOrder.status)}}</text>
</view>
<view class="modal-body">
<image class="product-image" src="{{currentOrder.productImage || '/images/product-default.png'}}" mode="aspectFill"></image>
<text class="product-name">{{currentOrder.productName}}</text>
<text class="points-used">使用积分: {{currentOrder.pointsUsed}}</text>
<view class="qrcode-section" wx:if="{{currentOrder.status === 0}}">
<canvas canvas-id="orderQrcode" class="qrcode-canvas"></canvas>
<text class="qrcode-text">{{currentOrder.exchangeCode}}</text>
<text class="qrcode-tip">请出示此码给工作人员核销</text>
</view>
<view class="store-section">
<text class="section-title">领取门店</text>
<text class="store-name">{{currentOrder.storeName}}</text>
<text class="store-address">{{currentOrder.storeAddress}}</text>
<text class="store-contact" wx:if="{{currentOrder.storeContact}}">电话: {{currentOrder.storeContact}}</text>
</view>
</view>
</view>
</view>