vue实现订单

Vue 实现订单功能

订单数据结构设计

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

order: {
  id: String,           // 订单ID
  userId: String,       // 用户ID
  items: Array,         // 订单商品列表
  totalAmount: Number,  // 订单总金额
  status: String,       // 订单状态
  createdAt: Date,      // 创建时间
  updatedAt: Date       // 更新时间
}

订单列表展示

使用 v-for 渲染订单列表：

<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.totalAmount }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [] // 从API获取的订单数据
    }
  },
  created() {
    this.fetchOrders()
  },
  methods: {
    async fetchOrders() {
      const response = await axios.get('/api/orders')
      this.orders = response.data
    }
  }
}
</script>

订单状态管理

实现订单状态变更：

<template>
  <select v-model="selectedStatus" @change="updateOrderStatus">
    <option value="pending">待处理</option>
    <option value="processing">处理中</option>
    <option value="completed">已完成</option>
    <option value="cancelled">已取消</option>
  </select>
</template>

<script>
export default {
  props: ['orderId'],
  data() {
    return {
      selectedStatus: ''
    }
  },
  methods: {
    async updateOrderStatus() {
      await axios.patch(`/api/orders/${this.orderId}`, {
        status: this.selectedStatus
      })
      this.$emit('status-updated')
    }
  }
}
</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.totalAmount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: {}
    }
  },
  created() {
    this.fetchOrderDetail()
  },
  methods: {
    async fetchOrderDetail() {
      const orderId = this.$route.params.id
      const response = await axios.get(`/api/orders/${orderId}`)
      this.order = response.data
    }
  }
}
</script>

订单搜索功能

实现订单搜索：

<template>
  <input v-model="searchQuery" placeholder="搜索订单...">
  <button @click="searchOrders">搜索</button>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    async searchOrders() {
      const response = await axios.get('/api/orders', {
        params: {
          q: this.searchQuery
        }
      })
      this.$emit('orders-searched', response.data)
    }
  }
}
</script>

订单统计图表

使用图表库展示订单数据：

<template>
  <div class="order-stats">
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  props: ['statsData'],
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      new Chart(this.$refs.chart, {
        type: 'bar',
        data: {
          labels: this.statsData.labels,
          datasets: [{
            label: '订单量',
            data: this.statsData.values
          }]
        }
      })
    }
  }
}
</script>