tcm-cloud-uin-app/pages/ypczk/zkTask/zkTaskList.vue

<template>
	<view class="zkTaskList" ref="zktaskList">
		<custom-tabs type="zkTaskListViewRef" :value="pageInfo.current" fixed="true" :activeTextStyle="{color:'rgba(190, 163, 117, 1)'}" :activeLineStyle="{'background-color':'rgba(190, 163, 117, 1)',height:'6rpx'}" @change="changeIndex">
			<!-- 所有 -->
			<custom-tab-pane label="所有" name="zkTaskListViewRef_1">
				<ZkTaskListView ref="zkTaskListViewRef_1" state=""></ZkTaskListView>
			</custom-tab-pane>
			<!-- 待质控 -->
			<custom-tab-pane label="待质控" name="zkTaskListViewRef_2">	
				<ZkTaskListView ref="zkTaskListViewRef_2" state="7003"></ZkTaskListView>
			</custom-tab-pane>
			<!-- 质控中 -->
			<custom-tab-pane label="质控中" name="zkTaskListViewRef_3">
				<ZkTaskListView ref="zkTaskListViewRef_3" state="7007"></ZkTaskListView>
			</custom-tab-pane>
			<!-- 完成 -->
			<custom-tab-pane label="完成" name="zkTaskListViewRef_4">
				<ZkTaskListView ref="zkTaskListViewRef_4" state="7004"></ZkTaskListView>
			</custom-tab-pane>
		</custom-tabs>
		
	</view>
</template>

<script setup>
	import http from '@/utils/request';
	import {ref,reactive,getCurrentInstance, computed, nextTick,watch} from "vue";
	import {onLoad,onShow,onUnload,onPageScroll,onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app";
	import ZkTaskListView from "./zkTaskListView.vue"
	
	const zkTaskListViewRef_1 = ref(null)
	
	const pageInfo = reactive({
		current:-1,
		tabs: ["所有", "待质控", "质控中", "完成"],
		detailStatus: ''
	});
	
	const {proxy} = getCurrentInstance()
	const showIcon = reactive({
		nowIcon: '',
		showIcon: '/static/blackDisplay.png',
		hideIcon: '/static/blackHide.png'
	})

	const statusIcon = reactive({
		daiIcon: '/static/dai_icon.png',
		wanIcon: '/static/wan_icon.png',
		zhiIcon: '/static/zhi_icon.png'
	})

	// 切换显示与隐藏
	const changeState = (type) => {
		if (type == 'header') {
			console.log("头部切换")
			if (eyeIcon.nowIcon == eyeIcon.hideIcon) {
				eyeIcon.nowIcon = eyeIcon.showIcon
			} else {
				eyeIcon.nowIcon = eyeIcon.hideIcon
			}
		} else if (type == 'list') {
			console.log("列表切换")
			if (showIcon.nowIcon == showIcon.hideIcon) {
				showIcon.nowIcon = showIcon.showIcon
			} else {
				showIcon.nowIcon = showIcon.hideIcon
			}
		}
	}
	
	const IndexName = ref("zkTaskListViewRef_1")

	const changeIndex=(e)=>{
		console.log('change-----------')
		IndexName.value = e.name
		pageInfo.current = e.value
		if(taskListRef())
			taskListRef().fetch()
	}
	
	const taskListRef = ()=>{
		const taskList = proxy.$refs[IndexName.value]
		return taskList
	}

	// 跳转到任务详情
	const toDetail = () => {
	}
	
	// 页面滚动触发事件
	onPageScroll((detail) => {
		//页面滚动事件
		uni.pageScrollTo({
			scrollTop: detail.scrollTop,
			duration: 0
		})
	})
	
	// 上拉加载
	onReachBottom(() => {
		console.log("父上拉加载");
		taskListRef().reachBottom()
	})
	
	//下拉刷新
	onPullDownRefresh(() => {
		console.log("父下拉刷新");
		taskListRef().pullDownRefresh()
	})
	
	onShow(()=>{
		console.log("父onShow");
		nextTick(()=>{
			pageInfo.current = 0
		})
	})
	
</script>

<style lang="scss" scoped>
	@import 'indexList.scss';
</style>