nongxiaoyu/pages/service/mall-detail.vue

<template>
  <view class="detail-container">
    <!-- 商品轮播图 -->
    <view class="swiper-container">
      <swiper class="goods-swiper" :indicator-dots="true" :autoplay="true" :circular="true">
        <swiper-item v-for="(image, index) in goodsImages" :key="index">
          <image class="swiper-image" :src="getImageUrl(image)" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 商品基本信息 -->
    <view class="goods-basic-info">
      <view class="goods-title">{{ goodsDetail.title }}</view>
      <view class="goods-subtitle">{{ goodsDetail.description }}</view>
      <view class="price-container">
        <text class="current-price">¥{{ goodsDetail.price }}</text>
        <!-- <text class="price-unit">/{{ goodsDetail.unit }}</text> -->
        <text class="original-price" v-if="goodsDetail.originalPrice">¥{{ goodsDetail.originalPrice }}</text>
      </view>
      <view class="specs-info">
        <text class="specs-label">规格：</text>
        <text class="specs-value">{{ goodsDetail.specifications }}</text>
      </view>
    </view>

    <!-- 商品详情介绍 -->
    <view class="goods-detail-info">
      <view class="detail-title">商品详情</view>
      
      <!-- 产品特点 -->
      <view class="detail-section">
        <view class="section-title">产品特点</view>
        <view class="feature-list">
          <view 
            class="feature-item" 
            v-for="(feature, index) in goodsDetail.features" 
            :key="index"
          >
            <view class="feature-icon">✓</view>
            <text class="feature-text">{{ feature }}</text>
          </view>
        </view>
      </view>

      <!-- 使用说明 -->
      <view class="detail-section">
        <view class="section-title">使用说明</view>
        <view class="usage-content">
          <text>{{ goodsDetail.usageGuide }}</text>
        </view>
      </view>

      <!-- 产品图片展示 -->
      <view class="detail-section">
        <view class="section-title">产品展示</view>
        <view class="detail-images">
          <image 
            class="detail-image" 
            v-for="(item, index) in goodsDetail.detailImages" 
            :key="index"
            :src="getImageUrl(item)" 
            mode="widthFix"
            @click="previewImage(item, index)"
          ></image>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-btn consult-btn" @click="handleConsult">
        立即咨询
      </view>
    </view>
  </view>
</template>

<script>
	import { getMallById } from '@/api/services/mall.js';
	import api from "@/config/api.js";
