tra-app/src/pages/testingHall/index.vue

<template>
	<view class="main_div max_page">
		<view class="body-title">
			<view class="back_div" @click="common.navigateBack()">
				<view class="back-icon"></view>
			</view>
			<view>考试中心</view>
		</view>
		<view class="input-view">
			<search-input placeholder="请输入考试名" @search="search"></search-input>
			<!-- <view class="search_div" @click="search"></view> -->
		</view>
		<view class="body-tab">
			<uv-tabs class="font_pf my_tabs" :current="tabAct" :list="tabList" @change="tabChange" :scrollable="false"
				line-color="#0066FF" :inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight:'600'}"
				:activeStyle="{color:'#0066FF',fontSize:'30rpx', fontWeight:'600'}"
				:lineColor="`url(${LineBg}) 10% 10%`"></uv-tabs>
		</view>

		<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
			<swiper-item>
				<Content :ref="el => contentRefs[0] = el" :index="tabAct"
					@gotoDetails="gotoDetails"></Content>
			</swiper-item>
			<swiper-item>
				<Content :ref="el => contentRefs[1] = el" :index="tabAct"
					@gotoDetails="gotoDetails"></Content>
			</swiper-item>
			<swiper-item>
				<Content :ref="el => contentRefs[2] = el" :index="tabAct"
					@gotoDetails="gotoDetails"></Content>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	// 考试中心
	import Content from './components/content.vue'
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		setPageCache
	} from '@/common/common';
	import common from '@/common/common';
	
	import {
		LineBg
	} from '@/enum.js'
	const tabAct = ref(0);

	const tabList = ref([{
		name: '全 部'
	}, {
		name: '已完成'
	}, {
		name: '未完成'
	}]);

	const contentRefs = ref([])
	const triggered = ref(false)
	const tabChange = (item) => {
		tabAct.value = item.index;
	};
	const swiperChange = (item) => {
		tabAct.value = item.detail.current;
	};
	const search = (value) => {
		contentRefs.value[tabAct.value]?.search(value);
	}
	const gotoDetails = (item) => {
		setPageCache('testing_hall_details', item)
		common.navigateTo('/pages/testingHall/details');
	}
	onMounted(() => {
		triggered.value = true
		watch(tabAct, (newValue, oldValue) => {
			typeof contentRefs.value[newValue]?.getData === 'function' && contentRefs.value[newValue]
				?.getData('first')
		}, {
			immediate: true
		}) // 这里的immediate会在onMounted之后执行
	})
</script>

<style scoped lang="scss">
	.swiper {
		height: calc(100vh - var(--status-bar-height) - 70rpx - 78rpx - 40rpx - 88rpx);
		width: 100%;
	}


	.body-tab {
		height: 88rpx;
		// background-color: red;
		width: 100%;
	}

	.my_tabs {

		// 解决这个圆角的图片，开穿透
		:deep(.uv-tabs__wrapper__nav__line) {
			height: 30rpx !important;
			left: 50rpx;
			background-size: 24rpx !important;
			background-repeat: no-repeat !important;
		}

	}

	.main_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: var(--status-bar-height);
		overflow: hidden;
	}

	.body-title {
		width: 100%;
		height: 70rpx;
		font-size: 33rpx;
		padding-top: 10rpx;
		font-weight: 500;
		color: #000;
		position: relative;
		text-align: center;

		.delete_div {
			position: absolute;
			right: 20rpx;
			top: 17rpx;
			width: 50rpx;
			height: 50rpx;

			.img {
				width: 34rpx;
				height: 34rpx;
			}
		}

		.back_div {
			position: absolute;
			left: 26rpx;
			height: 34rpx;
			top: 17rpx;

			.back-icon {
				position: relative;
				width: 50rpx;
				height: 50rpx;
				cursor: pointer;
				display: flex;
				align-items: center;
			}

			.back-icon::before,
			.back-icon::after {
				content: '';
				position: absolute;
				transition: all 0.3s ease;
			}

			.back-icon::after {
				top: 25%;
				left: 25%;
				width: 40%;
				height: 40%;
				border-top: 4rpx solid #2b2c2e;
				border-left: 4rpx solid #2b2c2e;
				transform: rotate(-45deg);
			}
		}
	}

	.input-view {
		width: 90%;
		margin: 20rpx auto;
		height: 78rpx;

		position: relative;

		.search_div {
			position: absolute;
			top: 0%;
			right: 0;
			height: 100%;
			width: 70rpx;
			// background-color: red;
		}
	}
</style>