medicine-xcx/pagesB/homeGridList/topUp/detale/detale.vue

<template>
	<view>
		<u-picker mode="time" v-model="show_time" :params="params" @confirm="getTime"></u-picker>
		<!-- 数据展示 -->
		<view class="item_box">
			<view class="item_title" @click="toChangeTime">
				<text class="time">{{data_time}}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="left_box">
					<view class="text_box">
						<text class="title">{{item.name}}</text>
						<text class="time">{{item.createTime}}</text>
					</view>
				</view>
				<text class="get_num">{{item.payType==0?'+'+(item.getInteger+item.getMoney):'-￥'+item.wallet}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data_time: "2021年7月",
				show_time: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				list: [],
				pageNo:1,
				pageSize: 20,
				total: null,
				default_time: '',
				isLock: false,  //上拉加载锁

			}
		},
		onLoad() {
			this.default_time = new Date().getFullYear()+'-'+ (new Date().getMonth()+1>10? new Date().getMonth()+1: '0'+(new Date().getMonth()+1))
			this.data_time = new Date().getFullYear()+'年' +(new Date().getMonth()+1)+'月';
			this.getTopUpDetaleList({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				stringDate: this.default_time.replace(/-/,'/')
			});
		},
		onReachBottom() {
			// 上拉加载
			if(!this.isLock){
				console.log(this.pageNo * this.pageSize , this.total)
				if(this.pageNo * this.pageSize > this.total && this.total!== null) {
					// 没有更多加载了
					console.log(123)
					this.isLock = true;
					this.$Toast('没有更多数据了呢！');
					setTimeout(()=> {
						// 3秒后解锁
						this.isLock = false;
					},3000)
					return
				}
				this.isLock = true; 
				this.pageNo+=1;
				console.log(this.default_time)
				this.getTopUpDetaleList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					stringDate: this.default_time.replace(/-/,'/')
				})
			}
		},
		methods: {
			getTopUpDetaleList(params){
				uni.showLoading();
				this.$api('topUpDetail',params).then(res => {
					let { code, result, message } = res;
					this.isLock = false;
					uni.hideLoading();
					if (code === 200) {
						if(this.total == null) {
							this.total = result.total
						}
						this.list = this.list.concat(result.records);
					} else {
						this.$Toast(message)
					}
				}).catch(err => {
					this.isLock = false;
					uni.hideLoading();
					this.$Toast(err.message)
				})
			},
			toChangeTime() {
				this.show_time = true;
				console.log(123)
			},
			getTime(e) {
				this.data_time = e.year+"年"+ (e.month>10?e.month:e.month.replace(/0/,'')) +"月";
				this.default_time= `${e.year}-${e.month}`;
				// 初始化数据
				this.list = [];
				this.pageNo = 1;
				this.total = null;
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					stringDate: `${e.year}/${e.month}`
				}
				console.log(params)
				this.getTopUpDetaleList(params)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item_box {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.item_title {
			padding-top: 33rpx;
			margin-left: 60rpx;

			.time {
				margin-right: 22rpx;
			}
		}

		.item {
			width: 670rpx;
			margin: 0 auto;
			border-bottom: 1rpx solid #E0E0E0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.get_num {
				font-size: 24rpx;
				color: #DD0F00;
			}

			.left_box {
				display: flex;
				align-items: center;
				margin-top: 21rpx;
				padding-bottom: 20rpx;
				
				.text_box {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 24rpx;
						font-weight: bold;
						color: #333333;
					}

					.time {
						font-size: 20rpx;
						color: #9A9A9A;
					}
				}
			}
		}
	}
</style>