vue实现商品下单

使用 Vue 实现商品下单功能

商品下单功能通常涉及商品展示、购物车管理、订单生成等步骤。以下是基于 Vue 的实现方法：

商品展示

创建商品列表组件，展示商品信息如名称、价格、图片等。使用 v-for 循环渲染商品数据。

<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: 'product1.jpg' },
        { id: 2, name: '商品2', price: 200, image: 'product2.jpg' }
      ]
    }
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('cart/addToCart', product)
    }
  }
}
</script>

购物车管理

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

// store/modules/cart.js
const state = {
  items: []
}

const 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)
  },
  UPDATE_QUANTITY(state, { productId, quantity }) {
    const item = state.items.find(item => item.id === productId)
    if (item) {
      item.quantity = quantity
    }
  }
}

const actions = {
  addToCart({ commit }, product) {
    commit('ADD_ITEM', product)
  },
  removeFromCart({ commit }, productId) {
    commit('REMOVE_ITEM', productId)
  },
  updateQuantity({ commit }, payload) {
    commit('UPDATE_QUANTITY', payload)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

订单生成

创建订单页面，展示购物车商品，计算总价，并实现下单功能。

<template>
  <div class="order-page">
    <h2>订单确认</h2>
    <div v-for="item in cartItems" :key="item.id" class="order-item">
      <p>{{ item.name }} x {{ item.quantity }}</p>
      <p>单价: {{ item.price }} 总价: {{ item.price * item.quantity }}</p>
    </div>
    <p>总金额: {{ totalPrice }}</p>
    <button @click="placeOrder">提交订单</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters('cart', ['cartItems', 'totalPrice'])
  },
  methods: {
    ...mapActions('order', ['createOrder']),
    async placeOrder() {
      try {
        await this.createOrder(this.cartItems)
        alert('订单提交成功')
        this.$router.push('/orders')
      } catch (error) {
        console.error('下单失败:', error)
      }
    }
  }
}
</script>

订单状态管理

实现订单创建、查询等功能的后端交互。

// store/modules/order.js
import api from '@/api'

const state = {
  orders: []
}

const mutations = {
  SET_ORDERS(state, orders) {
    state.orders = orders
  },
  ADD_ORDER(state, order) {
    state.orders.push(order)
  }
}

const actions = {
  async createOrder({ commit }, items) {
    const response = await api.post('/orders', { items })
    commit('ADD_ORDER', response.data)
  },
  async fetchOrders({ commit }) {
    const response = await api.get('/orders')
    commit('SET_ORDERS', response.data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

表单验证

在下单前对用户输入进行验证，如收货地址、联系方式等。

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label>收货地址</label>
      <input v-model="form.address" required>
    </div>
    <div>
      <label>联系电话</label>
      <input v-model="form.phone" required pattern="[0-9]{11}">
    </div>
    <button type="submit">确认下单</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        address: '',
        phone: ''
      }
    }
  },
  methods: {
    submitForm() {
      if (!this.form.address || !this.form.phone) {
        alert('请填写完整信息')
        return
      }
      this.placeOrder()
    }
  }
}
</script>

以上代码展示了 Vue 实现商品下单功能的核心部分。实际应用中可能需要根据具体需求进行调整，如添加支付接口、订单状态跟踪等功能。