traveler/LaneTexture/pages/spot-detail/index.vue

<template>
  <view class="spot-detail">
    <!-- 顶部封面区域 -->
    <view class="cover-section">
      <image class="cover-image" :src="spotData.coverImage || defaultImage" mode="aspectFill"></image>
      <view class="cover-mask"></view>
      <view class="cover-content">
        <view class="back-btn" @tap="goBack">
          <text class="back-icon">←</text>
        </view>
        <view class="spot-title">{{spotData.name || '景点详情'}}</view>
        <view class="spot-subtitle" v-if="spotData.level">{{spotData.level}}级景区</view>
      </view>
    </view>
    
    <!-- 景点信息 -->
    <view class="spot-info">
      <view class="info-title">景点信息</view>
      <view class="info-content">
        <view class="info-item" v-if="spotData.category">
          <text class="info-label">类型</text>
          <text class="info-value">{{spotData.category}}</text>
        </view>
        <view class="info-item" v-if="spotData.city">
          <text class="info-label">城市</text>
          <text class="info-value">{{spotData.city}}</text>
        </view>
        <view class="info-item" v-if="spotData.address">
          <text class="info-label">地址</text>
          <text class="info-value">{{spotData.address}}</text>
        </view>
        <view class="info-item" v-if="spotData.businessHours">
          <text class="info-label">开放时间</text>
          <text class="info-value">{{spotData.businessHours}}</text>
        </view>
        <view class="info-item" v-if="spotData.ticketPrice">
          <text class="info-label">票价</text>
          <text class="info-value">{{spotData.ticketPrice}}</text>
        </view>
      </view>
    </view>
    
    <!-- 景点描述 -->
    <view class="spot-description" v-if="spotData.description">
      <view class="section-title">景点介绍</view>
      <view class="description-content">
        {{spotData.description}}
      </view>
    </view>
    
    <!-- 景点位置 -->
    <view class="spot-location" v-if="spotData.latitude && spotData.longitude">
      <view class="section-title">景点位置</view>
      <view class="location-map">
        <map
          class="map"
          :latitude="Number(spotData.latitude)"
          :longitude="Number(spotData.longitude)"
          :markers="mapMarkers"
          scale="14"
          show-location="true"
        ></map>
      </view>
    </view>
    
    <!-- 按钮区域 -->
    <view class="action-buttons">
      <button class="add-btn" @tap="addToTrip">添加到行程</button>
      <button class="map-btn" @tap="viewOnMap">在地图中查看</button>
    </view>
  </view>
</template>

<script>
import { findById } from '@/pages/api/luyou.js';

