Vue项目实战：订单列表页面实现

目录

• 调整Order父组件结构（解决Bug）
• 订单列表数据渲染
• Loading 和 NoData优化
• 订单列表分页 - 分页器
• 订单列表分页 - 加载更多
• 订单列表分页 - 滚动加载

（1）调整Order父组件结构（解决Bug）

之前在Vue项目实战：订单确认页面实现中关于订单父组件结构封装里写到：在order.vue中引入<order-header></order-header>，然后通过路由判断当前页面属于哪个，并展示不同内容。但现在发现那样子做存在一个问题：

问题：

在使用微信支付完后跳转到订单列表页面，但是订单列表页面中的<order-header></order-header>的内容仍是订单支付页面中<order-header></order-header>的内容，没有变成<order-header></order-header>对应的内容。但是如果跳转完订单列表页面，在重新刷新一下页面，那<order-header></order-header>的内容就会改变。

原因：

订单列表的路由是order的子路由，当我们从order路由跳转到它的子路由时，并不会再次执行order.vue中的mounted()函数。此函数只有在页面渲染时才会执行。也就是说，如果想用之前的方法，那只有在第一次从别的路由（比如购物车路由）跳转到订单列表路由时，此前order页面并没有被渲染过，则可以出现相应的<order-header></order-header>组件内容。如果是从订单订单确认跳转到订单列表的话，此时没有重新渲染order页面，那<order-header></order-header>内容不会改变。

解决方法：

不用之前的第二种方法，删去之前路由判断的代码，而用第一次，在每个页面中引入<order-header></order-header>。

如，在orderConfirm.vue:

    <order-header title="订单确认">
      <template v-slot:tip>
        <span>请认真填写收货地址</span>
      </template>
    </order-header>
<script>
import OrderHeader from "./../components/OrderHeader";
export default {
  components: {
    OrderHeader,
  }
}

（2）订单列表数据渲染

在orderList.vue中：

<!-- 省略不重要代码，下面是如何判断并展示订单状态 -->
			<div class="good-state fr" v-if="order.status == 20">
                <a href="javascript:;">{
  {order.statusDesc}}</a>
              </div>
              <div class="good-state fr" v-else>
                  <a href="javascript:;" @click="goPay(order.orderNo)">{
  {order.statusDesc}}</a>
              </div>
<script>
  export default{
    
    data() {
    
        return {
    
            list: []
        }
    },
    mounted() {
    
        this.getOrderList();
    },
    methods: {
    
        getOrderList() {
    
            this.axios.get('/orders').then((res) => {
    
                this.list