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.url 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="item.url" 
            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 setup>
import { ref, onMounted } from 'vue'
import { getMallById } from '@/api/services/mall.js'

const goodsId = ref('')
const goodsDetail = ref({})
const goodsImages = ref([])

// 页面加载
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  if (options.id) {
    goodsId.value = options.id
    loadGoodsDetail(goodsId.value)
  }
  if (options.title) {
    uni.setNavigationBarTitle({
      title: decodeURIComponent(options.title)
    })
  }
})

// 加载商品详情
const loadGoodsDetail = (id) => {
  uni.showLoading({
    title: '加载中'
  })
  
  getMallById(id).then(res => {
    if (res.data.code === 200) {
      const { data } = res.data
      goodsDetail.value = data
      
      // 处理图片数据
      if (goodsDetail.value.detailImages && goodsDetail.value.swiperImages) {
        try {
          // 尝试解析图片数据字符串
          const imageUrls = goodsDetail.value.detailImages.split(',')
          const swiperImages = goodsDetail.value.swiperImages.split(',')
          
          goodsDetail.value.detailImages = imageUrls.filter(url => url && url.trim()).map(url => ({
            url: url.trim(),
            status: 'success'
          }))
          
          goodsImages.value = swiperImages.filter(url => url && url.trim()).map(url => ({
            url: url.trim(),
            status: 'success'
          }))
        } catch (e) {
          console.error('解析图片数据失败:', e)
          goodsDetail.value.detailImages = []
          goodsImages.value = []
        }
      } else {
        goodsDetail.value.detailImages = []
        goodsImages.value = []
      }
      
      uni.hideLoading()
    } else {
      uni.showToast({
        title: res.data.msg || '获取商品信息失败',
        icon: 'none'
      })
    }
  })
}

// 预览图片
const previewImage = (image, index) => {
  const urls = goodsDetail.value.detailImages.map(item => item.url)
  uni.previewImage({
    urls: urls,
    current: index
  })
}

// 立即咨询
const handleConsult = () => {
  uni.showModal({
    title: '咨询服务',
    content: '您可以通过以下方式联系我们：\n1. 拨打客服热线：400-888-8888\n2. 在线客服（工作时间：9:00-18:00）',
    confirmText: '拨打电话',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '400-888-8888'
        })
      }
    }
  })
}
</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>