vue 实现商品页面

实现商品页面的基本步骤

使用Vue.js实现商品页面需要结合组件化开发、数据绑定和路由等功能。以下是一个典型实现方案：

商品数据管理

商品数据通常存储在Vuex或Pinia状态管理中，也可以通过API从后端获取。创建商品数据模型：

// 商品数据结构示例
const products = [
  {
    id: 1,
    name: '商品名称',
    price: 99.99,
    description: '商品描述',
    images: ['image1.jpg', 'image2.jpg'],
    stock: 100,
    attributes: {
      color: ['红色', '蓝色'],
      size: ['S', 'M', 'L']
    }
  }
]

商品列表组件

创建商品列表组件展示多个商品：

<template>
  <div class="product-list">
    <ProductCard 
      v-for="product in products" 
      :key="product.id" 
      :product="product"
      @add-to-cart="addToCart"
    />
  </div>
</template>

<script>
import ProductCard from './ProductCard.vue'

export default {
  components: { ProductCard },
  data() {
    return {
      products: [] // 从API或Vuex获取
    }
  },
  methods: {
    addToCart(product) {
      // 处理加入购物车逻辑
    }
  }
}
</script>

商品详情组件

创建商品详情页展示单个商品完整信息：

<template>
  <div class="product-detail">
    <div class="gallery">
      <img 
        v-for="(image, index) in product.images" 
        :key="index" 
        :src="image" 
        :alt="product.name"
      >
    </div>

    <div class="info">
      <h1>{{ product.name }}</h1>
      <p class="price">{{ product.price }}</p>
      <p class="description">{{ product.description }}</p>

      <div class="variants" v-if="product.attributes">
        <div v-for="(values, attr) in product.attributes" :key="attr">
          <h3>{{ attr }}</h3>
          <select v-model="selectedAttributes[attr]">
            <option v-for="value in values" :key="value">{{ value }}</option>
          </select>
        </div>
      </div>

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

路由配置

配置Vue Router实现商品列表和详情页的导航：

const routes = [
  {
    path: '/products',
    component: ProductList,
    name: 'product-list'
  },
  {
    path: '/products/:id',
    component: ProductDetail,
    name: 'product-detail',
    props: true
  }
]

商品筛选功能

实现商品分类和筛选功能：

<template>
  <div class="product-filter">
    <input v-model="searchQuery" placeholder="搜索商品">

    <div class="categories">
      <button 
        v-for="category in categories" 
        :key="category.id"
        @click="selectCategory(category.id)"
      >
        {{ category.name }}
      </button>
    </div>

    <div class="price-range">
      <input type="range" v-model="priceRange" min="0" max="1000">
      <span>价格范围: 0 - {{ priceRange }}</span>
    </div>
  </div>
</template>

购物车集成

实现购物车功能并与商品页面交互：

// 在商品组件中添加购物车方法
methods: {
  addToCart() {
    const cartItem = {
      productId: this.product.id,
      quantity: 1,
      selectedAttributes: this.selectedAttributes
    }
    this.$store.dispatch('cart/addItem', cartItem)
  }
}

响应式设计

确保商品页面在不同设备上正常显示：

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail {
    flex-direction: column;
  }
}

性能优化

实现图片懒加载和无限滚动优化性能：

<img v-lazy="image.src" alt="商品图片">

<div v-infinite-scroll="loadMoreProducts" infinite-scroll-disabled="busy">
  <!-- 商品列表 -->
</div>

以上方案提供了Vue实现商品页面的核心功能模块，可根据实际需求进行扩展和调整。