当前位置：首页 > VUE

vue实现商品详情展示

2026-01-22 18:17:02VUE

实现商品详情展示的基本结构

使用Vue.js实现商品详情展示需要构建一个组件，该组件负责渲染商品信息。以下是一个基础的商品详情组件示例：

<template>
  <div class="product-detail">
    <h2>{{ product.name }}</h2>
    <img :src="product.image" :alt="product.name" />
    <p>{{ product.description }}</p>
    <p>价格: {{ product.price }}</p>
    <p>库存: {{ product.stock }}</p>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.product-detail {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
</style>

获取商品数据的方式

商品数据可以通过API请求获取。使用Vue的created或mounted生命周期钩子发起请求：

export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    this.fetchProduct()
  },
  methods: {
    async fetchProduct() {
      try {
        const response = await fetch('/api/products/123')
        this.product = await response.json()
      } catch (error) {
        console.error('获取商品详情失败:', error)
      }
    }
  }
}

处理路由参数

当商品ID通过路由传递时，可以从路由参数中获取ID：

export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    const productId = this.$route.params.id
    this.fetchProduct(productId)
  },
  methods: {
    async fetchProduct(id) {
      try {
        const response = await fetch(`/api/products/${id}`)
        this.product = await response.json()
      } catch (error) {
        console.error('获取商品详情失败:', error)
      }
    }
  }
}

添加图片轮播功能

对于多张商品图片，可以实现一个简单的轮播组件：

<template>
  <div class="image-carousel">
    <img :src="currentImage" :alt="product.name" />
    <div class="thumbnails">
      <img 
        v-for="(img, index) in product.images" 
        :key="index" 
        :src="img" 
        @click="currentImage = img"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    product: Object
  },
  data() {
    return {
      currentImage: this.product.images[0]
    }
  }
}
</script>

实现购物车功能

添加"加入购物车"按钮和相应功能：

<template>
  <button @click="addToCart">加入购物车</button>
</template>

<script>
export default {
  methods: {
    addToCart() {
      this.$store.dispatch('addToCart', {
        id: this.product.id,
        name: this.product.name,
        price: this.product.price,
        quantity: 1
      })
    }
  }
}
</script>

错误处理和加载状态

添加加载状态和错误处理提升用户体验：

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">{{ error }}</div>
  <div v-else class="product-detail">
    <!-- 商品详情内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {},
      loading: false,
      error: null
    }
  },
  methods: {
    async fetchProduct(id) {
      this.loading = true
      this.error = null
      try {
        const response = await fetch(`/api/products/${id}`)
        if (!response.ok) throw new Error('商品不存在')
        this.product = await response.json()
      } catch (err) {
        this.error = err.message
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

响应式设计考虑

确保商品详情页面在不同设备上都能良好显示：

.product-detail {
  max-width: 100%;
  padding: 10px;
}

@media (min-width: 768px) {
  .product-detail {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
}

vue实现商品详情展示