ht80/sheji(1)/pages/ai-plan/ai-plan.wxml

<!-- pages/ai-plan/ai-plan.wxml -->
<view class="ai-plan-page" style="--primary-color:#e54d42">
  <!-- 顶部导航 -->
  <view class="nav-header">
    <text class="nav-title">AI红色旅游规划</text>
  </view>
  
  <!-- 进度指示器 -->
  <view class="progress-steps">
    <view class="step {{currentStep >= 1 ? 'active' : ''}}">
      <view class="step-number">1</view>
      <text class="step-text">偏好设置</text>
    </view>
    <view class="step-line {{currentStep >= 2 ? 'active' : ''}}"></view>
    <view class="step {{currentStep >= 2 ? 'active' : ''}}">
      <view class="step-number">2</view>
      <text class="step-text">行程生成</text>
    </view>
    <view class="step-line {{currentStep >= 3 ? 'active' : ''}}"></view>
    <view class="step {{currentStep >= 3 ? 'active' : ''}}">
      <view class="step-number">3</view>
      <text class="step-text">完成</text>
    </view>
  </view>
  
  <!-- 步骤1: 偏好设置 -->
  <block wx:if="{{currentStep === 1}}">
    <view class="step-container">
      <!-- 城市选择 -->
      <view class="form-section">
        <text class="section-title">选择城市</text>
        <view class="city-selector">
          <view 
            wx:for="{{cityOptions}}"
            wx:key="value" 
            class="city-option {{selectedCity === item.value ? 'selected' : ''}}"
            data-value="{{item.value}}"
            bindtap="toggleCity"
          >
            {{item.label}}
          </view>
        </view>
      </view>
      
      <!-- 天数选择 -->
      <view class="form-section">
        <text class="section-title">旅行天数</text>
        <view class="day-selector">
          <view 
            wx:for="{{dayOptions}}" 
            wx:key="value"
            class="day-option {{selectedDays === item.value ? 'selected' : ''}}"
            bindtap="selectDays"
            data-value="{{item.value}}"
          >
            {{item.label}}
          </view>
        </view>
      </view>
      
      <!-- 兴趣偏好 -->
      <view class="form-section">
        
        <view class="day-selector">
          <view 
            wx:for="{{interestOptions}}"
            wx:key="value" 
            class="day-option {{selectedInterests.includes(item.value) ? 'selected' : ''}}"
            bindtap="toggleInterest"
            data-value="{{item.value}}"
          >
           
          </view>
        </view>
      </view>
      
      <!-- 出行方式 -->
      <view class="form-section">
        <text class="section-title">出行方式</text>
        <view class="transport-options">
          <view 
            wx:for="{{transportOptions}}"
            wx:key="value"
            class="transport-option {{selectedTransport === item.value ? 'selected' : ''}}"
            bindtap="selectTransport"
            data-value="{{item.value}}"
          >
            <text>{{item.label}}</text>
          </view>
        </view>
      </view>
      
      <!-- 特殊需求 -->
      <view class="form-section">
        <text class="section-title">特殊需求</text>
        <textarea 
          class="custom-input" 
          placeholder="如：需要轮椅通道、希望包含党史讲解等" 
          value="{{customRequirements}}"
          bindinput="updateCustomRequirements"
        ></textarea>
      </view>
      
      <button class="next-btn" bindtap="goToNextStep">下一步</button>
    </view>
  </block>
  
  <!-- 步骤2: 行程生成 -->
  <block wx:if="{{currentStep === 2}}">
    <view class="step-container">
      <!-- 加载状态 -->
      <view wx:if="{{!planGenerated || isLoading}}" class="generating-container">
        <image src="/images/red-loading.png" class="loading-gif" mode="aspectFit"></image>
        <text class="generating-text">AI正在为您规划红色教育路线...</text>
        <text class="generating-tip">正在筛选革命教育基地和党史学习点</text>
      </view>

      <!-- 行程结果 -->
      <view wx:else class="plan-result">
        <!-- 地图总览 -->
          <view class="map-section" wx:if="{{mapData.showMap}}">
            <view class="section-header">
              <image src="/images/icons/map-red.png" class="section-icon"></image>
              <text class="section-title">行程地图总览</text>
            </view>
            
            <!-- 天数切换标签 -->
            <scroll-view scroll-x class="day-tabs">
              <view 
                class="day-tab {{currentMapDay === -1 ? 'active' : ''}}"
                bindtap="resetToAllAttractions"
              >
                全部
              </view>
              <view 
                wx:for="{{planData.days}}" 
                wx:key="day"
                class="day-tab {{currentMapDay === index ? 'active' : ''}}"
                bindtap="switchMapDay"
                data-day="{{index}}"
                style="border-color: {{mapData.dayColors[index]}}; color: {{currentMapDay === index ? '#fff' : mapData.dayColors[index]}}; background-color: {{currentMapDay === index ? mapData.dayColors[index] : 'transparent'}}"
              >
                第{{item.day}}天
              </view>
            </scroll-view>
            
            <!-- 地图容器 -->
            <view class="map-container">
              <map
                id="routeMap"
                longitude="{{mapData.longitude}}"
                latitude="{{mapData.latitude}}"
                scale="{{mapData.scale}}"
                markers="{{mapData.markers}}"
                polyline="{{mapData.polyline}}"
                include-points="{{mapData.includePoints}}"
                style="width: 100%; height: 400px;"
                bindmarkertap="handleMarkerTap"
                bindregionchange="handleRegionChange"
                show-location
              >
                <!-- 地图控制按钮 -->
                <cover-view class="map-controls">
                  <cover-button class="control-btn" bindtap="handleZoomIn">
                    <image src="/images/icons/zoom-in.png" class="control-icon"></image>
                  </cover-button>
                  <cover-button class="control-btn" bindtap="handleZoomOut">
                    <image src="/images/icons/zoom-out.png" class="control-icon"></image>
                  </cover-button>
                  <cover-button class="control-btn" bindtap="resetToAllAttractions">
                    <image src="/images/icons/location.png" class="control-icon"></image>
                  </cover-button>
                </cover-view>
                
                <!-- 路线图例 -->
                <cover-view class="map-legend">
                  <cover-view wx:for="{{planData.days}}" wx:key="day" class="legend-item">
                    <cover-view class="legend-color" style="background:{{mapData.dayColors[index]}}"></cover-view>
                    <cover-text>第{{item.day}}天</cover-text>
                  </cover-view>
                </cover-view>
              </map>
            </view>
            
            <!-- 地图图例 -->
            <view class="map-legend">
              <view class="legend-item">
                <image src="/images/marker-red-star.png" class="legend-icon"></image>
                <text>红色教育基地</text>
              </view>
              <view class="legend-item">
                <image src="/images/map-line-sample.png" class="legend-icon"></image>
                <text>行程路线</text>
              </view>
            </view>
          </view>

        <!-- 在地图总览下方添加路线规划展示 -->
        <view class="route-plan-section" wx:if="{{planGenerated && mapData.showMap}}">
          <view class="section-header">
            <image src="/images/icons/route-red.png" class="section-icon"></image>
            <text class="section-title">AI规划路线详情</text>
          </view>
          
          <view class="day-routes">
            <view wx:for="{{planData.days}}" wx:key="day" class="day-route">
              <view class="route-header">
                <view class="route-day-tag" style="background-color: {{['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index%7]}}">
                  第{{item.day}}天
                </view>
                <text class="route-theme">{{item.theme}}</text>
              </view>
              
              <view class="route-steps">
                <view wx:for="{{item.attractions}}" wx:key="id" class="route-step">
                  <view class="step-marker" style="background-color: {{['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index%7]}}">
                    {{index+1}}
                  </view>
                  <view class="step-content">
                    <text class="step-title">{{item.name}}</text>
                    <view class="step-info">
                      <text class="step-time">{{item.visit_time}}</text>
                      <text class="step-duration">{{item.duration}}分钟</text>
                    </view>
                    <text class="step-address">{{item.address}}</text>
                  </view>
                </view>
              </view>
              
              <view class="route-summary">
                <image src="/images/icons/summary-red.png" class="summary-icon"></image>
                <text class="summary-text">{{item.summary}}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="save-btn" bindtap="savePlan">
            <image src="/images/icons/save-red.png" class="btn-icon"></image>
            保存行程
          </button>
          <button class="regenerate-btn" bindtap="regeneratePlan">
            <image src="/images/icons/refresh-red.png" class="btn-icon"></image>
            重新规划
          </button>
          <button class="share-btn" bindtap="sharePlan">
            <image src="/images/icons/share-red.png" class="btn-icon"></image>
            分享行程
          </button>
        </view>
      </view>
    </view>
  </block>

  <!-- 步骤3: 完成 -->
  <block wx:if="{{currentStep === 3}}">
    <view class="step-container success-container">
      <image src="/images/success-red.png" class="success-icon"></image>
      <text class="success-title">行程保存成功</text>
      <text class="success-subtitle">您的红色教育行程已保存</text>
      
      <view class="success-actions">
        <button class="view-plan-btn" bindtap="viewPlan">查看完整行程</button>
        <button class="share-plan-btn" bindtap="sharePlan">分享行程</button>
      </view>
    </view>
  </block>
