vue实现订单页面
Vue 实现订单页面的步骤
页面结构设计
使用 Vue 的单文件组件（SFC）结构，通常包含以下部分：
OrderList.vue：订单列表页OrderDetail.vue：订单详情页- 可复用组件如
OrderCard.vue（订单卡片）
订单列表页实现
在 OrderList.vue 中通过 v-for 渲染订单卡片，示例代码：
<template>
<div class="order-list">
<OrderCard
v-for="order in orders"
:key="order.id"
:order="order"
@click="viewDetail(order.id)"
/>
</div>
</template>
<script>
import OrderCard from './OrderCard.vue'
export default {
components: { OrderCard },
data() {
return {
orders: [
{ id: 1, title: '商品A', status: '待付款' },
{ id: 2, title: '商品B', status: '已完成' }
]
}
},
methods: {
viewDetail(id) {
this.$router.push(`/order/${id}`)
}
}
}
</script>订单卡片组件
OrderCard.vue 实现标准化订单展示：
<template>
<div class="order-card" @click="$emit('click')">
<h3>{{ order.title }}</h3>
<p>订单状态：{{ order.status }}</p>
</div>
</template>
<script>
export default {
props: {
order: { type: Object, required: true }
}
}
</script>订单详情页实现
通过路由参数获取订单ID，动态加载数据：
<template>
<div v-if="order">
<h2>订单详情：{{ order.title }}</h2>
<p>订单号：{{ order.id }}</p>
<button @click="goBack">返回列表</button>
</div>
</template>
<script>
export default {
data() {
return {
order: null
}
},
created() {
this.fetchOrder(this.$route.params.id)
},
methods: {
fetchOrder(id) {
// 实际项目调用API接口
this.order = { id, title: '商品详情', status: '已发货' }
},
goBack() {
this.$router.go(-1)
}
}
}
</script>路由配置
在 router/index.js 中配置订单相关路由：
const routes = [
{
path: '/orders',
component: OrderList
},
{
path: '/order/:id',
component: OrderDetail,
props: true
}
]状态管理（可选）
对于复杂场景可使用 Vuex：
// store/modules/orders.js
export default {
state: {
orders: []
},
mutations: {
SET_ORDERS(state, payload) {
state.orders = payload
}
},
actions: {
async fetchOrders({ commit }) {
const res = await api.getOrders()
commit('SET_ORDERS', res.data)
}
}
}样式优化
建议使用 CSS Modules 或 Scoped CSS：
<style scoped>
.order-card {
border: 1px solid #eee;
margin-bottom: 10px;
}
</style>
