vue实现商品

Vue实现商品功能

商品列表展示

使用v-for指令循环渲染商品列表，结合计算属性实现筛选或排序功能。

<template>
  <div class="product-list">
    <div v-for="product in filteredProducts" :key="product.id" class="product-item">
      <img :src="product.image" :alt="product.name">
      <h3>{{ product.name }}</h3>
      <p>价格: {{ product.price }}</p>
      <button @click="addToCart(product)">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100, image: 'path/to/image1.jpg' },
        { id: 2, name: '商品2', price: 200, image: 'path/to/image2.jpg' }
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => 
        product.name.includes(this.searchQuery)
      )
    }
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product)
    }
  }
}
</script>

商品详情页

通过路由参数获取商品ID，展示商品详细信息。

<template>
  <div class="product-detail">
    <h2>{{ product.name }}</h2>
    <img :src="product.image" :alt="product.name">
    <p>价格: {{ product.price }}</p>
    <p>描述: {{ product.description }}</p>
    <button @click="addToCart(product)">加入购物车</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    const productId = this.$route.params.id
    this.fetchProduct(productId)
  },
  methods: {
    fetchProduct(id) {
      // API调用获取商品详情
      this.product = { id: id, name: '商品详情', price: 100, description: '商品详细描述' }
    },
    addToCart(product) {
      this.$store.dispatch('cart/addToCart', product)
    }
  }
}
</script>

购物车功能

使用Vuex管理购物车状态，实现添加、删除商品功能。

// store/modules/cart.js
export default {
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, product) {
      const existingItem = state.items.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity++
      } else {
        state.items.push({ ...product, quantity: 1 })
      }
    },
    REMOVE_ITEM(state, productId) {
      state.items = state.items.filter(item => item.id !== productId)
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('ADD_ITEM', product)
    },
    removeFromCart({ commit }, productId) {
      commit('REMOVE_ITEM', productId)
    }
  },
  getters: {
    cartItems: state => state.items,
    cartTotal: state => {
      return state.items.reduce((total, item) => {
        return total + (item.price * item.quantity)
      }, 0)
    }
  }
}

商品搜索功能

结合计算属性和watch实现实时搜索功能。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索商品">
    <ul>
      <li v-for="product in searchResults" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      allProducts: [],
      searchResults: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.searchProducts(newVal)
    }
  },
  methods: {
    searchProducts(query) {
      if (query.trim() === '') {
        this.searchResults = this.allProducts
        return
      }
      this.searchResults = this.allProducts.filter(product =>
        product.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  }
}
</script>

商品分类筛选

使用计算属性实现商品分类筛选功能。

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="">所有分类</option>
      <option v-for="category in categories" :value="category.id" :key="category.id">
        {{ category.name }}
      </option>
    </select>
    <div v-for="product in filteredByCategory" :key="product.id">
      {{ product.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '服装' }
      ],
      products: [
        { id: 1, name: '手机', categoryId: 1 },
        { id: 2, name: 'T恤', categoryId: 2 }
      ]
    }
  },
  computed: {
    filteredByCategory() {
      if (!this.selectedCategory) return this.products
      return this.products.filter(
        product => product.categoryId == this.selectedCategory
      )
    }
  }
}
</script>