book-shop/pages-mall/pages/order/list.vue

<template>
	<view class="page">
		<view class="tabbox">
			<u-tabs :is-scroll="false" :list="tabOps" :current="tabIndex" @change="changeTab"></u-tabs>
		</view>
		<view class="content">
			<!-- 列表 
			:style="{height:'calc(100vh - '+topHeight+'px)'}"-->
			<view class="list" v-if="orderList[tabIndex]&&orderList[tabIndex].length>0">
				<OrderCard v-for="(item, index) in orderList[tabIndex]" :key="index" :data="item" @refresh="refreshData"></OrderCard>
			</view>
			<NoData height="60vh" type="order" v-if="orderLoad[tabIndex].finish&&orderList[tabIndex].length==0"></NoData>		
			<!-- <u-loadmore v-else :status="orderLoad[tabIndex].finish?'nomore':orderLoad[tabIndex].loading?'loading':'loadmore'" :load-text="loadText" margin-top="60" /> -->
			
			<LoadMore v-else :loadtype="orderLoad[tabIndex]"></LoadMore>
		</view>
	</view>
</template>

<script>
// 组件
import NavbarTabSearch from '@/pages-mall/components/navbar-tab-search.vue';
import OrderCard from '@/pages-mall/components/order/order-card.vue';

const app = getApp();
var _self;
export default {
	components: { NavbarTabSearch, OrderCard },
	data() {
		return {
			topHeight:app.globalData.statusBarHeight + app.globalData.navBarHeight*2 - app.globalData.menuHeight,
			// 当前tab
			tabIndex: 0,			
			loadText: {
				loadmore: '轻轻上拉',
				loading: ' ',
				nomore: '没有更多了'
			},
			tabOps:[
				{ name: '全部', value: '' ,type:'all'},
				{ name: '待付款', value: '10', type:'type10' },
				{ name: '待发货', value: '11', type:'type11' },
				{ name: '待收货', value: '12', type:'type12' },
				{ name: '已完成', value: '13', type:'type13' },
			],
			orders:[],
			orderList: [],//常规订单
			refundOrder:[],//售后订单
			orderLoad:[{
				page:1,
				loading:true,
				finish:false,
			},{
				page:1,
				loading:true,
				finish:false,
			},{
				page:1,
				loading:true,
				finish:false,
			},{
				page:1,
				loading:true,
				finish:false,
			},{
				page:1,
				loading:true,
				finish:false,
			},{
				page:1,
				loading:true,
				finish:false,
			},]
		};
	},
	onLoad(ops) {
		_self = this;
		let selIndex=0;
		if (ops.tabIndex) {
			selIndex = Number(ops.tabIndex);
		}
		this.tabIndex = selIndex;
		this.$nextTick(() => {
			_self.changeTab(selIndex);
		});
	
	},
	onPullDownRefresh(){
		// uni.stopPullDownRefresh();
		this.orderLoad[this.tabIndex].page=1;
		this.orderLoad[this.tabIndex].finish=false;
		this.orderList[this.tabIndex]=[];
		this.getData();
	},
	onShow() {
		console.log('onShow.......')
		this.refreshData();
	},
	onReachBottom(){
		console.log('滚动到底部')
		this.getData();
	},
	methods: {
		// 刷新页面
		refreshData(){
			uni.startPullDownRefresh();
		},
		// 更新数据
		getData(){
			this.getOrderList();
		},
		// 切换tab的回调
		changeTab(index) {
			this.tabIndex = index;
			if(this.orderLoad[index].finish){
				// 该状态下已加载全部
				return false;
			}
			if(!this.orderList[index]||this.orderList[index].length==0){
				// 无数据说明没加载过，第一次加载
				// this.orderList[index]=[];
				this.orderLoad[index]={
					page:1,
					loading:false,
					finish:false,
				}
			}
			this.getData();
		},
		// 正常订单
		getOrderList(){
			// let thisTab = this.orderList[this.tabIndex];
			if(this.orderLoad[this.tabIndex].finish){
				return false;
			}
			this.orderLoad[this.tabIndex].loading = true;
			this.$u.api.getOrderListAjax({
				status:this.tabOps[this.tabIndex].value,
				page:this.orderLoad[this.tabIndex].page,
			}).then(({code,data})=>{
				console.log(code,data);
				console.log(this.tabIndex);
				this.orderLoad[this.tabIndex].loading = false;
				uni.stopPullDownRefresh();
				if(code==1){
					if(data.last_page<=data.current_page){
						this.orderLoad[this.tabIndex].finish = true;
					}
					if(data.current_page==1){
						this.orderList[this.tabIndex] = data.data;
					}else{
						this.orderList[this.tabIndex]=this.orderList[this.tabIndex].concat(data.data);
					}
				}else{
					this.orderLoad[this.tabIndex].finish = true;
				}				
				this.orderLoad[this.tabIndex].page = data.current_page+1;	
				this.$forceUpdate();
			}).catch(()=>{
				uni.stopPullDownRefresh();
				this.orderLoad[this.tabIndex].loading = false;
				this.orderLoad[this.tabIndex].finish = true;
			})
		},
	
	
	}
};
</script>

<style lang="scss" scoped>
.page{
	min-height: 100vh;
}
.list {
	padding: 0 30rpx 30rpx;
	box-sizing: border-box;
	width: 100%;
}
.tabbox{
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	z-index: $app-zIndex-fixed;
}
.content{
	padding-top: 80rpx;
}
</style>