当前位置：首页 > VUE

vue如何实现购买功能

2026-01-23 04:07:25VUE

实现购物车功能

在Vue中实现购物车功能需要管理商品列表、选中状态和数量增减。通过v-for渲染商品列表，使用v-model绑定选中状态，通过方法处理数量变化。

<template>
  <div v-for="item in cartItems" :key="item.id">
    <input type="checkbox" v-model="item.selected">
    <span>{{ item.name }}</span>
    <button @click="decreaseQuantity(item)">-</button>
    <span>{{ item.quantity }}</span>
    <button @click="increaseQuantity(item)">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, name: '商品A', price: 100, quantity: 1, selected: false },
        { id: 2, name: '商品B', price: 200, quantity: 1, selected: false }
      ]
    }
  },
  methods: {
    increaseQuantity(item) {
      item.quantity++
    },
    decreaseQuantity(item) {
      if (item.quantity > 1) item.quantity--
    }
  }
}
</script>

计算总金额

使用计算属性实时计算选中商品的总金额，避免手动触发更新。计算属性会依赖cartItems的变化自动重新计算。

<script>
export default {
  computed: {
    totalAmount() {
      return this.cartItems
        .filter(item => item.selected)
        .reduce((sum, item) => sum + item.price * item.quantity, 0)
    }
  }
}
</script>

提交订单处理

创建提交订单的方法，验证用户是否选择商品后发送请求。使用异步处理订单提交，显示加载状态和结果反馈。

<script>
export default {
  methods: {
    async submitOrder() {
      const selectedItems = this.cartItems.filter(item => item.selected)
      if (!selectedItems.length) {
        alert('请选择商品')
        return
      }

      try {
        const response = await axios.post('/api/orders', {
          items: selectedItems
        })
        alert(`订单提交成功，订单号: ${response.data.orderId}`)
      } catch (error) {
        alert('提交失败: ' + error.message)
      }
    }
  }
}
</script>

订单状态管理

对于复杂应用，建议使用Vuex管理订单状态。创建订单模块集中处理订单相关数据和方法，保持组件简洁。

// store/modules/order.js
export default {
  state: {
    orders: []
  },
  mutations: {
    ADD_ORDER(state, order) {
      state.orders.push(order)
    }
  },
  actions: {
    async createOrder({ commit }, orderData) {
      const response = await axios.post('/api/orders', orderData)
      commit('ADD_ORDER', response.data)
      return response.data
    }
  }
}

支付流程集成

集成第三方支付SDK，如支付宝或微信支付。在订单创建成功后跳转支付页面，监听支付结果回调。

<script>
export default {
  methods: {
    async handlePayment(orderId) {
      const paymentInfo = await axios.get(`/api/payment/${orderId}`)
      // 调用支付SDK
      window.AlipaySDK.pay({
        orderInfo: paymentInfo.data,
        success: () => this.paymentSuccess(orderId),
        fail: () => this.paymentFailed()
      })
    },
    paymentSuccess(orderId) {
      this.$router.push(`/order/success/${orderId}`)
    },
    paymentFailed() {
      alert('支付失败，请重试')
    }
  }
}
</script>

订单历史展示

创建订单历史组件展示用户购买记录。使用分页加载提高性能，添加筛选功能增强用户体验。

<template>
  <div v-for="order in orders" :key="order.id">
    <div>订单号: {{ order.id }}</div>
    <div>日期: {{ formatDate(order.createdAt) }}</div>
    <div>金额: {{ order.totalAmount }}</div>
  </div>
  <button @click="loadMore" v-if="hasMore">加载更多</button>
</template>

<script>
export default {
  data() {
    return {
      orders: [],
      page: 1,
      hasMore: true
    }
  },
  mounted() {
    this.fetchOrders()
  },
  methods: {
    async fetchOrders() {
      const response = await axios.get(`/api/orders?page=${this.page}`)
      this.orders = [...this.orders, ...response.data.items]
      this.hasMore = response.data.hasMore
    },
    loadMore() {
      this.page++
      this.fetchOrders()
    },
    formatDate(date) {
      return new Date(date).toLocaleString()
    }
  }
}
</script>

vue如何实现购买功能