ht80/sheji(1)/pages/wodexingcheng/wodexingcheng.wxml

<view class="container">
  <!-- 顶部导航 -->
  <view class="header">
    <text class="title">我的行程</text>
  </view>

  <!-- 选项卡 -->
  <view class="tabs">
    <view 
      class="tab {{activeTab === 'in_progress' ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="in_progress"
    >
      进行中
    </view>
    
    <view 
      class="tab {{activeTab === 'all' ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="all"
    >
      未完成
    </view>

    <view 
      class="tab {{activeTab === 'completed' ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="completed"
    >
      已完成
    </view>
  </view>

  <!-- 进行中行程 -->
  <block wx:if="{{activeTab === 'in_progress'}}">
    <block wx:if="{{inProgressPlans.length > 0}}">
      <view class="plan-result">
        <!-- 地图总览 -->
        <view class="map-section" wx:if="{{latestPlanMapData.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="{{inProgressPlans[0].day_plans}}" 
              wx:key="day"
              class="day-tab {{currentMapDay === index ? 'active' : ''}}"
              bindtap="switchMapDay"
              data-day="{{index}}"
              style="border-color: {{['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index]}}; color: {{currentMapDay === index ? '#fff' : ['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index]}}; background-color: {{currentMapDay === index ? ['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index] : 'transparent'}}"
            >
              第{{item.day_number}}天
            </view>
          </scroll-view>
          
          <!-- 地图容器 -->
          <view class="map-container">
            <map
              id="latestPlanMap"
              longitude="{{latestPlanMapData.longitude}}"
              latitude="{{latestPlanMapData.latitude}}"
              scale="{{latestPlanMapData.scale || 14}}"
              markers="{{latestPlanMapData.markers}}"
              polyline="{{latestPlanMapData.polylines}}"
              include-points="{{latestPlanMapData.includePoints}}"
              style="width: 100%; height: 400px;"
              bindmarkertap="handleMarkerTap"
            >
              <!-- 地图控制按钮 -->
              <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="{{inProgressPlans[0].day_plans}}" wx:key="day" class="legend-item">
                  <cover-view class="legend-color" style="background:{{['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index]}}"></cover-view>
                  <cover-text>第{{item.day_number}}天</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="{{latestPlanMapData.showMap}}">
          <view class="section-header">
            <image src="/images/icons/route-red.png" class="section-icon"></image>
            <text class="section-title">行程详情</text>
          </view>
          
          <view class="day-routes">
            <view wx:for="{{inProgressPlans[0].day_plans}}" 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_number}}天
                </view>
                <text class="route-theme">{{item.theme}}</text>
              </view>
              
              <!-- 景点列表 -->
              <view class="route-steps">
                <view wx:for="{{item.spots}}" wx:key="id" wx:for-item="spot" wx:for-index="spotIndex" class="route-step">
                  <view class="step-marker" style="background-color: {{['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index%7]}}">
                    {{spotIndex+1}}
                    <image wx:if="{{spot.has_checked}}" src="/images/icons/checked.png" class="checked-icon"></image>
                  </view>
                  <view class="step-content">
                    <view class="step-main">
                      <view class="step-header">
                        <text class="step-title">{{spot.name}}</text>
                        <view class="step-tag" wx:if="{{spot.type}}">{{spot.type}}</view>
                      </view>
                      <view class="step-info">
                        <view class="info-item">
                          <text>{{spot.visit_time}} · {{spot.duration}}分钟</text>
                        </view>
                        <view class="info-item">
                          <image src="/images/icons/location.png" class="info-icon"></image>
                          <text>{{spot.address}}</text>
                        </view>
                      </view>
                    </view>
                    <!-- 在打卡按钮下方添加图片预览 -->
                    <view class="step-actions-vertical">
                      <button class="action-btn detail-btn" bindtap="showSpotDetail" data-day="{{index}}" data-spot="{{spotIndex}}" data-spotid="{{spot.id}}">
                        详 情
                      </button>
                      <button class="action-btn check-btn {{spot.has_checked ? 'checked' : ''}}" catchtap="checkInSpot" data-day="{{index}}" data-spot="{{spotIndex}}" data-spotid="{{spot.id}}">
                        {{spot.has_checked ? '已打卡' : '打 卡'}}
                      </button>
                      <!-- 打卡图片预览 -->
                      <view wx:if="{{spot.checkin_images && spot.checkin_images.length > 0}}" class="checkin-images">
                        <image wx:for="{{spot.checkin_images}}" wx:key="*this" src="{{item}}" mode="aspectFill" class="checkin-image"></image>
                      </view>
                    </view>
                  </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="view-btn" bindtap="completePlan" data-id="{{inProgressPlans[0].id}}">
            <image src="/images/icons/view-details.png" class="btn-icon"></image>
            行程结束并保存
          </button>
          <button class="share-btn" bindtap="sharePlan" data-id="{{inProgressPlans[0].id}}">
            <image src="/images/icons/share-red.png" class="btn-icon"></image>
            分享行程
          </button>
        </view>
      </view>
    </block>
    
    <block wx:else>
      <view class="empty-state">
        <image src="/images/empty-plan.png" mode="aspectFit"></image>
        <text>您没有进行中的行程</text>
        <button class="primary-btn" bindtap="navigateToCreate">开始规划新行程</button>
      </view>
    </block>
  </block>

  <!-- 已完成行程 -->
  <block wx:if="{{activeTab === 'completed'}}">
    <view class="history-container">
      <block wx:if="{{completedPlans.length > 0}}">
        <!-- 行程卡片列表 -->
        <view class="plan-list">
          <block wx:for="{{completedPlans}}" wx:key="id">
            <view class="plan-card" data-id="{{item.id}}">
            <!-- 状态标签 -->
              <view class="status-tag {{item.status === 'in_progress' ? 'in-progress' : 'completed'}}">
                {{item.status === 'in_progress' ? '进行中' : '已完成'}}
              </view>
               <!-- 卡片顶部装饰条 -->
               <view class="card-ribbon">
               
              </view>
              <view class="card-content">
                <!-- 行程标题和城市 -->
                <view class="plan-header">
                  <view class="city-tags">
                    <block wx:for="{{item.cities}}" wx:key="id">
                      <view class="city-tag">{{item.name}}</view>
                    </block>
                  </view>
                  <text class="plan-title">{{item.title}}</text>
                </view>
                
                <!-- 行程描述 -->
                <view class="plan-content">
                  <text class="plan-desc">{{item.description}}</text>
                  
                  <!-- 统计信息 -->
                  <view class="plan-stats">
                    <view class="stat-item">
                      <image class="stat-icon" src="/images/icons/flag-red.png"></image>
                      <text>{{item.statistics.total_attractions}}个景点</text>
                    </view>
                    <view class="stat-item">
                      <image class="stat-icon" src="/images/icons/calendar-red.png"></image>
                      <text>{{item.created_at}}</text>
                    </view>
                  </view>
                </view>
              </view>
              
              <!-- 底部操作区域 -->
              <view class="card-footer">
                <button class="action-btn share-btn" catchtap="sharePlan" data-id="{{item.id}}">
                  <image src="/images/icons/share-white.png" class="btn-icon"></image>
                  分享
                </button>
                <button class="action-btn detail-btn" catchtap="navigateToDetail" data-id="{{item.id}}">
                  <image src="/images/eye-icon.png" class="btn-icon"></image>
                  查看详情
                </button>
              </view>
            </view>
          </block>
        </view>
        
        <!-- 分页控件 -->
        <view class="pagination-container">
          <view class="pagination">
            <button 
              class="pagination-btn prev" 
              disabled="{{completedCurrentPage === 1}}" 
              bindtap="changeCompletedPage" 
              data-page="{{completedCurrentPage - 1}}"
            >
              上一页
            </button>
            
            <view class="page-indicator">
              <text class="current-page">{{completedCurrentPage}}</text>
              <text class="page-separator">/</text>
              <text class="total-pages">{{completedTotalPages}}</text>
            </view>
            
            <button 
              class="pagination-btn next" 
              disabled="{{completedCurrentPage === completedTotalPages}}" 
              bindtap="changeCompletedPage" 
              data-page="{{completedCurrentPage + 1}}"
            >
              下一页
            </button>
          </view>
        </view>
      </block>
      
      <!-- 空状态 -->
      <block wx:else>
        <view class="empty-state">
          <image src="/images/empty-plan.png" mode="aspectFit" class="empty-illustration"></image>
          <text class="empty-title">暂无已完成行程</text>
          <text class="empty-subtitle">您还没有完成任何行程</text>
          <button class="create-btn" bindtap="navigateToCreate">
            立即规划新行程
          </button>
        </view>
      </block>
    </view>
  </block>

  <!-- 全部行程 -->
  <block wx:if="{{activeTab === 'all'}}">
    <view class="history-container">
      <block wx:if="{{allPlans.length > 0}}">
        <!-- 行程卡片列表 -->
        <view class="plan-list">
          <block wx:for="{{allPlans}}" wx:key="id">
            <view class="plan-card" data-id="{{item.id}}">
              <!-- 状态标签 -->
              <view class="status-tag {{item.status === 'in_progress' ? 'in-progress' : 'completed'}}">
                {{item.status === 'in_progress' ? '进行中' : '已完成'}}
              </view>
              
              <!-- 卡片顶部装饰条 -->
              <view class="card-ribbon">
               
              </view>
              
              <view class="card-content">
                <!-- 行程标题和城市 -->
                <view class="plan-header">
                  <view class="city-tags">
                    <block wx:for="{{item.cities}}" wx:key="id">
                      <view class="city-tag">{{item.name}}</view>
                    </block>
                  </view>
                  <text class="plan-title">{{item.title}}</text>
                </view>
                
                <!-- 行程描述 -->
                <view class="plan-content">
                  <text class="plan-desc">{{item.description}}</text>
                  
                  <!-- 统计信息 -->
                  <view class="plan-stats">
                    <view class="stat-item">
                      <image class="stat-icon" src="/images/icons/flag-red.png"></image>
                      <text>{{item.statistics.total_attractions}}个景点</text>
                    </view>
                    <view class="stat-item">
                      <image class="stat-icon" src="/images/icons/calendar-red.png"></image>
                      <text>{{item.created_at}}</text>
                    </view>
                  </view>
                </view>
              </view>
              
              <!-- 底部操作区域 -->
              <view class="card-footer">
                <button class="action-btn share-btn" catchtap="sharePlan" data-id="{{item.id}}">
                  <image src="/images/icons/share-white.png" class="btn-icon"></image>
                  分享
                </button>
                <button 
                  class="action-btn {{item.status === 'in_progress' ? 'start-btn' : 'detail-btn'}}" 
                  catchtap="{{item.status === 'in_progress' ? 'startPlan' : 'navigateToDetail'}}" 
                  data-id="{{item.id}}"
                >
                  <image 
                    src="{{item.status === 'in_progress' ? '/images/icons/play.png' : '/images/eye-icon.png'}}" 
                    class="btn-icon"
                  ></image>
                  {{item.status === 'in_progress' ? '开始行程' : '查看详情'}}
                </button>
              </view>
            </view>
          </block>
        </view>
        
        <!-- 分页控件 -->
        <view class="pagination-container">
          <view class="pagination">
            <button 
              class="pagination-btn prev" 
              disabled="{{allCurrentPage === 1}}" 
              bindtap="changeAllPage" 
              data-page="{{allCurrentPage - 1}}"
            >
              上一页
            </button>
            
            <view class="page-indicator">
              <text class="current-page">{{allCurrentPage}}</text>
              <text class="page-separator">/</text>
              <text class="total-pages">{{allTotalPages}}</text>
            </view>
            
            <button 
              class="pagination-btn next" 
              disabled="{{allCurrentPage === allTotalPages}}" 
              bindtap="changeAllPage" 
              data-page="{{allCurrentPage + 1}}"
            >
              下一页
            </button>
          </view>
        </view>
      </block>
      
      <!-- 空状态 -->
      <block wx:else>
        <view class="empty-state">
          <image src="/images/empty-plan.png" mode="aspectFit" class="empty-illustration"></image>
          <text class="empty-title">暂无行程记录</text>
          <text class="empty-subtitle">您还没有创建任何行程</text>
          <button class="create-btn" bindtap="navigateToCreate">
            立即规划新行程
          </button>
        </view>
      </block>
    </view>
  </block>

  <!-- 景点详情弹窗 -->
  <view class="modal" wx:if="{{showSpotModal}}">
    <view class="modal-mask" catchtap="hideSpotModal"></view>
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">{{currentSpot.name}}</text>
        <image src="/images/icons/close-circle.png" class="close-icon" catchtap="hideSpotModal"></image>
      </view>
      <scroll-view class="modal-body" scroll-y>
        <image src="{{currentSpot.image || '/images/default-spot.png'}}" class="spot-image" mode="widthFix"></image>
        <view class="spot-info">
          <view class="info-item">
            <image src="/images/icons/clock.png" class="info-icon"></image>
            <text>参观时间: {{currentSpot.visit_time}}</text>
          </view>
          <view class="info-item">
            <image src="/images/icons/duration.png" class="info-icon"></image>
            <text>预计时长: {{currentSpot.duration}}分钟</text>
          </view>
          <view class="info-item">
            <image src="/images/icons/location.png" class="info-icon"></image>
            <text>{{currentSpot.address}}</text>
          </view>
        </view>
        <view class="spot-desc">
          <text class="desc-title">景点介绍</text>
          <text class="desc-content">{{currentSpot.description || '暂无详细介绍'}}</text>
        </view>
        <view class="spot-desc">
          <text class="desc-title">历史意义</text>
          <text class="desc-content">{{currentSpot.history_significance || '暂无详细介绍'}}</text>
        </view>
      </scroll-view>
      <view class="modal-footer">
        <button class="modal-btn check-btn" catchtap="checkInSpot" data-day="{{currentDayIndex}}" data-spot="{{currentSpotIndex}}" data-spotid="{{currentSpot.id}}">
          <image src="/images/icons/check-in.png" class="action-icon"></image>
          {{currentSpot.has_checked ? '已打卡' : '打卡'}}
        </button>
        <button class="modal-btn nav-btn" catchtap="navigateToSpot">
          <image src="/images/icons/navigation.png" class="action-icon"></image>
          导航前往
        </button>
      </view>
    </view>
  </view>

  <!-- 打卡弹窗 -->
  <view class="modal" wx:if="{{showCheckinModal}}">
    <view class="modal-mask" catchtap="closeCheckinModal"></view>
    <view class="modal-content checkin-modal">
      <view class="modal-header">
        <text class="modal-title">{{tempCheckinData.isEdit ? '编辑打卡' : '打卡记录'}}</text>
        <image src="/images/icons/close-circle.png" class="close-icon" catchtap="closeCheckinModal"></image>
      </view>
      
      <scroll-view class="modal-body" scroll-y>
        <!-- 打卡图片 -->
        <view class="checkin-image-section">
          <text class="section-label">打卡照片</text>
          <view class="image-uploader" bindtap="chooseCheckinImage">
            <block wx:if="{{checkinImage}}">
              <image src="{{checkinImage}}" mode="aspectFill" class="uploaded-image"></image>
            </block>
            <block wx:else>
              <image src="/images/icons/camera-add.png" class="upload-icon"></image>
              <text class="upload-text">点击上传照片</text>
            </block>
            <view class="uploading-mask" wx:if="{{isUploading}}">
              <image src="/images/icons/loading.png" class="loading-icon"></image>
            </view>
          </view>
        </view>
        
        <!-- 打卡文案 -->
        <view class="checkin-note-section">
          <text class="section-label">打卡心得</text>
          <textarea 
            class="note-textarea" 
            placeholder="写下你的参观心得..." 
            maxlength="200" 
            value="{{checkinNote}}"
            bindinput="onCheckinNoteInput"
          ></textarea>
          <text class="word-count">{{checkinNote.length}}/200</text>
        </view>
      </scroll-view>
      
      <view class="modal-footer">
        <button class="modal-btn cancel-btn" catchtap="closeCheckinModal">取消</button>
        <button class="modal-btn confirm-btn" catchtap="submitCheckin">
          {{tempCheckinData.isEdit ? '更新打卡' : '提交打卡'}}
        </button>
      </view>
    </view>
  </view>
</view>