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

<view class="container">
  <!-- 顶部导航 - 更现代化的设计 -->
  <view class="header">
    <view class="back-btn" bindtap="navigateBack">
      <image src="/images/icons/back.png" class="back-icon"></image>
      <text>返回</text>
    </view>
    <text class="title">行程详情</text>
    <view class="header-right"></view> <!-- 保持对称 -->
  </view>

  <!-- 行程基本信息 - 卡片设计优化 -->
  <view class="plan-info-card">
    <view class="plan-header">
      <text class="plan-title">{{plan.title}}</text>
      <view class="plan-days-badge">{{plan.days}}天行程</view>
    </view>
    
    <view class="plan-meta">
      <view class="meta-item">
        <image src="/images/icons/calendar-red.png" class="meta-icon"></image>
        <text>{{plan.created_at}}</text>
      </view>
    </view>
    
    <view class="plan-desc-box">
      <image src="/images/icons/quote.png" class="quote-icon"></image>
      <text class="plan-desc">{{plan.description}}</text>
    </view>
    
    <!-- 城市标签 - 更活泼的设计 -->
    <view class="city-tags">
      <block wx:for="{{plan.cities}}" wx:key="id">
        <view class="city-tag">
          <image src="/images/icons/location-red.png" class="tag-icon"></image>
          <text>{{item.name}}</text>
        </view>
      </block>
    </view>
  </view>

  <!-- 每日行程 - 时间轴设计 -->
  <view class="timeline">
    <view wx:for="{{plan.day_plans}}" wx:key="day" class="timeline-item">
      <!-- 时间轴左侧标记 -->
      <view class="timeline-marker" style="background-color: {{['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index%7]}}">
        <text>DAY {{item.day_number}}</text>
      </view>
      
      <!-- 时间轴内容 -->
      <view class="timeline-content">
        <view class="day-theme-box">
          <image src="/images/icons/theme.png" class="theme-icon"></image>
          <text class="day-theme">{{item.theme}}</text>
        </view>
        
        <!-- 景点列表 -->
        <view class="attractions">
          <view wx:for="{{item.spots}}" wx:key="id" class="attraction-card">
            <view class="attraction-header">
              <view class="attraction-index">{{index + 1}}</view>
              <text class="attraction-name">{{item.name}}</text>
              <view class="attraction-status {{item.has_checked ? 'checked' : ''}}">
                {{item.has_checked ? '✓ 已打卡' : '未打卡'}}
              </view>
            </view>

            <view class="attraction-actions">
                <button class="checkin-btn" bindtap="viewCheckins" data-spot-id="{{item.id}}" data-plan-id="{{plan.id}}">
                  <image src="/images/icons/checkin-history.png" class="action-icon"></image>
                  查看打卡
                </button>
              </view>

            
            <view class="attraction-body">
              <view class="attraction-image-box">
                <image 
                  src="{{spotImages[item.id] || item.image || '/images/default-spot.jpg'}}" 
                  class="attraction-image" 
                  mode="aspectFill">
                </image>
                <view class="image-overlay"></view>
              </view>
               
        
              <view class="attraction-details">
                <view class="detail-row">
                  <image src="/images/icons/time-small.png" class="detail-icon"></image>
                  <text>{{item.visit_time}} · 约{{item.duration}}分钟</text>
                </view>
                
                <view class="detail-row">
                  <image src="/images/icons/location.png" class="detail-icon"></image>
                  <text>{{item.address}}</text>
                </view>
                
                <view class="section">
                  <view class="section-title">
                    <image src="/images/icons/info.png" class="section-icon"></image>
                    <text>景点介绍</text>
                  </view>
                  <text class="section-content">{{item.description}}</text>
                </view>

                <view class="section">
                  <view class="section-title">
                    <image src="/images/icons/history.png" class="section-icon"></image>
                    <text>历史意义</text>
                  </view>
                  <text class="section-content">{{item.history_significance}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 当日总结 -->
        <view class="day-summary">
          <view class="summary-header">
            <image src="/images/icons/summary-red.png" class="summary-icon"></image>
            <text>当日总结</text>
          </view>
          <text class="summary-content">{{item.summary}}</text>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 底部操作按钮 - 悬浮设计 -->
  <view class="floating-actions">
    <button class="share-btn" bindtap="sharePlan">
      <image src="/images/icons/share-white.png" class="btn-icon"></image>
      分享行程
    </button>
    <button class="map-btn" bindtap="viewOnMap">
      <image src="/images/icons/map-white.png" class="btn-icon"></image>
      查看地图
    </button>
  </view>
</view>


<!-- 在页面底部添加打卡记录弹窗 -->
<view class="checkin-modal {{showCheckinModal ? 'show' : ''}}">
  <view class="modal-mask" bindtap="closeCheckinModal"></view>
  <view class="modal-content">
    <view class="modal-header">
      <text class="modal-title">打卡记录</text>
      <view class="modal-close" bindtap="closeCheckinModal">
        <image src="/images/icons/close-circle.png" class="close-icon"></image>
      </view>
    </view>
    
    <swiper class="checkin-swiper" current="{{currentCheckinIndex}}" bindchange="swiperChange">
      <block wx:for="{{currentCheckins}}" wx:key="id">
        <swiper-item>
          <view class="checkin-item">
            <view class="checkin-image-box">
              <image src="{{item.image_url || '/images/default-checkin.jpg'}}" class="checkin-image" mode="aspectFit"></image>
            </view>
            <view class="checkin-info">
              <text class="checkin-time">{{item.check_in_time}}</text>
              <text class="checkin-note">{{item.note || '暂无文案'}}</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    
   
  </view>
</view>

<view class="container">
  <!-- 顶部导航 - 更现代化的设计 -->
  <view class="header">
    <view class="back-btn" bindtap="navigateBack">
      <image src="/images/icons/back.png" class="back-icon"></image>
      <text>返回</text>
    </view>
    <text class="title">行程详情</text>
    <view class="header-right"></view> <!-- 保持对称 -->
  </view>

  <!-- 行程基本信息 - 卡片设计优化 -->
  <view class="plan-info-card">
    <view class="plan-header">
      <text class="plan-title">{{plan.title}}</text>
      <view class="plan-days-badge">{{plan.days}}天行程</view>
    </view>
    
    <view class="plan-meta">
      <view class="meta-item">
        <image src="/images/icons/calendar-red.png" class="meta-icon"></image>
        <text>{{plan.created_at}}</text>
      </view>
    </view>
    
    <view class="plan-desc-box">
      <image src="/images/icons/quote.png" class="quote-icon"></image>
      <text class="plan-desc">{{plan.description}}</text>
    </view>
    
    <!-- 城市标签 - 更活泼的设计 -->
    <view class="city-tags">
      <block wx:for="{{plan.cities}}" wx:key="id">
        <view class="city-tag">
          <image src="/images/icons/location-red.png" class="tag-icon"></image>
          <text>{{item.name}}</text>
        </view>
      </block>
    </view>
  </view>

  <!-- 每日行程 - 时间轴设计 -->
  <view class="timeline">
    <view wx:for="{{plan.day_plans}}" wx:key="day" class="timeline-item">
      <!-- 时间轴左侧标记 -->
      <view class="timeline-marker" style="background-color: {{['#e54d42','#f37b1d','#1cbbb4','#0081ff','#6739b6','#9c26b0','#e03997'][index%7]}}">
        <text>DAY {{item.day_number}}</text>
      </view>
      
      <!-- 时间轴内容 -->
      <view class="timeline-content">
        <view class="day-theme-box">
          <image src="/images/icons/theme.png" class="theme-icon"></image>
          <text class="day-theme">{{item.theme}}</text>
        </view>
        
        <!-- 景点列表 -->
        <view class="attractions">
          <view wx:for="{{item.spots}}" wx:key="id" class="attraction-card">
            <view class="attraction-header">
              <view class="attraction-index">{{index + 1}}</view>
              <text class="attraction-name">{{item.name}}</text>
              <view class="attraction-status {{item.has_checked ? 'checked' : ''}}">
                {{item.has_checked ? '✓ 已打卡' : '未打卡'}}
              </view>
            </view>

            <view class="attraction-actions">
                <button class="checkin-btn" bindtap="viewCheckins" data-spot-id="{{item.id}}" data-plan-id="{{plan.id}}">
                  <image src="/images/icons/checkin-history.png" class="action-icon"></image>
                  查看打卡
                </button>
              </view>

            
            <view class="attraction-body">
              <view class="attraction-image-box">
                <image 
                  src="{{spotImages[item.id] || item.image || '/images/default-spot.jpg'}}" 
                  class="attraction-image" 
                  mode="aspectFill">
                </image>
                <view class="image-overlay"></view>
              </view>
               
        
              <view class="attraction-details">
                <view class="detail-row">
                  <image src="/images/icons/time-small.png" class="detail-icon"></image>
                  <text>{{item.visit_time}} · 约{{item.duration}}分钟</text>
                </view>
                
                <view class="detail-row">
                  <image src="/images/icons/location.png" class="detail-icon"></image>
                  <text>{{item.address}}</text>
                </view>
                
                <view class="section">
                  <view class="section-title">
                    <image src="/images/icons/info.png" class="section-icon"></image>
                    <text>景点介绍</text>
                  </view>
                  <text class="section-content">{{item.description}}</text>
                </view>
                
                <view class="section">
                  <view class="section-title">
                    <image src="/images/icons/history.png" class="section-icon"></image>
                    <text>历史意义</text>
                  </view>
                  <text class="section-content">{{item.history_significance}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 当日总结 -->
        <view class="day-summary">
          <view class="summary-header">
            <image src="/images/icons/summary-red.png" class="summary-icon"></image>
            <text>当日总结</text>
          </view>
          <text class="summary-content">{{item.summary}}</text>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 底部操作按钮 - 悬浮设计 -->
  <view class="floating-actions">
    <button class="share-btn" bindtap="sharePlan">
      <image src="/images/icons/share-white.png" class="btn-icon"></image>
      分享行程
    </button>
    <button class="map-btn" bindtap="viewOnMap">
      <image src="/images/icons/map-white.png" class="btn-icon"></image>
      查看地图
    </button>
  </view>
</view>


<!-- 在页面底部添加打卡记录弹窗 -->
<view class="checkin-modal {{showCheckinModal ? 'show' : ''}}">
  <view class="modal-mask" bindtap="closeCheckinModal"></view>
  <view class="modal-content">
    <view class="modal-header">
      <text class="modal-title">打卡记录</text>
      <view class="modal-close" bindtap="closeCheckinModal">
        <image src="/images/icons/close-circle.png" class="close-icon"></image>
      </view>
    </view>
    
    <swiper class="checkin-swiper" current="{{currentCheckinIndex}}" bindchange="swiperChange">
      <block wx:for="{{currentCheckins}}" wx:key="id">
        <swiper-item>
          <view class="checkin-item">
            <view class="checkin-image-box">
              <image src="{{item.image_url || '/images/default-checkin.jpg'}}" class="checkin-image" mode="aspectFit"></image>
            </view>
            <view class="checkin-info">
              <text class="checkin-time">{{item.check_in_time}}</text>
              <text class="checkin-note">{{item.note || '暂无文案'}}</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    
   
  </view>
</view>



<!-- 地图弹窗 -->
<view class="map-modal {{showMapModal ? 'show' : ''}}">
  <view class="modal-mask" bindtap="closeMapModal"></view>
  <view class="modal-content map-content">
    <view class="modal-header">
      <text class="modal-title">行程地图</text>
      <view class="modal-close" bindtap="closeMapModal">
        <image src="/images/icons/close-circle.png" class="close-icon"></image>
      </view>
    </view>
    
    <!-- 地图容器 -->
    <view class="map-container">
      <map
        id="planMap"
        longitude="{{mapData.longitude}}"
        latitude="{{mapData.latitude}}"
        scale="{{mapData.scale || 14}}"
        markers="{{mapData.markers}}"
        polyline="{{mapData.polylines}}"
        include-points="{{mapData.includePoints}}"
        style="width: 100%; height: 400px;"
        bindmarkertap="handleMarkerTap"
      >
        <!-- 自定义标记点 - 添加地点名称 -->
        <cover-view wx:for="{{mapData.markers}}" wx:key="id" class="custom-marker">
          <cover-view class="marker-label" style="top: {{item.labelOffset || -50}}rpx;">
            <cover-view class="label-bubble">
              <cover-text class="label-text">{{item.callout.content}}</cover-text>
            </cover-view>
            <cover-view class="label-arrow"></cover-view>
          </cover-view>
        </cover-view>
        
        <!-- 地图控制按钮 -->
        <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="{{plan.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-bottom">
      <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>