karamay_wx/pages/user/my-preview/index.wxml

<view class="preview-container">
  <!-- 预约卡片列表 -->
  <scroll-view class="reservation-list" scroll-y="true">
    <view wx:for="{{reservations}}" wx:key="id" class="reservation-card">
      <image class="card-bg" src="https://swkz-1332577016.cos.ap-guangzhou.myqcloud.com/imgs/img_05.png" mode="aspectFill"></image>
      
      <!-- 预约信息区域 -->
      <view class="reservation-info">
        <view class="date-time-section">
          <view class="info-row">
            <text class="label">预约日期：</text>
            <text class="value">{{item.date}}</text>
          </view>
          <view class="info-row" wx:if="{{item.type === 'normal'}}">
            <text class="label">入馆时间：</text>
            <text class="value">{{item.time}}</text>
          </view>
          <view class="info-row" wx:if="{{item.type === 'activity'}}">
            <text class="label">活动预约：</text>
            <text class="value">{{item.activityName}}</text>
          </view>
        </view>
        
        <!-- 取消按钮 (仅普通预约且未过期显示) -->
        <view wx:if="{{!item.isExpired}}" class="cancel-btn" bindtap="cancelReservation" data-id="{{item.id}}">
          <text>取消</text>
        </view>
        
        <!-- 印章图标 (活动预约或已过期的普通预约显示) -->
        <view wx:if="{{item.isExpired}}" class="stamp-icon">
          <image src="https://swkz-1332577016.cos.ap-guangzhou.myqcloud.com/imgs/icon_cancel.png" mode="aspectFit"></image>
        </view>
      </view>
      
      <!-- 参观人信息区域 -->
      <view class="visitors-section">
        <view wx:for="{{item.visitors}}" wx:for-item="visitor" wx:for-index="visitorIndex" wx:key="*this">
          <view class="section-title">参观人信息{{visitorIndex + 1}}</view>
          <view class="visitor-info">
            <view class="visitor-detail">
              <text class="visitor-label">参观人姓名：</text>
              <text class="visitor-value">{{visitor.name}}</text>
            </view>
            <view class="visitor-detail">
              <text class="visitor-label">身份证号：</text>
              <text class="visitor-value">{{visitor.idCard}}</text>
            </view>
            <view class="visitor-detail" wx:if="{{visitor.phone}}">
              <text class="visitor-label">电话号码：</text>
              <text class="visitor-value">{{visitor.phone}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多提示 -->
    <view wx:if="{{reservations.length > 0 && hasMore}}" class="load-more">
      <view wx:if="{{loading}}" class="loading-text">
        <text>加载中...</text>
      </view>
      <view wx:else class="load-more-text">
        <text>上拉加载更多</text>
      </view>
    </view>
    
    <!-- 没有更多数据提示 -->
    <view wx:if="{{reservations.length > 0 && !hasMore}}" class="no-more">
      <text class="no-more-text">没有更多数据了</text>
    </view>
    
    <!-- 空状态 -->
    <view wx:if="{{reservations.length === 0 && !loading}}" class="empty-state">
      <text class="empty-text">暂无预约记录</text>
    </view>
    
    <!-- 首次加载状态 -->
    <view wx:if="{{reservations.length === 0 && loading}}" class="first-loading">
      <text class="loading-text">加载中...</text>
    </view>
  </scroll-view>
</view>