PunchSettle-MiniProgram/pages/settle-list/settle-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="settle in settleData" :key="settle.id">
				<template v-slot:body>
					结算时间：{{settle.settlementTime}} 结算前奖励：{{settle.beforeSettleRewardNum}}，结算奖励：{{settle.settleRewardNum}}，结算后奖励：{{settle.afterSettleRewardNum}}
				</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 { settleApi } from '@/service/apis';
	
	//属性
	/**
	 * 日期选择器值/
	 */
	const datePickerValue = ref([]);
	
	/**
	 * 查询条件
	 */
	const queryData = ref(null);
	
	/**
	 * 结算数据
	 */
	const settleData = ref(null);
	
	// 方法
	/**
	 * 日期选择监听
	 */
	const dateChange = (e) => {
		if (e.length == 0) {
			queryData.value = {};
			return;
		}
		
		queryData.value = {
			startDate: e[0],
			endDate: e[1]
		};
		loadData();
	}
	
	/**
	 * 加载数据
	 */
	const loadData = () => {
		settleApi.querySettle(queryData.value).then(res => {
			settleData.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>