mini-starter/mini-demo/pages/points-mall/points-mall.wxml

<view class="points-mall-page">
  <!-- 头部导航 -->
  <view class="header">
    <view class="nav-bar">
      <button class="back-btn" bindtap="goBack">
        ← 返回
      </button>
      <view class="page-title">积分商城</view>
      <view class="placeholder"></view>
    </view>
  </view>

  <!-- 积分信息卡片 -->
  <view class="points-info-card">
    <view class="points-header">
      <view class="points-title">我的积分</view>
      <button class="history-btn" bindtap="viewPointsHistory">明细</button>
    </view>
    <view class="points-value">{{memberInfo.points}}</view>
    <view class="points-desc">积分一年有效，消费1元得1积分</view>
  </view>

  <!-- 我的优惠券 -->
  <view class="my-coupons-section">
    <view class="section-header">
      <view class="section-title">我的优惠券</view>
      <button class="view-all-btn" bindtap="viewMyCoupons">查看全部</button>
    </view>
    
    <scroll-view scroll-x="true" class="coupons-scroll">
      <view class="coupons-container">
        <block wx:for="{{coupons}}" wx:key="id">
          <view class="coupon-item">
            <view class="coupon-value">¥{{item.value}}</view>
            <view class="coupon-name">{{item.name}}</view>
            <view class="coupon-expire">{{item.expireDate.split('T')[0]}}到期</view>
          </view>
        </block>
        
        <view wx:if="{{coupons.length === 0}}" class="no-coupons">
          <view class="no-coupons-text">暂无可用优惠券</view>
        </view>
      </view>
    </scroll-view>
  </view>

  <!-- 积分商城 -->
  <view class="points-mall-section">
    <view class="section-header">
      <view class="section-title">积分商城</view>
    </view>
    
    <view class="products-grid">
      <block wx:for="{{pointsProducts}}" wx:key="id">
        <view class="product-card" bindtap="selectProduct" data-id="{{item.id}}">
          <view class="product-icon">{{item.icon}}</view>
          <view class="product-info">
            <view class="product-name">{{item.name}}</view>
            <view class="product-desc">{{item.description}}</view>
            <view class="product-points">
              <text class="points-number">{{item.points}}</text>
              <text class="points-unit">积分</text>
            </view>
          </view>
          <view class="exchange-btn {{memberInfo.points >= item.points ? 'can-exchange' : 'cannot-exchange'}}">
            {{memberInfo.points >= item.points ? '立即兑换' : '积分不足'}}
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

<!-- 兑换确认弹窗 -->
<view wx:if="{{showExchangeModal}}" class="modal-overlay" bindtap="closeExchangeModal">
  <view class="modal-content" catchtap="">
    <view class="modal-header">
      <view class="modal-title">确认兑换</view>
      <button class="modal-close" bindtap="closeExchangeModal">×</button>
    </view>
    
    <view class="modal-body">
      <view class="exchange-product">
        <view class="product-icon-large">{{selectedProduct.icon}}</view>
        <view class="product-details">
          <view class="product-name">{{selectedProduct.name}}</view>
          <view class="product-value">价值¥{{selectedProduct.value}}</view>
          <view class="product-points">需要{{selectedProduct.points}}积分</view>
          <view class="product-validity">有效期{{selectedProduct.validDays}}天</view>
        </view>
      </view>
      
      <view class="points-status">
        <view class="current-points">当前积分：{{memberInfo.points}}</view>
        <view class="after-exchange">兑换后剩余：{{memberInfo.points - selectedProduct.points}}</view>
      </view>
    </view>
    
    <view class="modal-footer">
      <button class="cancel-btn" bindtap="closeExchangeModal">取消</button>
      <button class="confirm-btn" bindtap="confirmExchange" 
              disabled="{{memberInfo.points < selectedProduct.points}}">
        确认兑换
      </button>
    </view>
  </view>
</view>