用vue帮我写一个根据订单号查询订单详情的代码
时间: 2023-08-28 13:14:15 浏览: 73
好的,这里提供一个基于 Vue 的根据订单号查询订单详情的代码实现。假设你已经有了一个名为 `OrderDetail.vue` 的组件,结构如下:
```
<template>
<div>
<h1>订单详情</h1>
<p v-if="!order">订单不存在!</p>
<div v-else>
<p>订单编号:{{ order.order_id }}</p>
<p>下单时间:{{ order.order_time }}</p>
<p>订单总价:{{ order.order_total }}</p>
<p>订单状态:{{ order.order_status }}</p>
<h2>订单商品列表</h2>
<table>
<tr><th>商品编号</th><th>商品名称</th><th>商品单价</th><th>商品数量</th></tr>
<tr v-for="item in order.order_items" :key="item.item_id">
<td>{{ item.item_id }}</td>
<td>{{ item.item_name }}</td>
<td>{{ item.item_price }}</td>
<td>{{ item.item_quantity }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
order: null, // 订单详情
orderId: '', // 订单编号
}
},
methods: {
// 查询订单详情
getOrderDetail() {
// 发送 GET 请求
this.$http.get('/api/order/detail', { params: { order_id: this.orderId } })
.then(response => {
this.order = response.data;
})
.catch(error => {
console.log(error);
});
},
},
created() {
// 获取路由参数中的订单编号
this.orderId = this.$route.params.orderId;
// 查询订单详情
this.getOrderDetail();
},
}
</script>
```
以上代码使用了 Vue 的单文件组件形式,并且使用了 Vue Resource 来发送 HTTP 请求。在 `data` 中定义了 `order` 和 `orderId` 两个变量,`order` 用来存放订单详情,`orderId` 用来存放当前查询的订单编号。在 `created` 钩子函数中获取路由参数中的订单编号,并在 `getOrderDetail` 方法中发送 GET 请求获取订单详情。在模板中使用 `v-if` 和 `v-else` 来判断订单是否存在,如果存在则使用 `v-for` 来循环遍历订单商品列表并显示出来。
你需要根据自己的项目需求,将以上代码中的 URL `/api/order/detail` 改为你的后端 API 接口地址,并根据接口返回的数据格式来调整模板中的渲染逻辑。