export default {
  data() {
    return {
      goodsId: '',
      goodsDetail: {
        // title: '高产玉米种子',
        // description: '优质杂交种，抗病性强，适应性广',
        // price: '68',
        // originalPrice: '88',
        // unit: '袋',
        // specifications: '500g/袋，发芽率≥95%',
        // features: [
        //   '高产稳产，比普通品种增产15-20%',
        //   '抗病性强，抗大小斑病、丝黑穗病',
        //   '适应性广，适合多种土壤和气候条件',
        //   '株型紧凑，抗倒伏能力强',
        //   '籽粒饱满，商品性好'
        // ],
        // usage: '播种前先进行种子处理，选择肥沃、排水良好的土壤，按照每亩3-4千粒的密度播种。播种深度2-3厘米，播种后及时覆土镇压。生长期注意水肥管理，适时中耕除草。',
        // detailImages: [
        //   '/static/images/products/corn-seeds-new.jpg',
        //   '/static/images/products/seeds-packets.jpg',
        //   '/static/images/products/agriculture-tools.jpg'
        // ]
      },
      goodsImages: []
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.goodsId = options.id;
      this.loadGoodsDetail(this.goodsId);
    }
    if (options.title) {
      uni.setNavigationBarTitle({
        title: decodeURIComponent(options.title)
      });
    }
  },
  
  methods: {
	getImageUrl(item) {
		// 默认返回url或path
		console.log("api.upload + item.url",api.upload + item.url);
	    return  api.upload + item.url;
	  },
    // 加载商品详情
    loadGoodsDetail(goodsId) {
		uni.showLoading({
			title: '加载中'
		});
		getMallById(goodsId).then(res=>{
			if (res.data.code === 200) {
			  const { data } = res.data;
			  this.goodsDetail = data
			  // 处理图片数据
			  if (this.goodsDetail.detailImages && this.goodsDetail.swiperImages) {
			    try {
				  this.goodsImages = data.swiperImages
			      // 尝试解析图片数据字符串
			      const imageUrls = this.goodsDetail.detailImages.split(',');
			      const swiperImages = this.goodsImages.split(',');
			      this.goodsDetail.detailImages = imageUrls.filter(url => url && url.trim()).map(url => ({
			        url: url.trim(), // 保存原始URL，显示时会通过getImageUrl方法处理
			        status: 'success'
			      }));
				  this.goodsImages = swiperImages.filter(url => url && url.trim()).map(url => ({
			        url: url.trim(), // 保存原始URL，显示时会通过getImageUrl方法处理
			        status: 'success'
			      }));
			      // console.log('解析后的图片数据:', this.goodsDetail.detailImages);
			    } catch (e) {
			      console.error('解析图片数据失败:', e);
			      this.goodsDetail.detailImages = [];
			      this.goodsDetail.swiperImages = [];
			    }
			  } else {
			    this.goodsDetail.detailImages = [];
			    this.goodsDetail.swiperImages = [];
			  }
			  uni.hideLoading();
			} else {
			  uni.showToast({
			    title: res.data.msg || '获取商品信息失败',
			    icon: 'none'
			  });
			}
		})
      // 这里可以根据goodsId从后端获取商品详情
      // 目前使用模拟数据
      // const goodsData = {
      //   1: {
      //     title: '高产玉米种子',
      //     description: '优质杂交种，抗病性强，适应性广',
      //     price: '68',
      //     originalPrice: '88',
      //     unit: '袋',
      //     specifications: '500g/袋，发芽率≥95%',
      //     features: [
      //       '高产稳产，比普通品种增产15-20%',
      //       '抗病性强，抗大小斑病、丝黑穗病',
      //       '适应性广，适合多种土壤和气候条件',
      //       '株型紧凑，抗倒伏能力强',
      //       '籽粒饱满，商品性好'
      //     ],
      //     usage: '播种前先进行种子处理，选择肥沃、排水良好的土壤，按照每亩3-4千粒的密度播种。播种深度2-3厘米，播种后及时覆土镇压。生长期注意水肥管理，适时中耕除草。',
      //     detailImages: [
      //       '/static/images/products/corn-seeds-new.jpg',
      //       '/static/images/products/seeds-packets.jpg',
      //       '/static/images/products/agriculture-tools.jpg'
      //     ]
      //   }
      // };
      
      // if (goodsData[this.goodsId]) {
      //   this.goodsDetail = goodsData[this.goodsId];
      //   // 根据商品类型设置轮播图
      //   this.setGoodsImages(this.goodsId);
      // }
    },
    
    // 设置商品轮播图
    setGoodsImages(goodsId) {
      const imageMap = {
        '1': [ // 玉米种子
          '/static/images/products/corn-seeds-new.jpg',
          '/static/images/products/seeds-packets.jpg',
          '/static/images/products/agriculture-tools.jpg',
          '/static/images/products/wheat-seeds.jpg'
        ],
        '2': [ // 复合肥料
          '/static/images/products/fertilizer.jpg',
          '/static/images/products/organic-fertilizer-new.jpg',
          '/static/images/products/soil-test.jpg',
          '/static/images/products/greenhouse-film.jpg'
        ],
        '3': [ // 植物保护剂
          '/static/images/products/plant-protection.jpg',
          '/static/images/products/agriculture-tools.jpg',
          '/static/images/products/pesticide.jpg',
          '/static/images/products/insecticide.jpg'
        ],
        '4': [ // 水稻种子
          '/static/images/products/seeds-packets.jpg',
          '/static/images/products/rice-seeds.jpg',
          '/static/images/products/corn-seeds-new.jpg',
          '/static/images/products/wheat-seeds.jpg'
        ]
      };
      
      if (imageMap[goodsId]) {
        this.goodsImages = imageMap[goodsId];
      }
    },
    
    // 预览图片
    previewImage(image, index) {
	// 获取所有图片的完整URL
	 const urls = this.goodsDetail.detailImages.map(file => this.getImageUrl(file));
	 console.log("urls",urls);
      uni.previewImage({
        current: index,
        urls: urls
      });
    },
    
    // 立即咨询
    handleConsult() {
      uni.showModal({
        title: '咨询服务',
        content: '您可以通过以下方式联系我们：\n1. 拨打客服热线：400-xxx-xxxx\n2. 在线客服（工作时间：9:00-18:00）',
        confirmText: '拨打电话',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: '400-xxx-xxxx'
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; // 为底部操作栏留出空间
}

.swiper-container {
  width: 100%;
  height: 600rpx;
  background-color: #fff;
}

.goods-swiper {
  width: 100%;
  height: 100%;
}

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

.goods-basic-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.goods-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.goods-subtitle {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24rpx;
}

.price-container {
  display: flex;
  align-items: baseline;
  margin-bottom: 24rpx;
}

.current-price {
  font-size: 40rpx;
  font-weight: bold;
  color: #4CAF50;
}

.price-unit {
  font-size: 28rpx;
  color: #999;
  margin-left: 8rpx;
  margin-right: 16rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.specs-info {
  display: flex;
  align-items: center;
}

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

.specs-value {
  font-size: 28rpx;
  color: #333;
}

.goods-detail-info {
  background-color: #fff;
  padding: 30rpx;
}

.detail-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  text-align: center;
}

.detail-section {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 32rpx;
    background-color: #4CAF50;
    border-radius: 4rpx;
  }
}

.feature-list {
  .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    
    .feature-icon {
      width: 32rpx;
      height: 32rpx;
      background-color: #4CAF50;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20rpx;
      font-weight: bold;
      margin-right: 16rpx;
      flex-shrink: 0;
    }
    
    .feature-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.usage-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.detail-images {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.detail-image {
  width: 100%;
  border-radius: 12rpx;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 1000;
}

.action-btn {
  text-align: center;
  padding: 24rpx 0;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.consult-btn {
  background-color: #4CAF50;
  color: #fff;
}
</style>