vue实现商品下单

Vue 实现商品下单功能

前端页面结构

在 Vue 中实现商品下单功能，首先需要设计一个商品展示和下单的页面结构。通常包括商品列表、购物车和下单表单。

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

    <div class="cart">
      <h3>购物车</h3>
      <div v-for="item in cart" :key="item.id">
        <p>{{ item.name }} - {{ item.price }} x {{ item.quantity }}</p>
      </div>
      <button @click="checkout">下单</button>
    </div>

    <div v-if="showOrderForm" class="order-form">
      <h3>填写订单信息</h3>
      <input v-model="orderInfo.name" placeholder="姓名">
      <input v-model="orderInfo.address" placeholder="地址">
      <button @click="submitOrder">提交订单</button>
    </div>
  </div>
</template>

数据管理

使用 Vue 的响应式数据管理商品、购物车和订单信息。

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100 },
        { id: 2, name: '商品2', price: 200 }
      ],
      cart: [],
      showOrderForm: false,
      orderInfo: {
        name: '',
        address: ''
      }
    }
  },
  methods: {
    addToCart(product) {
      const existingItem = this.cart.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity++
      } else {
        this.cart.push({ ...product, quantity: 1 })
      }
    },
    checkout() {
      if (this.cart.length === 0) return
      this.showOrderForm = true
    },
    submitOrder() {
      const order = {
        items: this.cart,
        customerInfo: this.orderInfo,
        total: this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0)
      }
      // 这里调用API提交订单
      console.log('提交订单:', order)
      this.cart = []
      this.showOrderForm = false
      this.orderInfo = { name: '', address: '' }
    }
  }
}
</script>

与后端API交互

在实际应用中，需要通过API与后端交互完成下单流程。

methods: {
  async submitOrder() {
    try {
      const response = await axios.post('/api/orders', {
        items: this.cart,
        customerInfo: this.orderInfo
      })
      alert('订单提交成功')
      this.resetCart()
    } catch (error) {
      console.error('订单提交失败:', error)
      alert('订单提交失败')
    }
  },
  resetCart() {
    this.cart = []
    this.showOrderForm = false
    this.orderInfo = { name: '', address: '' }
  }
}

状态管理

对于复杂应用，建议使用Vuex管理购物车和订单状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: [],
    products: []
  },
  mutations: {
    addToCart(state, product) {
      const existingItem = state.cart.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity++
      } else {
        state.cart.push({ ...product, quantity: 1 })
      }
    },
    clearCart(state) {
      state.cart = []
    }
  },
  actions: {
    async submitOrder({ commit }, orderData) {
      // API调用
      commit('clearCart')
    }
  }
})

表单验证

添加基本表单验证确保用户输入有效信息。

methods: {
  validateOrder() {
    if (!this.orderInfo.name.trim()) {
      alert('请输入姓名')
      return false
    }
    if (!this.orderInfo.address.trim()) {
      alert('请输入地址')
      return false
    }
    return true
  },
  async submitOrder() {
    if (!this.validateOrder()) return
    // 提交逻辑
  }
}

订单确认页面

可以添加订单确认页面显示订单详情。

<template>
  <div v-if="orderConfirmed" class="order-confirmation">
    <h3>订单已确认</h3>
    <p>订单号: {{ orderId }}</p>
    <p>总金额: {{ orderTotal }}</p>
  </div>
</template>

以上实现涵盖了商品下单的基本流程，包括前端展示、购物车管理、订单提交和简单验证。根据实际需求可以进一步扩展功能，如支付集成、订单历史查询等。