qc-luckyDraw-yanguang/pages/extractRecord/extractRecord.vue

<template>
	<view class="checkInRecord">
		
		<scroll-view scroll-y="true" class="checkInList" lower-threshold="80" @scrolltolower="scrolltolower">
			
			<view style="margin: 0 20rpx 20rpx" v-if="adConfig.videoAd">
				<ad-view :unitId="adConfig.videoAd" adIntervals="200" adType="video"></ad-view>
			</view>
			
			<view v-for="item in signList" :key="item.id" class="item">
				<view class="left">
					<view class="title">提取{{item.value}}书币</view>
					<view class="data">{{item.createTime}}</view>
				</view>
			</view>
			<view style="margin: 80rpx 0;" v-if="signList.length === 0">
				<u-empty text="提取记录空" mode="list"></u-empty>
			</view>
			
			<view class="baseline" v-if="signList.length > 0 && this.total === this.signList.length">
				—— 我是有底线的 ——
			</view>
		</scroll-view>
		
	</view>
</template>

/**
 * 提现记录 
 *
 **/
<script>
	import { getCoinRemoveList, config } from '@/api/api.js'
	import { videoAd } from '@/utils/ad_config.js'
	import adView from '@/components/ad-view/ad-view.vue'
	export default {
		components: {
			adView
		},
		data() {
			return {
				adConfig: {
					videoAd
				},
				queryForm: {
					page: 1, 
					pageSize: 20,
					appId: config.appid
				},
				isShowYeer: false,   //是否展示年月
				signList: [],
				total: 0
			};
		},
		onLoad(options) {
			if (Object.keys(options).length > 0) {
				this.queryForm = {...this.queryForm, ...options}
				this.getList()
			}
		},
		methods: {
			getList() {
				getCoinRemoveList({ ...this.queryForm }).then(res => {
					this.signList = this.signList.concat(res.data.records)
					this.total = res.data.total
				})
			},
			// 滚动到底部去获取数据
			scrolltolower() {
				if ( this.signList.length !== this.total ) {
					this.$set(this.queryForm, 'page', this.queryForm.page + 1)
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}
	.checkInRecord {
		width: 100%;
		height: 100vh;
	}
	
	.checkInList{
		height: 100vh;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		.item {
			padding: 10rpx 0;
			margin: 0 30rpx;
			border-bottom: 1rpx solid #efefef;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
		}
		.data {
			font-size: 24rpx;
			margin-top: 8rpx;
			color: #808080;
		}
		.center {
			font-size: 24rpx;
			color: #808080;
		}
		.right {
			text-align: center;
			&>text {
				font-size: 28rpx;
			}
			.error {
				font-size: 24rpx;
				color: #FC6E53;
			}
		}
	}
	
	.baseline {
		text-align: center;
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #999999;
	}
</style>