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="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.usage }}</text>
        </view>
      </view>

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

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

<script>
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: [
        '/static/images/products/corn-seeds-new.jpg',
        '/static/images/products/fertilizer.jpg',
        '/static/images/products/organic-fertilizer-new.jpg',
        '/static/images/products/greenhouse-film.jpg'
      ]
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.goodsId = options.id;
      this.loadGoodsDetail();
    }
    if (options.title) {
      uni.setNavigationBarTitle({
        title: decodeURIComponent(options.title)
      });
    }
  },
  
  methods: {
    // 加载商品详情
    loadGoodsDetail() {
      // 这里可以根据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'
          ]
        },
        2: {
          title: '复合肥料NPK',
          description: '15-15-15配比，全营养均衡',
          price: '120',
          originalPrice: '150',
          unit: '袋',
          specifications: '40kg/袋，NPK含量≥45%',
          features: [
            '营养全面，氮磷钾配比科学',
            '速效持效相结合，肥效持久',
            '提高作物产量和品质',
            '改善土壤结构，增强保肥能力',
            '适用于多种作物和土壤类型'
          ],
          usage: '基肥：每亩施用20-30kg，在耕地时均匀撒施并翻入土中。追肥：根据作物生长情况，在关键生长期追施10-15kg。注意避免与种子直接接触，施肥后及时浇水。',
          detailImages: [
            '/static/images/products/fertilizer.jpg',
            '/static/images/products/organic-fertilizer-new.jpg',
            '/static/images/products/soil-test.jpg'
          ]
        },
        3: {
          title: '植物保护剂',
          description: '广谱除草，效果持久',
          price: '45',
          originalPrice: '58',
          unit: '瓶',
          specifications: '500ml/瓶，有效成分≥98%',
          features: [
            '广谱高效，对多种杂草有效',
            '低毒环保，对作物安全',
            '持效期长，减少施药次数',
            '易于使用，省时省力',
            '成本经济，性价比高'
          ],
          usage: '在杂草3-5叶期施药效果最佳。每亩用药量15-20ml，兑水30-45kg均匀喷雾。避免在风力较大时施药，施药后6小时内遇雨需重新施药。',
          detailImages: [
            '/static/images/products/plant-protection.jpg',
            '/static/images/products/agriculture-tools.jpg',
            '/static/images/products/pesticide.jpg'
          ]
        },
        4: {
          title: '优质水稻种子',
          description: '高产稳产，米质优良',
          price: '85',
          originalPrice: '105',
          unit: '袋',
          specifications: '25kg/袋，发芽率≥95%',
          features: [
            '优质品种，口感佳产量高',
            '抗病性强，适应性广',
            '生育期适中，便于管理',
            '籽粒饱满，商品性好',
            '耐储存，发芽率稳定'
          ],
          usage: '播种前进行晒种、选种处理。育秧密度适宜，秧龄25-30天移栽。合理密植，一般每亩1.8-2.2万穴。科学施肥，注意水分管理。',
          detailImages: [
            '/static/images/products/seeds-packets.jpg',
            '/static/images/products/rice-seeds.jpg',
            '/static/images/products/corn-seeds-new.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(current, urls) {
      uni.previewImage({
        current: current,
        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>