</view>

<!-- 景点弹窗 -->
<view class="attraction-modal" wx:if="{{showAttractionDetail}}">
  <!-- 纯色遮罩层 -->
  <view class="modal-mask" bindtap="closeAttractionDetail"></view>
  
  <!-- 弹窗内容容器 -->
  <view class="modal-container">
    <!-- 顶部图片展示 -->
    <view class="image-container">
      <!-- 景点图片展示 -->
      <image 
        src="{{currentAttraction.image}}" 
        mode="aspectFill"
        class="attraction-image"
        binderror="handleImageError"
        bindload="handleImageLoad"
        data-id="{{currentAttraction.id}}"
        data-name="{{currentAttraction.name}}"
        data-city="{{selectedCity}}"
      />
    <!-- 关闭按钮 -->
    <view class="close-btn" bindtap="closeAttractionDetail">
      <image src="/images/icons/close-circle.png" class="close-icon"></image>
    </view>
  </view>
    
    <!-- 可滚动内容区域 -->
    <scroll-view scroll-y class="modal-body">
      <!-- 景点标题和标签 -->
      <view class="attraction-header">
        <text class="attraction-title">{{currentAttraction.name}}</text>
        <view class="attraction-tags">
          <text class="tag time-tag">
            <image src="/images/icons/clock.png" class="tag-icon"></image>
            开放时间：{{currentAttraction.open_hours || '09:00-17:00'}}
          </text>
        </view>
      </view>
      
      <!-- 景点简介 -->
      <view class="section">
        <view class="section-header">
          <image src="/images/icons/summary-red.png" class="section-icon"></image>
          <text class="section-title">景点简介</text>
        </view>
        <text class="section-content">{{currentAttraction.description || '暂无简介'}}</text>
      </view>
      
      <!-- 历史意义 -->
      <view class="section" wx:if="{{currentAttraction.is_red_tourism && currentAttraction.history_significance}}">
        <view class="section-header">
          <image src="/images/icons/history.png" class="section-icon"></image>
          <text class="section-title">历史意义</text>
        </view>
        <text class="section-content">{{currentAttraction.history_significance}}</text>
      </view>
      
      
      <!-- 实用信息 -->
      <view class="info-grid">
        <view class="info-item">
          <image src="/images/icons/location.png" class="info-icon"></image>
          <text class="info-text">{{currentAttraction.address || '地址信息待补充'}}</text>
        </view>
        <view class="info-item">
          <image src="/images/icons/ticket-small.png" class="info-icon"></image>
          <text class="info-text">{{currentAttraction.ticket_info || '凭身份证免费参观'}}</text>
        </view>
      </view>
      
      <!-- 参观须知 -->
      <view class="section">
        <view class="section-header">
          <image src="/images/icons/notice.png" class="section-icon"></image>
          <text class="section-title">参观须知</text>
        </view>
        <view class="notice-list">
          <view class="notice-item" wx:for="{{currentAttraction.visiting_etiquette || DEFAULT_ETIQUETTE}}" wx:key="*this">
            <image src="/images/icons/dot-red.png" class="notice-icon"></image>
            <text>{{item}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="modal-footer">
      <button class="navigate-btn" bindtap="navigateToAttraction">
        <image src="/images/map-arrow.png" class="btn-icon"></image>
        导航前往
      </button>
    </view>
  </view>
</view>