当前位置：首页 > VUE

vue实现订单管理

2026-01-19 16:16:48VUE

Vue 订单管理实现方案

技术选型

Vue 3 + Composition API
Vue Router 实现页面导航
Pinia/Vuex 进行状态管理
Element Plus/Ant Design Vue 作为UI组件库
Axios 处理HTTP请求

核心功能模块

订单列表展示
订单详情查看
订单状态更新
订单搜索与筛选
订单数据统计

前端路由配置

const routes = [
  {
    path: '/orders',
    component: () => import('@/views/OrderList.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/orders/:id',
    component: () => import('@/views/OrderDetail.vue'),
    props: true
  }
]

订单列表组件

<template>
  <el-table :data="orders" style="width: 100%">
    <el-table-column prop="orderNo" label="订单号" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <el-tag :type="statusColor[row.status]">
          {{ statusText[row.status] }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getOrderList } from '@/api/order'

const orders = ref([])
const statusText = {
  0: '待支付',
  1: '已支付',
  2: '已发货',
  3: '已完成'
}

onMounted(async () => {
  orders.value = await getOrderList()
})
</script>

状态管理设计

// stores/order.js
import { defineStore } from 'pinia'

export const useOrderStore = defineStore('order', {
  state: () => ({
    orders: [],
    filter: {
      status: null,
      dateRange: []
    }
  }),
  actions: {
    async fetchOrders() {
      this.orders = await orderApi.fetch(this.filter)
    }
  }
})

API请求封装

// api/order.js
import axios from '@/utils/request'

export const getOrderList = (params) => {
  return axios.get('/api/orders', { params })
}

export const updateOrderStatus = (id, status) => {
  return axios.patch(`/api/orders/${id}/status`, { status })
}

订单筛选功能

<template>
  <el-form :model="filter" inline>
    <el-form-item label="订单状态">
      <el-select v-model="filter.status">
        <el-option label="全部" value="" />
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </el-form-item>
  </el-form>
</template>