qc-signIn-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()
			}
		},
		filters: {
			getYMFilter(value) {
				if(!value) return ''
				let data = value.split('-')
				if (data.length > 1) {
					return data[0] + '-' + data[1]
				}else {
					return value
				}
			},
			getDateFilter(value) { // 获取月
				if(!value) return ''
				let data = value.split('-')
				if (data.length > 1) {
					return Number(data[1])
				}else {
					return value
				}
			},
			getTimerFilter(value) { // 获取年月日时分秒
				if(!value) return ''
				let timestamp = Date.parse(new Date(value))
				let date = new Date(timestamp)
				let Y = date.getFullYear()
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				
				let H = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				let S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				
				return `${Y}-${M}-${D} ${H}:${minute}:${S}`
			}
		},
		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()
				}
			},
			// 选择时间
			selectDataTime(e) {
				this.isShowYeer = true
				this.signList = []
				this.$set(this.queryForm, 'page', 1)
				this.$set(this.queryForm, 'dayTime', e.target.value)
				this.getList()
			},
			// 获取年月
			getDate() {
				let timestamp = Date.parse(new Date())
				let date = new Date(timestamp)
				let Y = date.getFullYear()
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				return Y + '-' + M
			}
		}
	}
</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>