vue实现我的订单

Vue实现我的订单功能

在Vue中实现"我的订单"功能，通常需要以下几个核心模块：订单列表展示、订单详情、订单状态管理以及数据交互。以下是一个完整的实现方案：

订单数据结构设计

订单数据通常从后端API获取，前端可先定义类型：

interface OrderItem {
  id: string
  productName: string
  price: number
  quantity: number
  image: string
}

interface Order {
  orderId: string
  createTime: string
  totalAmount: number
  status: 'pending' | 'paid' | 'shipped' | 'completed' | 'cancelled'
  items: OrderItem[]
}

订单列表组件

创建OrderList.vue组件展示订单列表：

<template>
  <div class="order-list">
    <div v-for="order in orders" :key="order.orderId" class="order-card">
      <div class="order-header">
        <span>订单号: {{ order.orderId }}</span>
        <span class="status-badge" :class="order.status">{{ order.status }}</span>
      </div>
      <div v-for="item in order.items" :key="item.id" class="order-item">
        <img :src="item.image" alt="product" />
        <div class="item-info">
          <h4>{{ item.productName }}</h4>
          <p>¥{{ item.price }} x {{ item.quantity }}</p>
        </div>
      </div>
      <div class="order-footer">
        <span>合计: ¥{{ order.totalAmount }}</span>
        <button @click="viewDetail(order.orderId)">查看详情</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orders: {
      type: Array,
      required: true
    }
  },
  methods: {
    viewDetail(orderId) {
      this.$router.push(`/orders/${orderId}`)
    }
  }
}
</script>

<style scoped>
/* 样式代码 */
.order-card {
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.status-badge {
  padding: 2px 8px;
  border-radius: 4px;
}
.pending { background: #ffecb3; }
.paid { background: #bbdefb; }
</style>

订单详情组件

创建OrderDetail.vue展示单个订单详情：

<template>
  <div v-if="order" class="order-detail">
    <h3>订单详情</h3>
    <div class="detail-section">
      <p>订单号: {{ order.orderId }}</p>
      <p>创建时间: {{ formatDate(order.createTime) }}</p>
      <p>状态: <span :class="order.status">{{ order.status }}</span></p>
    </div>

    <div class="items-section">
      <h4>商品列表</h4>
      <div v-for="item in order.items" :key="item.id" class="item-row">
        <!-- 商品详情展示 -->
      </div>
    </div>

    <div class="action-buttons">
      <button v-if="order.status === 'pending'" @click="cancelOrder">取消订单</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: null
    }
  },
  async created() {
    const orderId = this.$route.params.id
    this.order = await this.fetchOrderDetail(orderId)
  },
  methods: {
    async fetchOrderDetail(orderId) {
      // API请求获取订单详情
    },
    formatDate(dateString) {
      return new Date(dateString).toLocaleString()
    },
    async cancelOrder() {
      // 取消订单逻辑
    }
  }
}
</script>

状态管理

对于复杂应用，建议使用Vuex或Pinia管理订单状态：

// store/order.js (Pinia示例)
import { defineStore } from 'pinia'

export const useOrderStore = defineStore('order', {
  state: () => ({
    orders: [],
    loading: false
  }),
  actions: {
    async fetchOrders() {
      this.loading = true
      try {
        const response = await api.get('/orders')
        this.orders = response.data
      } finally {
        this.loading = false
      }
    },
    async cancelOrder(orderId) {
      await api.patch(`/orders/${orderId}/cancel`)
      await this.fetchOrders()
    }
  }
})

API服务层

创建api服务处理网络请求：

// services/api.js
import axios from 'axios'

const api = axios.create({
  baseURL: 'https://your-api-endpoint.com'
})

export default {
  getOrders() {
    return api.get('/orders')
  },
  getOrderDetail(id) {
    return api.get(`/orders/${id}`)
  },
  cancelOrder(id) {
    return api.patch(`/orders/${id}/cancel`)
  }
}

路由配置

配置Vue Router实现页面导航：

// router.js
import { createRouter } from 'vue-router'
import OrderList from './views/OrderList.vue'
import OrderDetail from './views/OrderDetail.vue'

const routes = [
  {
    path: '/orders',
    component: OrderList
  },
  {
    path: '/orders/:id',
    component: OrderDetail
  }
]

export default createRouter({
  routes
})

页面集成

在主页面中集成订单功能：

<template>
  <div class="account-page">
    <h2>我的订单</h2>
    <OrderFilter @filter-change="handleFilterChange" />
    <OrderList :orders="filteredOrders" />
  </div>
</template>

<script>
import { computed } from 'vue'
import { useOrderStore } from './stores/order'
import OrderList from './components/OrderList.vue'
import OrderFilter from './components/OrderFilter.vue'

export default {
  components: { OrderList, OrderFilter },
  setup() {
    const store = useOrderStore()
    store.fetchOrders()

    const filteredOrders = computed(() => {
      return store.orders
    })

    return { filteredOrders }
  }
}
</script>

以上实现涵盖了订单功能的主要方面，实际开发中可根据需求调整组件结构和样式。注意处理好加载状态、错误处理和空状态展示，以提升用户体验。