qc-luckyDraw/pages/checkInRecord/checkInRecord.vue

<template>
	<view class="checkInRecord">
		<view class="timeData">
			<picker mode="date" fields="month" @change="selectDataTime">
				<view class="time" v-if="isShowYeer" style="display: flex;align-items: center;">
					<text>{{queryForm.dayTime | getYMFilter}}</text>
					<image src="../../static/triangle.png" mode="widthFix" class="triangle"></image>
				</view>
				<view class="time" v-else>
					<text style="font-size: 48rpx;margin-right: 10rpx;">{{queryForm.dayTime | getDateFilter}}</text>
					<text>月</text>
					<image src="../../static/triangle.png" mode="widthFix" class="triangle"></image>
				</view>
			</picker>
		</view>
		
		<scroll-view scroll-y="true" class="checkInList" lower-threshold="80" @scrolltolower="scrolltolower" >
			
			<view style="margin: 0 20rpx 20rpx">
				<ad-view :unitId="adConfig.videoAd" adIntervals="200" adType="video"></ad-view>
			</view>
			
			<template v-if="signList.length > 0">
				<view v-for="item in signList" :key="item.id" class="item">
					<view class="left">
						<view class="title">{{item.describe}}</view>
						<view class="data">{{item.longCreateTime | getTimerFilter}}</view>
					</view>
					<view class="right">
						<text v-if="item.rechargeStatus === 1">已发放</text>
						<!-- @click="setAgainReceive(item)" -->
						<view class="error" v-else>
							发放中
							<view class="center">
								24小时内发放
							</view>
						</view>
					</view>
				</view>
			</template>
			
			<view class="baseline" v-if="this.total === this.signList.length">
				—— 我是有底线的 ——
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import { config ,getSignList, setReClaim } 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,
					dayTime: '',
					appId: config.appid
				},
				isShowYeer: false,   //是否展示年月
				signList: [],
				total: 0
			};
		},
		onLoad(options) {
			if (Object.keys(options).length > 0) {
				let { mpName , ...option } = options
				this.queryForm = {...this.queryForm, ...option}
				this.queryForm.dayTime = this.getDate()
				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: {
			// 重新领取
			setAgainReceive(item) {
				setReClaim({id: item.id, createTime: item.longCreateTime}).then(res => {
					if (res.data === 1) {
						uni.showToast({
							title: '重领成功',
							icon: 'success'
						})
						this.signList = this.signList.map(item => {
							if (item.id === id) {
								return {
									...item,
									rechargeStatus: res.data
								}
							} else {
								return item
							}
						})
					} else {
						uni.showToast({
							title: '重新领取失败，请稍后再来',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getList() {
				getSignList({...this.queryForm, dayTime: this.queryForm.dayTime + '-01'}).then(res => {
					this.signList = this.signList.concat(res.data.luckDrawLogEsDtoList)
					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 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		height: 100vh;
	}
	.timeData {
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #efefef;
	}
	.time {
		font-size: 24rpx;
		.triangle {
			margin-left: 5rpx;
			width: 15rpx;
			height: 10rpx;
		}
	}
	
	.checkInList{
		height: calc(100vh - 100rpx);
		padding-bottom: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		.item {
			padding: 10rpx 0;
			margin: 0 30rpx;
			border-bottom: 1rpx solid #e8e8e8;
			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;
				// background-color: #FC6E53;
				// width: 140rpx;
				// height: 55rpx;
				// box-sizing: border-box;
				// color: #FFFFFF;
				// text-align: center;
				// line-height: 55rpx;
				// border-radius: 30rpx;
			}
		}
	}
	
	.baseline {
		text-align: center;
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #999999;
	}
</style>