yicangzongtai_app_240321/pages/applyPoints/history.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="list">
			<view class="item" v-for="(item,index) in listData" :key="index">
				<view class="left">
					<view class="price">￥{{item.donation_amount}}</view>
					<view class="time">{{item.create_time}}</view>
				</view>
				<view class="right">
					<view class="status" :class="statusList[item.audit_status].class">{{statusList[item.audit_status].text}}</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '申领记录',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				pageParams:{
					page: 1,
					limit: 10
				},
				listData: [],
				loadStatus: 'loadmore',//loading / nomore
				statusList:[{
					class: '',
					text: '待审核'
				},{
					class: 'success',
					text: '已发放'
				},{
					class: 'error',
					text: '审核不通过，请重新提交'
				}]
			}
		},
		onLoad() {
			this.getList(true);
		},
		methods: {
			getList(isRefresh,needLoading = false) {
				let that = this;
				if (!isRefresh && this.loadStatus == 'nomore') {
					return false;
				}
				this.pageParams.page = isRefresh ? 1 : this.pageParams.page + 1;
				this.listData = isRefresh ? [] : this.listData;
				if(needLoading){
					uni.showLoading({
						title: '努力加载中...',
						mask: true
					});
				}
				this.loadStatus = 'loading';
				this.$http.get('/official/donation/page',this.pageParams)
				.then(res=>{
					if (res.code == 200) {
						let listData = that.listData;
						listData.push(...res.page.list);
						that.listData = listData;
						that.loadStatus = that.listData.length >= res.page.totalCount?'nomore':'loadmore';
					}
				})
				.finally(()=>{
					if(needLoading){
						uni.hideLoading();
					}
				})
			}
		},
		onReachBottom(){
			this.getList();
		}
	};
</script>

<style lang="scss" scoped>
	.main{
		padding: 30rpx 0;
		.list{
			.item{
				width: 100%;
				padding: 30rpx 60rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #e6e6e6;
				.left{
					.price{
						font-size: 28rpx;
						font-family: MicrosoftYaHei;
						text-align: left;
						color: #1a1a1a;
						margin-bottom: 17rpx;
					}
					.time{
						font-size: 24rpx;
						font-family: MicrosoftYaHei;
						text-align: left;
						color: #999999;
					}
				}
				.right{
					.status{
						font-size: 28rpx;
						font-family: Microsoft YaHei, Microsoft YaHei-Regular;
						font-weight: 400;
						text-align: right;
						color: #1A1A1A;
						line-height: 30rpx;
						margin-top: 20rpx;
						&.success{
							color: #118D44;
						}
						&.error{
							color: #F31919;
						}
					}
				}
			}
		}
	}
</style>