根据订单号进行查询我的订单

本节课我们将介绍如何根据订单号进行查询我的订单。查询的方法是通过拼接订单号来进行查询。

首先，我们需要准备一个接口来实现订单查询功能。前面小结中我们在OrderViewSet中设置OrderFilter，代码如下：

dx_movie/utils/filters.py

class OrderFilter(filters.FilterSet):
    pay_status = filters.CharFilter(field_name='pay_status')
    order_sn = filters.CharFilter(field_name='order_sn')

    class Meta:
        model = Order
        fields = ['order_sn', 'pay_status']

那么，我们就直接可以通过api/order/?order_sn=***接口来实现根据order_sn查询的功能。示例如下：

页面实现

在订单里列表页，设置一个搜索框，当用户输入订单号，点击搜索图标，如下图所示。

我们可以定义一个名为 searchOrder 的函数来处理查询操作。这个函数需要获取用户输入的订单号作为参数。

frontend/src/views/Orders.vue

methods: {
        searchOrder() {
            const order_sn = this.order_sn.trim()
            this.$router.push({
                name: 'Orders',
                query: { order_sn: order_sn}
            })
        },
}

点击按钮时调用 searchOrder 函数，并把用户输入的订单号赋值给 order_sn 变量。然后，我们可以通过跳转到一个新的页面，传递参数 order_sn: order_sn 来实现向接口发送查询请求。

通过这个功能，用户可以根据订单号快速查询到自己的订单信息。

如果输入框不填写订单号点击查询按钮，则会显示所有订单，如下图所示。

下一节课我们将进一步讲解其他相关的功能。敬请期待！