PunchSettle-MiniProgram/pages/reward-record-list/reward-record-list.vue

<template>
	<main-layout :showHome="true" :showBack="true">
		<view class="selector">
			<uni-datetime-picker type="daterange" v-model="datePickerValue" @change="dateChange"/>
		</view>
		<uni-list :border="true">
			<uni-list-item v-for="item in listData" :key="item.id">
				<template v-slot:body>
					<p>{{item.claimRewardTime}}</p>
					<p>
						领取奖励：{{item.claimRewardNum}}，领取前奖励：{{item.beforeClaimRewardNum}}，领取后奖励：{{item.afterClaimRewardNum}}
					</p>
				</template>
			</uni-list-item>
		</uni-list>
	</main-layout>
</template>

<script setup>
	import {ref} from 'vue';
	import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
	import dateUtils from '@/utils/date';
	import { rewardApi } from '@/service/apis';
	
	//属性
	/**
	 * 日期选择器值/
	 */
	const datePickerValue = ref([]);
	
	/**
	 * 查询条件
	 */
	const queryData = ref(null);
	
	/**
	 * 列表数据
	 */
	const listData = ref(null);
	
	// 方法
	/**
	 * 日期选择监听
	 */
	const dateChange = (e) => {
		if (e.length == 0) {
			queryData.value = {};
			return;
		}
		
		queryData.value = {
			startDate: e[0],
			endDate: e[1]
		};
		loadData();
	}
	
	/**
	 * 加载数据
	 */
	const loadData = () => {
		rewardApi.queryClaimRewardRecords(queryData.value).then(res => {
			listData.value = res;
		});
	}
	
	// 生命周期
	onLoad(() => {
		const startDate = dateUtils.getFirstDayOfMonth();
		const endDate = dateUtils.getLastDayOfMonth();
		datePickerValue.value = [startDate, endDate];
		queryData.value = {
			startDate,
			endDate
		}
		loadData();
	});
	
	onPullDownRefresh(() => {
		loadData();
		uni.stopPullDownRefresh();
	});
</script>

<style lang="scss" scoped>
	.selector {
		background-color: #FFFFFF;
	}
</style>