当前位置：首页 > VUE

vue实现课程购买

2026-03-10 02:38:56VUE

Vue 实现课程购买功能

数据准备与展示

课程数据通常存储在数组中，每个课程对象包含名称、价格、描述等信息。使用 v-for 指令循环渲染课程列表，搭配 v-bind 绑定课程数据到模板。

vue实现课程购买

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

<script>
export default {
  data() {
    return {
      courses: [
        { id: 1, name: 'Vue入门', description: '基础教程', price: 99 },
        { id: 2, name: 'Vue进阶', description: '高级技巧', price: 199 }
      ]
    }
  }
}
</script>

购物车逻辑实现

通过 Vuex 或组件内状态管理购物车数据。定义 addToCart 方法将课程添加到购物车数组，并计算总价。

vue实现课程购买

methods: {
  addToCart(course) {
    this.$store.commit('ADD_TO_CART', course); // Vuex 方式
    // 或组件内管理：
    // this.cartItems.push(course);
    // this.total += course.price;
  }
}

订单提交与支付

创建订单提交表单，收集用户信息。通过 Axios 调用后端 API 生成支付链接，跳转到支付网关（如支付宝、微信支付）。

<template>
  <form @submit.prevent="submitOrder">
    <input v-model="userInfo.name" placeholder="姓名">
    <button type="submit">提交订单</button>
  </form>
</template>

<script>
import axios from 'axios';
export default {
  methods: {
    async submitOrder() {
      const res = await axios.post('/api/orders', {
        courses: this.$store.state.cart,
        user: this.userInfo
      });
      window.location.href = res.data.paymentUrl;
    }
  }
}
</script>

状态管理与优化

使用 Vuex 集中管理购物车状态，通过 getters 计算属性派生数据（如总价）。添加本地存储持久化购物车数据。

// store.js
const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    ADD_TO_CART(state, course) {
      state.cart.push(course);
    }
  },
  getters: {
    totalPrice: state => {
      return state.cart.reduce((sum, item) => sum + item.price, 0);
    }
  }
});