server/miniprogram/pages/index/index.wxml

<!--pages/index/index.wxml-->
<view class="container">
  <!-- 顶部用户信息卡片 -->
  <view class="user-card card">
    <view class="user-info flex align-center">
      <image class="avatar" src="{{userInfo.avatarUrl || '/images/default-avatar.png'}}" mode="aspectFill"></image>
      <view class="user-details flex-1 ml-3">
        <view class="username text-lg font-bold">{{userInfo.nickName || '未登录'}}</view>
        <view class="member-status flex align-center mt-1">
          <view class="member-badge {{memberInfo.level || 'free'}}">
            {{memberInfo.levelText || '普通用户'}}
          </view>
          <view class="expire-info text-sm text-muted ml-2" wx:if="{{memberInfo.expireInfo}}">
            {{memberInfo.expireInfo.text}}
          </view>
        </view>
      </view>
      <view class="login-btn" wx:if="{{!isLoggedIn}}" bindtap="handleLogin">
        <text class="btn btn-primary btn-small">登录</text>
      </view>
    </view>
  </view>

  <!-- 会员权益快捷入口 -->
  <view class="benefits-card card" wx:if="{{isLoggedIn}}">
    <view class="card-header">
      <view class="flex align-center justify-between">
        <text class="text-lg font-bold">会员权益</text>
        <text class="text-primary text-sm" bindtap="navigateToCenter">查看全部</text>
      </view>
    </view>
    <view class="card-body">
      <view class="benefits-grid">
        <view class="benefit-item" wx:for="{{quickBenefits}}" wx:key="id" bindtap="handleBenefitClick" data-benefit="{{item}}">
          <view class="benefit-icon">
            <image src="{{item.icon}}" mode="aspectFit"></image>
          </view>
          <view class="benefit-name text-sm">{{item.name}}</view>
          <view class="benefit-status text-xs" wx:if="{{item.available}}">
            <text class="text-success">可用</text>
          </view>
          <view class="benefit-status text-xs" wx:else>
            <text class="text-muted">不可用</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 功能菜单 -->
  <view class="menu-card card">
    <view class="card-header">
      <text class="text-lg font-bold">功能菜单</text>
    </view>
    <view class="card-body">
      <view class="menu-grid">
        <view class="menu-item" wx:for="{{menuItems}}" wx:key="id" bindtap="handleMenuClick" data-menu="{{item}}">
          <view class="menu-icon">
            <image src="{{item.icon}}" mode="aspectFit"></image>
          </view>
          <view class="menu-name text-sm">{{item.name}}</view>
          <view class="menu-badge" wx:if="{{item.badge}}">
            <text class="text-xs">{{item.badge}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 会员升级提示 -->
  <view class="upgrade-card card" wx:if="{{showUpgradePrompt}}">
    <view class="upgrade-content">
      <view class="upgrade-icon">
        <image src="/images/upgrade-icon.png" mode="aspectFit"></image>
      </view>
      <view class="upgrade-text">
        <view class="upgrade-title text-lg font-bold">升级会员，享受更多特权</view>
        <view class="upgrade-desc text-sm text-muted mt-1">
          解锁专属功能，提升使用体验
        </view>
      </view>
      <view class="upgrade-action">
        <text class="btn btn-primary btn-small" bindtap="navigateToUpgrade">立即升级</text>
      </view>
    </view>
  </view>

  <!-- 最近活动 -->
  <view class="activity-card card" wx:if="{{recentActivities.length > 0}}">
    <view class="card-header">
      <view class="flex align-center justify-between">
        <text class="text-lg font-bold">最近活动</text>
        <text class="text-primary text-sm" bindtap="navigateToHistory">查看更多</text>
      </view>
    </view>
    <view class="card-body">
      <view class="activity-list">
        <view class="activity-item" wx:for="{{recentActivities}}" wx:key="id">
          <view class="activity-icon">
            <image src="{{item.icon}}" mode="aspectFit"></image>
          </view>
          <view class="activity-content flex-1">
            <view class="activity-title text-sm">{{item.title}}</view>
            <view class="activity-time text-xs text-muted">{{item.timeText}}</view>
          </view>
          <view class="activity-status">
            <text class="text-xs {{item.statusClass}}">{{item.statusText}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 空状态提示 -->
  <view class="empty-state" wx:if="{{!isLoggedIn}}">
    <image class="empty-icon" src="/images/empty-login.png" mode="aspectFit"></image>
    <view class="empty-text">登录后查看更多功能</view>
    <view class="empty-desc">享受专属会员权益和服务</view>
    <text class="btn btn-primary mt-3" bindtap="handleLogin">立即登录</text>
  </view>
</view>

<!-- 权益详情弹窗 -->
<view class="benefit-modal" wx:if="{{showBenefitModal}}" bindtap="closeBenefitModal">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">{{selectedBenefit.name}}</text>
      <view class="modal-close" bindtap="closeBenefitModal">
        <image src="/images/close-icon.png" mode="aspectFit"></image>
      </view>
    </view>
    <view class="modal-body">
      <view class="benefit-detail">
        <image class="benefit-large-icon" src="{{selectedBenefit.icon}}" mode="aspectFit"></image>
        <view class="benefit-description">{{selectedBenefit.description}}</view>
        <view class="benefit-usage" wx:if="{{selectedBenefit.usage}}">
          <text class="text-sm text-muted">使用次数：{{selectedBenefit.usage.used}}/{{selectedBenefit.usage.total}}</text>
        </view>
      </view>
    </view>
    <view class="modal-footer">
      <text class="btn btn-secondary" bindtap="closeBenefitModal">关闭</text>
      <text class="btn btn-primary ml-2" wx:if="{{selectedBenefit.available}}" bindtap="useBenefit">立即使用</text>
    </view>
  </view>
</view>

<!-- 加载状态 -->
<view class="loading" wx:if="{{loading}}">
  <view class="loading-spinner"></view>
  <text>加载中...</text>
</view>