Vue项目实战：订单列表页面实现
目录
- 调整Order父组件结构（解决Bug）
- 订单列表数据渲染
- Loading 和 NoData优化
- 订单列表分页 - 分页器
- 订单列表分页 - 加载更多
- 订单列表分页 - 滚动加载
（1）调整Order父组件结构（解决Bug）
之前在Vue项目实战：订单确认页面实现中关于订单父组件结构封装里写到：在order.vue中引入
问题：
在使用微信支付完后跳转到订单列表页面，但是订单列表页面中的
原因：
订单列表的路由是order的子路由，当我们从order路由跳转到它的子路由时，并不会再次执行order.vue中的mounted()函数。此函数只有在页面渲染时才会执行。也就是说，如果想用之前的方法，那只有在第一次从别的路由（比如购物车路由）跳转到订单列表路由时，此前order页面并没有被渲染过，则可以出现相应的
解决方法：
不用之前的第二种方法，删去之前路由判断的代码，而用第一次，在每个页面中引入
如，在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 = res.list;
})
},
goPay(orderNo) {
//三种路由跳转方式
this.$router.push({
path: '/order/pay',
query: {
orderNo
}
})
/* this.$router.push({
name: 'order-pay',
query: {
orderNo
}
})
*/
//this.$router.push('/order/pay')
}
}
}
script>
（3）Loading 和 NoData优化
-
在orderList.vue中引入并使用之前定义的Loading组件：
这个优化是针对请求发出来，响应还没回来前做个loading处理。在请求时显示，请求回来后不显示。
<loading v-if="loading">loading> //3.使用组件
<script>
import Loading from './../components/Loading'; //1.导入组件
export default{
components:{
Loading //2.注册组件
},
data() {
return {
loading: true
}
},
methods: {
getOrderList() {
this.axios.get('/orders').then((res) => {
this.loading = false;
this.list = res.list;
}).catch(() => {
this.loading = false;
})
}
}
-
NoData优化：
在订单列表无数据时，显示NoData组件，给用户订单列表为空提示。
在components文件夹中新建NoData.vue：
<template>
<div class="no-data">
<img src="/imgs/icon-no-data.png" alt="">
<p>当前暂无提交的订单记录.p>
div>
template>
在orderList.vue中引入并使用NoData组件：
<no-data v-if="!loading && list.length == 0">no-data>
<script>
import NoData from './../components/NoData';
export default{
components:{
NoData
},
data() {
return {
list: [],
loading: true
}
},
methods: {
getOrderList() {
this.axios.get('/orders').then((res) => {
this.loading = false;
this.list = [] || res.list;
}).catch(() => {
this.loading = false;
})
},
}
}
（4）订单列表分页 - 分页器
在orderList.vue中使用ElementUI中的Pagination组件：
<el-pagination
class="pagination"
background
layout="pre, pager, next"
:pageSize="pageSize"
:total="total"
@current-change="handleChange"
>el-pagination>
<script>
import {Pagination} from 'element-ui';
export default{
components:{
[Pagination.name]: Pagination
},
data() {
return {
list: [],
loading: false,
pageSize: 10, //每页几条数据
pageNum: 1, //当前是第几页
total: 0 //总条数
};
},
mounted() {
this.getOrderList();
},
methods: {
getOrderList() {
this.axios
.get("/orders", {
params: {
pageNum: this.pageNum
}
})
.then(res => {
this.loading = false;
this.list = [] || res.list;
this.total = res.total;
})
.catch(() => {
this.loading = false;
});
},
handleChange(pageNum) {
this.pageNum = pageNum;
this.getOrderList();
}
}
};
script>
（5）订单列表分页 - 加载更多
在orderList.vue中使用ElementUI中的Button组件：
<div class="load-more" v-if="showNextPage">
<el-button type="primary" :loading="loading" @click="loadMore">加载更多el-button>
div>
<script>
import {Button} from 'element-ui';
export default{
components:{
[Button.name]: Button
},
data() {
return {
list: [],
loading: false,
pageSize: 10,
pageNum: 1,
showNextPage: true, //是否显示按钮，但数据都加载完了，就不需要显示“加载更多”按钮。
};
},
methods: {
getOrderList() {
this.axios
.get("/orders", {
params: {
pageNum: 10,
pageNum: this.pageNum
}
})
.then(res => {
this.loading = false;
this.list = res.list.concat(res.list); //数据累加
this.showNextPage = res.hasNext
})
.catch(() => {
this.loading = false;
});
},
loadMore() {
this.pageNum++;
this.getOrderList();
}
}
};
script>
（6）订单列表分页 - 滚动加载
-
安装该插件：
npm install vue-infinite-scroll --save -
在orderList.vue中使用Vue中的vue-infinite-scroll插件：
<img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
div>
<script>
// v-infinite-scroll="scrollMore" :滚动的时候会调用的方法
//infinite-scroll-disabled = "busy" : 控制滚动加载是否有效，在busy为false：滚动才有效，才能触发loadMore函数，为true时，滚动不会触发函数。
//infinite-scroll-distance="410" : 不是距离底部410px时才触发loadMore函数
import {Button} from 'element-ui';
export default{
directives: {infiniteScroll},
components:{
[Button.name]: Button
},
data() {
return {
list: [],
loading: false,
pageSize: 10,
pageNum: 1,
busy: false, //滚动加载，是否触发
};
},
methods: {
getOrderList() {
this.loading = true;
this.busy = true;
this.axios
.get("/orders", {
params: {
pageNum: 10,
pageNum: this.pageNum
}
})
.then(res => {
this.loading = false;
this.list = res.list.concat(res.list); //数据累加
this.busy = false;
})
.catch(() => {
this.loading = false;
});
},
getList() {
this.loading = true;
this.busy = true;
this.axios
.get("/orders", {
params: {
pageNum: 10,
pageNum: this.pageNum
}
})
.then(res => {
this.list = res.list.concat(res.list); //数据累加
this.loading = false;
if(res.hasNextPage) {
this.busy = false;
} else {
this.busy = true;
}
})
},
scrollMore() {
this.busy= true;
setTimeout(() => {
this.pageNum++;
this.getList();
}, 500)
}
}
};
script>