warOfCoins/pages/strategy/strategy.wxml

<!--strategy.wxml-->
<view class="container vintage-bg page-transition">
  <view class="event-header card">
    <view class="event-title">{{event.title}}</view>
    <view class="event-desc">{{event.description}}</view>
    <view class="event-impact">影响：{{event.impact}}</view>
    <view class="level-indicator">
      <text>危机等级：</text>
      <view class="level-dots">
        <view class="level-dot {{event.level >= 1 ? 'active' : ''}}"></view>
        <view class="level-dot {{event.level >= 2 ? 'active' : ''}}"></view>
        <view class="level-dot {{event.level >= 3 ? 'active' : ''}}"></view>
      </view>
    </view>
  </view>
  
  <!-- 轮次指示器 -->
  <view class="round-indicator">
    <view class="round-dot {{currentRound >= 0 ? 'active' : ''}} {{currentRound > 0 ? 'completed' : ''}}"></view>
    <view class="round-dot {{currentRound >= 1 ? 'active' : ''}} {{currentRound > 1 ? 'completed' : ''}}"></view>
    <view class="round-dot {{currentRound >= 2 ? 'active' : ''}} {{currentRound > 2 ? 'completed' : ''}}"></view>
  </view>
  
  <!-- 已选策略显示区域 -->
  <view class="selected-strategies" wx:if="{{selectedStrategies.length > 0}}">
    <view class="section-title">已选择的策略</view>
    <view class="strategies-list">
      <view wx:for="{{selectedStrategies}}" wx:key="index" class="selected-strategy-item">
        <view class="round-label">第{{item.round}}轮</view>
        <view class="strategy-name">{{item.strategy.title}}</view>
      </view>
    </view>
  </view>
  
  <view class="strategy-section">
    <view class="section-title">{{roundTitle}}</view>
    
    <view class="selection-help">选择一个适用于当前危机的策略，不可选择已使用过的策略</view>
    
    <!-- 可选策略数量提示 -->
    <view class="tip-container" wx:if="{{selectableCount === 0}}">
      当前事件没有可用的应对策略，请返回选择其他事件。
    </view>
    
    <!-- 加载状态显示 -->
    <view class="loading-container" wx:if="{{isLoading}}">
      <view class="loading-spinner"></view>
    </view>
    
    <view class="strategy-category" wx:if="{{!isLoading}}">
      <view class="category-header">
        <view class="category-icon economic-icon"></view>
        <view class="category-title">经济手段</view>
      </view>
      <view class="strategy-list">
        <view wx:for="{{strategies.economic}}" wx:key="id" 
              class="strategy-item card {{item.applicable.indexOf(event.type) > -1 ? '' : 'disabled'}} {{strategiesUsed[item.id] ? 'used' : ''}}"
              bindtap="handleStrategySelect"
              data-type="economic" data-id="{{item.id}}"
              data-applicable="{{item.applicable.indexOf(event.type) > -1}}"
              data-used="{{strategiesUsed[item.id]}}">
          <view class="strategy-title">{{item.title}}</view>
          <view class="strategy-desc">{{item.description}}</view>
          <view wx:if="{{item.applicable.indexOf(event.type) === -1}}" class="not-applicable">不适用于当前危机</view>
          <view wx:elif="{{strategiesUsed[item.id]}}" class="already-used">已经使用</view>
        </view>
      </view>
    </view>
    
    <view class="strategy-category" wx:if="{{!isLoading}}">
      <view class="category-header">
        <view class="category-icon admin-icon"></view>
        <view class="category-title">行政手段</view>
      </view>
      <view class="strategy-list">
        <view wx:for="{{strategies.administrative}}" wx:key="id" 
              class="strategy-item card {{item.applicable.indexOf(event.type) > -1 ? '' : 'disabled'}} {{strategiesUsed[item.id] ? 'used' : ''}}"
              bindtap="handleStrategySelect"
              data-type="administrative" data-id="{{item.id}}"
              data-applicable="{{item.applicable.indexOf(event.type) > -1}}"
              data-used="{{strategiesUsed[item.id]}}">
          <view class="strategy-title">{{item.title}}</view>
          <view class="strategy-desc">{{item.description}}</view>
          <view wx:if="{{item.applicable.indexOf(event.type) === -1}}" class="not-applicable">不适用于当前危机</view>
          <view wx:elif="{{strategiesUsed[item.id]}}" class="already-used">已经使用</view>
        </view>
      </view>
    </view>
    
    <view class="strategy-category" wx:if="{{!isLoading}}">
      <view class="category-header">
        <view class="category-icon mob-icon"></view>
        <view class="category-title">群众动员</view>
      </view>
      <view class="strategy-list">
        <view wx:for="{{strategies.mobilization}}" wx:key="id" 
              class="strategy-item card {{item.applicable.indexOf(event.type) > -1 ? '' : 'disabled'}} {{strategiesUsed[item.id] ? 'used' : ''}}"
              bindtap="handleStrategySelect"
              data-type="mobilization" data-id="{{item.id}}"
              data-applicable="{{item.applicable.indexOf(event.type) > -1}}"
              data-used="{{strategiesUsed[item.id]}}">
          <view class="strategy-title">{{item.title}}</view>
          <view class="strategy-desc">{{item.description}}</view>
          <view wx:if="{{item.applicable.indexOf(event.type) === -1}}" class="not-applicable">不适用于当前危机</view>
          <view wx:elif="{{strategiesUsed[item.id]}}" class="already-used">已经使用</view>
        </view>
      </view>
    </view>
  </view>
  
  <view class="action-buttons">
    <view class="back-btn" bindtap="navigateBack">返回事件选择</view>
    <view wx:if="{{selectedStrategies.length > 0}}" class="finish-btn" bindtap="finishEarly">查看最终结果</view>
  </view>
  
  <!-- 历史案例模态框 -->
  <view class="modal-mask" wx:if="{{showModal}}" catchtap="preventBubble">
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">历史案例参考</text>
        <view class="modal-close" catchtap="closeModal">×</view>
      </view>
      <view class="modal-body">
        <view class="case-title">{{currentHistoryCase.title}}</view>
        <view class="case-image"></view>
        <view class="case-desc">{{currentHistoryCase.description}}</view>
      </view>
      <view class="modal-footer">
        <view class="btn" catchtap="closeModal">了解了，继续</view>
      </view>
    </view>
  </view>
</view>