export default {
  data() {
    return {
      isLoading: true,
      spotId: null,
      spotName: '',
      spotData: {},
      defaultImage: '/static/baoding.jpg',
      mapMarkers: []
    }
  },
  
  onLoad(options) {
    console.log('景点详情页面加载，参数:', options);
    
    // 获取景点ID
    if (options && options.spotId) {
      console.log('接收到景点ID:', options.spotId);
      this.spotId = options.spotId;
      this.spotName = options.spotName || '景点详情';
      this.loadSpotData();
    } else {
      console.log('没有接收到景点ID，使用默认数据');
      uni.showToast({
        title: '景点信息不完整',
        icon: 'none'
      });
      setTimeout(() => {
        this.goBack();
      }, 1500);
    }
  },
  
  methods: {
    // 加载景点数据
    loadSpotData() {
      this.isLoading = true;
      uni.showLoading({
        title: '加载景点信息...'
      });
      
      // 调用API获取景点详情
      findById(this.spotId).then(res => {
        console.log('景点详情API返回:', res);
        
        // 解析API返回的数据
        if (res && res.code === 200) {
          // 尝试从不同位置获取数据
          if (res.obj) {
            this.spotData = res.obj;
          } else if (res.data && res.data.obj) {
            this.spotData = res.data.obj;
          } else if (res.data) {
            this.spotData = res.data;
          }
          
          // 处理封面图片
          if (this.spotData.coverImage) {
            if (this.spotData.coverImage.startsWith('http')) {
              // 如果是完整URL，直接使用
              // 不做处理
            } else if (!this.spotData.coverImage.startsWith('/')) {
              // 如果不是以/开头，添加/
              this.spotData.coverImage = '/' + this.spotData.coverImage;
            }
          } else {
            this.spotData.coverImage = this.defaultImage;
          }
          
          // 设置地图标记
          if (this.spotData.latitude && this.spotData.longitude) {
            this.mapMarkers = [{
              id: 1,
              latitude: Number(this.spotData.latitude),
              longitude: Number(this.spotData.longitude),
              title: this.spotData.name,
              iconPath: '/static/marker_attraction.png',
              width: 32,
              height: 32,
              callout: {
                content: this.spotData.name,
                color: '#333333',
                fontSize: 12,
                borderRadius: 4,
                padding: 5,
                display: 'ALWAYS'
              }
            }];
          }
          
          uni.setNavigationBarTitle({
            title: this.spotData.name || this.spotName
          });
        } else {
          console.error('API返回错误:', res);
          uni.showToast({
            title: '加载景点信息失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('加载景点信息失败:', err);
        uni.showToast({
          title: '加载景点信息失败',
          icon: 'none'
        });
      }).finally(() => {
        this.isLoading = false;
        uni.hideLoading();
      });
    },
    
    // 添加到行程
    addToTrip() {
      if (!this.spotData || !this.spotData.id) {
        uni.showToast({
          title: '景点信息不完整',
          icon: 'none'
        });
        return;
      }
      
      // 准备景点数据
      const spot = {
        id: this.spotData.id,
        name: this.spotData.name,
        address: this.spotData.address,
        latitude: this.spotData.latitude,
        longitude: this.spotData.longitude,
        coverImage: this.spotData.coverImage,
        category: this.spotData.category,
        description: this.spotData.description
      };
      
      // 跳转到地图页面并传递景点数据
      uni.navigateTo({
        url: `/pages/custom-trip/map?lat=${spot.latitude}&lng=${spot.longitude}&name=${encodeURIComponent(spot.name)}`,
        success: () => {
          console.log('成功跳转到地图页面');
        },
        fail: (err) => {
          console.error('跳转到地图页面失败:', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 在地图中查看
    viewOnMap() {
      if (!this.spotData || !this.spotData.latitude || !this.spotData.longitude) {
        uni.showToast({
          title: '景点位置信息不完整',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到地图页面
      uni.navigateTo({
        url: `/pages/custom-trip/map?lat=${this.spotData.latitude}&lng=${this.spotData.longitude}&name=${encodeURIComponent(this.spotData.name)}`,
        fail: (err) => {
          console.error('跳转到地图页面失败:', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack({
        fail: () => {
          // 如果无法返回上一页，则回到首页
          uni.switchTab({
            url: '/pages/planning/index'
          });
        }
      });
    }
  }
}
</script>

<style>
.spot-detail {
  padding-bottom: 40rpx;
  background-color: #f5f7fa;
}

/* 顶部封面区域 */
.cover-section {
  position: relative;
  height: 400rpx;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.cover-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));
}

.cover-content {
  position: absolute;
  bottom: 40rpx;
  left: 0;
  width: 100%;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.back-btn {
  position: absolute;
  top: -280rpx;
  left: 0;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 48rpx;
  color: #ffffff;
}

.spot-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
}

.spot-subtitle {
  font-size: 28rpx;
  color: rgba(255,255,255,0.9);
  background-color: rgba(0,0,0,0.3);
  padding: 6rpx 20rpx;
  border-radius: 100rpx;
  display: inline-block;
}

/* 景点信息 */
.spot-info {
  margin: 30rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.info-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6rpx;
  width: 8rpx;
  height: 32rpx;
  background: linear-gradient(to bottom, #4facfe, #00f2fe);
  border-radius: 4rpx;
}

.info-content {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666;
  font-size: 28rpx;
}

.info-value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

/* 景点描述 */
.spot-description {
  margin: 30rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6rpx;
  width: 8rpx;
  height: 32rpx;
  background: linear-gradient(to bottom, #4facfe, #00f2fe);
  border-radius: 4rpx;
}

.description-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  text-align: justify;
}

/* 景点位置 */
.spot-location {
  margin: 30rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}

.location-map {
  margin-top: 20rpx;
  height: 400rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

/* 按钮区域 */
.action-buttons {
  padding: 40rpx 30rpx;
  display: flex;
  gap: 20rpx;
  justify-content: space-between;
}

.add-btn {
  background-color: #3e98ff;
  color: #ffffff;
  border-radius: 50rpx;
  font-size: 32rpx;
  padding: 20rpx 0;
  flex: 1;
}

.map-btn {
  background-color: #f0f0f0;
  color: #333;
  border-radius: 50rpx;
  font-size: 32rpx;
  padding: 20rpx 0;
  flex: 1;
}
</style>