wangluohuoyun-app/pages/mine/fleet/fleetBill.vue

//车队账单
<template>
	<view class="center">
		<view class="list_css" v-for="(item,index) in dataList">
			<view class="list_css_item_top">
				<view class="list_css_left">{{index}}{{item.orderNo}}</view>
				<view class="list_css_right">{{item.payeeName}} 承运</view>
			</view>
			<view class="list_css_item_middle">
				<view class="list_css_left">{{item.paymentType}} {{item.amountMoney}}</view>
				<view class="list_css_right">账号尾号 {{item.bankNo}}</view>
			</view>
			<view class="list_css_item_lower">
				<view class="list_css_left">{{item.paymentDate}}</view>
			</view>
			<u-divider></u-divider>
		</view>
		<view>
			<u-loadmore :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				//分页
				currentPage: 1,
				pageSize: 10,
				dataList: [],
				loadStatus: "",
				isLoadMore: false
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {},
		//下拉刷新
		onPullDownRefresh() {
			this.currentPage = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.currentPage += 1
				this.getList()
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('get', '/hyFreightSettlementInfo/selectFleetCaptainBill', {
						carCaptainCommonId: this.userInfo.id,
						pageSize: this.pageSize,
						currentPage: this.currentPage
					}).then(res => {
						if (res.code == 200) {
							if (res.data.records.length > 0) {
								this.isLoadMore = false
								this.loadStatus = 'loadmore'
							} else {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							}
							if (this.currentPage == 1) {
								this.dataList = res.data.records
								if (res.data.records.length < 10) {
									this.loadStatus = 'nomore'
								}
							} else {
								this.dataList = this.dataList.concat(res.data.records)
							}
							if (this.dataList.length > 0) {
								for (let i = 0; i < this.dataList.length; i++) {
									if (this.dataList[i].bankCard) {
										this.dataList[i].bankNo = this.dataList[i].bankCard.substr(this.dataList[i]
											.bankCard.length - 4)
									}
								}
							}


							uni.hideLoading()
						} else {
							uni.hideLoading()
							uni.$u.toast(res.message);
						}
					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 20rpx 30rpx;

	}

	.list_css {
		margin-top: 20rpx;

		.list_css_item_middle,
		.list_css_item_top,
		.list_css_item_lower {
			display: flex;
			margin-bottom: 20rpx;
		}

		.list_css_right,
		.list_css_left {
			width: 50%;
		}

		.list_css_right {
			text-align: right;
		}
	}
</style>