vue实现订单

Vue 实现订单功能

订单数据结构设计

订单数据通常包含以下字段：

order: {
  id: String,          // 订单ID
  userId: String,      // 用户ID
  items: Array,        // 商品列表
  totalPrice: Number,  // 总价
  status: String,      // 订单状态
  createdAt: Date,     // 创建时间
  address: Object      // 收货地址
}

订单列表组件

创建订单列表组件展示用户订单：

<template>
  <div class="order-list">
    <div v-for="order in orders" :key="order.id" class="order-item">
      <h3>订单号: {{ order.id }}</h3>
      <p>状态: {{ order.status }}</p>
      <p>总价: ￥{{ order.totalPrice }}</p>
      <button @click="viewDetail(order.id)">查看详情</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [] // 从API获取的订单数据
    }
  },
  methods: {
    viewDetail(orderId) {
      this.$router.push(`/orders/${orderId}`)
    }
  }
}
</script>

订单详情组件

创建订单详情组件展示单个订单详细信息：

<template>
  <div class="order-detail">
    <h2>订单详情</h2>
    <div v-for="item in order.items" :key="item.id">
      <p>{{ item.name }} × {{ item.quantity }}</p>
    </div>
    <p>收货地址: {{ order.address.detail }}</p>
    <button v-if="order.status === 'pending'" @click="cancelOrder">取消订单</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: {} // 从API获取的单个订单数据
    }
  },
  methods: {
    cancelOrder() {
      // 调用API取消订单
    }
  }
}
</script>

状态管理

使用Vuex管理订单状态：

const store = new Vuex.Store({
  state: {
    orders: []
  },
  mutations: {
    SET_ORDERS(state, orders) {
      state.orders = orders
    },
    UPDATE_ORDER_STATUS(state, { orderId, status }) {
      const order = state.orders.find(o => o.id === orderId)
      if (order) order.status = status
    }
  },
  actions: {
    async fetchOrders({ commit }) {
      const res = await api.getOrders()
      commit('SET_ORDERS', res.data)
    },
    async cancelOrder({ commit }, orderId) {
      await api.cancelOrder(orderId)
      commit('UPDATE_ORDER_STATUS', { orderId, status: 'cancelled' })
    }
  }
})

API请求封装

封装订单相关API请求：

// api/order.js
export default {
  getOrders() {
    return axios.get('/api/orders')
  },
  getOrder(id) {
    return axios.get(`/api/orders/${id}`)
  },
  cancelOrder(id) {
    return axios.put(`/api/orders/${id}/cancel`)
  },
  createOrder(orderData) {
    return axios.post('/api/orders', orderData)
  }
}

路由配置

配置订单相关路由：

const router = new VueRouter({
  routes: [
    {
      path: '/orders',
      component: OrderList
    },
    {
      path: '/orders/:id',
      component: OrderDetail
    }
  ]
})

表单验证

订单创建表单验证示例：

data() {
  return {
    form: {
      items: [],
      address: ''
    },
    rules: {
      items: [
        { required: true, message: '请选择商品', trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入收货地址', trigger: 'blur' }
      ]
    }
  }
}