uniProject/components/custom-scroll-list/custom-scroll-list-date.vue

<template>
	<view>
		<!-- 查询区域 -->
		<view>
			<uni-search-bar class="uni-mt-10" v-model="name" radius="100" v-if="hasSearcBar" :placeholder="placeholder"
				:bgColor="searchBarColor" clearButton="auto" cancelButton="none" @confirm="onSearch" @blur="onSearch" />
			<view @click="selectDate">日历</view>
		</view>

		<!-- tab选择区域 -->
		<view class="lli-status-box" v-if="hasTab">
			<text :class="['status-item', activeTab === item.value? 'click':'' ]" v-for="item in tabList"
				:key="item.value" @click="onTavChange(item)">{{item.label}}</text>
		</view>
		<!-- 无限滚动区域 -->
		<scroll-view class="scroll-container" :scroll-y="true" :refresher-enabled="true"
			:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="#F3F3F4"
			@refresherrefresh="onRefresh" @scrolltolower="onReachBottom" @refresherrestore="onRestore">
			<slot :list="list"></slot>
			<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
		</scroll-view>
		<dateSelectDlVue ref="dateSelectRef" @confirm-btn="onDateSelect" @date-reset="onDateReset"></dateSelectDlVue>
	</view>

</template>

<script setup>
	import dateSelectDlVue from "@/components/dialog/dateSelectDl.vue";
	import {
		ref,
		onMounted,
		computed,
		reactive,
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"


	const props = defineProps({
		refreshFn: {
			type: Function,
			required: true
		},
		tabData: {
			type: Object
		},
		size: {
			type: Number,
			default: 5
		},
		hasSearcBar: {
			type: Boolean,
			default: true,
		},
		searchBarKey: {
			type: String,
			default: 'name'
		},
		hasTab: {
			type: Boolean,
			default: true,
		},
		defaultTab: {
			type: [String, Number]
		},
		tabList: {
			type: Array,
			default: () => [],
		},
		tabKey: {
			type: String,
			default: 'status'
		},
		placeholder: {
			type: String,
			default: '请输入考试名称'
		},
		searchBarColor: {
			type: String,
			default: "#F3F3F4"
		},
		tabData: {
			type: Object,
		}

	})

	const page = ref(1);
	const list = ref([]); // 项目列表
	const triggered = ref(false); // 是否触发下拉刷新
	const freshing = ref(false); // 是否加载中
	const total = ref(0); // 项目总数
	const name = ref(''); // 查询名
	const activeTab = ref(props.defaultTab);
	const status = ref('more');
	const contentText = {
		contentdown: '查看更多',
		contentrefresh: '加载中',
		contentnomore: '没有更多'
	}
	const dateSelectRef = ref(null);
	const selectDateData = ref([]);

	/**
	 * 是否已完全加载
	 */
	const isComplete = computed(() => {
		if (total.value === 0) {
			return false;
		}

		return total.value === list.value.length
	})

	function onDateReset() {
		selectDateData.value = [];
		reset();
		getData("do-search");
	}

	function onDateSelect(data) {
		selectDateData.value = data;
		reset();
		getData("do-search");
	}

	function selectDate() {
		console.log('open')
		dateSelectRef.value.handleShow(selectDateData.value)
	}

	// 重置
	function reset() {
		list.value = [];
		page.value = 1;
		triggered.value = false;
		freshing.value = false;
		total.value = 0;
		status.value = 'more';
	}

	// 切换tab
	function onTavChange(item) {
		activeTab.value = item.value;
		name.value = "";
		reset();
		getData("do-search");
	}

	// 查询
	function onSearch({
		value
	}) {
		name.value = value;
		reset();
		getData("do-search");
	}

	// 获取数据
	function getData(action) {
		const options = Object.assign({}, {
			page: page.value,
			size: props.size,
			answerStartTime: selectDateData.value.length ? selectDateData.value[0] : null,
			answerEndTime: selectDateData.value.length ? selectDateData.value[1] : null,
			passFlag: -1
		});

		if (props.hasTab) {
			options[props.tabKey] = activeTab.value;
		}

		if (props.hasSearcBar) {
			options[props.searchBarKey] = name.value;
		}
		props.refreshFn(options).then(res => {
			total.value = res.data.total;
			action === "do-search" && (list.value = res.data.data); // 查询更新
			action === "pull-down-refresh" && (list.value = res.data.data); // 下拉更新数据
			action === "reach-buttom" && (list.value = [...list.value, ...res.data.data]); // 无限滚动更新数据



		}).finally(() => {
			triggered.value = false;
			freshing.value = false;
			if (total.value !== list.value.length) {
				status.value = 'more';
			} else {
				status.value = 'noMore';
			}
		})
	}

	onLoad(() => {
		freshing.value = false;
		setTimeout(() => {
			triggered.value = true
		}, 50)
	})

	// 下拉刷新触发
	function onRefresh() {
		if (freshing.value) return;
		status.value = 'loading';
		freshing.value = true;
		triggered.value = true;
		page.value = 1;
		getData('pull-down-refresh');
	}

	// 下拉刷新复位
	function onRestore() {
		triggered.value = 'restore'; // 需要重置
	}

	// 无限滚动
	function onReachBottom() {
		if (freshing.value) return;
		if (isComplete.value) return;
		freshing.value = true;
		page.value++;
		getData('reach-buttom')
	}


	defineExpose({
		onRefresh
	})
</script>

<style lang="scss">
	.scroll-container {
		height: calc(100vh - 220rpx)
	}
</style>