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

<template>
	<view class="max_page detail-main">
		<nav-bar :is_seat="false"></nav-bar>
		<view class="fixed_search_div">
			<view class="back_div" @click="common.navigateBack()">
				<view class="back-icon"></view>
			</view>
			<view class="title font_pf">错题本</view>
		</view>
		<view class="detail-body">
			<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>
			<view class="uni-margin-wrap no-overflow">
				<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
					<swiper-item>
						<FavoritesCourse ref="courseRef"></FavoritesCourse>
					</swiper-item>
					<swiper-item>
						<Correct ref="correctRef"></Correct>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="fixed-box">
			<uv-button
				type="primary"
				class="send_evaluate"
				color="#0066FF"
				:throttleTime="100"
				text='重做错题'
				:custom-style="customStyle"
				
			>
				
			</uv-button>
		</view>
	</view>
</template>

<script setup>
	import Correct from './components/correct.vue';
	import FavoritesCourse from './components/favorites-course.vue';
	// 我的收藏
	import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
	import { LineBg } from '@/enum.js';
	import { queryTraCrsBbsInfoByCrsId, replyTraCrsBbsInfo, qryChildTraCrsBbsInfo } from '@/api/courseDetail.js';

	import common from '@/common/common';
	const customStyle = {
		borderRadius: '16rpx'
	}
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	
	const courseRef = ref(null);
	const correctRef = ref(null);
	const tabAct = ref(0);
	const tabList = ref([
		{
			name: '当前错题'
		},
		{
			name: '已订正'
		}
	]);

	const tabChange = (item) => {
		tabAct.value = item.index;
	};
	const swiperChange = (item) => {
		tabAct.value = item.detail.current;
	};
	onMounted(() => {
		watch(
			tabAct,
			(newValue, oldValue) => {
				if (newValue === 0) {
					courseRef.value?.getData('first');
				} else if (newValue === 1) {
					correctRef.value?.getData('first');
				}
			},
			{
				immediate: true
			}
		); // 这里的immediate会在onMounted之后执行
	});
</script>

<style lang="scss" scoped>
	$bg-margin-left: 50rpx;
	
	.fixed-box {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		border-radius: 16rpx 16rpx 0px 0px;
		border: 2rpx solid #E5E5E5;
		background: #FFFFFF;
		overflow: hidden;
		box-shadow: 0 2rpx 2rpx #E5E5E5;
		.send_evaluate{
			padding: 38rpx 52rpx;
			background: #FFFFFF;
			
		}
	}
	
	.my_tabs {
		// 解决这个圆角的图片，开穿透
		:deep(.uv-tabs__wrapper__nav__line) {
			height: 26rpx !important;
			left: 70rpx;
			background-size: 28rpx !important;
			background-repeat: no-repeat !important;
		}
	}

	.swiper {
		height: calc(100vh - var(--status-bar-height) - 78rpx - 88rpx - 156rpx);
	}

	.swiper-item {
		display: block;
		height: 100%;
		line-height: 300rpx;
		text-align: center;
	}

	.detail-body {
		background: #ffffff;
		border-radius: 15rpx;
		z-index: 101;
		overflow: hidden;

		.body-tab {
			height: 88rpx;
		}
	}

	.detail-main {
		background-color: #f6f8ff;
		overflow: hidden;
	}

	.title {
		color: #000000;
		font-size: 34rpx;
		height: 34rpx;
		font-weight: 600;
		line-height: 34rpx;
	}

	.fixed_search_div {
		padding: calc(20rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
		display: flex;
		align-items: center;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		.back_div {
			position: absolute;
			left: 20rpx;
			padding: 10rpx;

			.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 #000000;
				border-left: 4rpx solid #000000;
				transform: rotate(-45deg);
			}
		}
	}
</style>