vue实现商品

Vue 实现商品功能

在 Vue 中实现商品功能通常包括商品列表展示、商品详情、购物车管理等模块。以下是实现商品功能的关键步骤和代码示例。

商品列表展示

商品列表通常通过 v-for 指令渲染，数据可以从后端 API 获取或直接定义在组件的 data 中。

<template>
  <div class="product-list">
    <div v-for="product in products" :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' }
      ]
    }
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('cart/addToCart', product)
    }
  }
}
</script>

商品详情页

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

<template>
  <div class="product-detail">
    <h1>{{ product.name }}</h1>
    <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: 1, name: '商品1', price: 100, image: 'path/to/image1.jpg', description: '商品描述' }
    },
    addToCart(product) {
      this.$store.dispatch('cart/addToCart', product)
    }
  }
}
</script>

购物车管理

购物车功能通常使用 Vuex 管理状态，包括添加商品、删除商品、计算总价等。

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

路由配置

配置路由以实现商品列表和商品详情页的导航。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import ProductList from './components/ProductList.vue'
import ProductDetail from './components/ProductDetail.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: ProductList },
    { path: '/product/:id', component: ProductDetail }
  ]
})

样式优化

使用 CSS 或 SCSS 美化商品列表和详情页。

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

.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.product-item img {
  max-width: 100%;
  height: auto;
}

通过以上步骤，可以快速实现 Vue 中的商品功能。根据实际需求，可以进一步扩展功能，如商品分类、搜索、分页等。