luoyang-uniapp-app/pages/mineEntry/carLearProgress/carLearProgress.vue

<template>
	<view class="pageBg">
		<view class="tabs">
			<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
			<view class="rightPad"></view>
		</view>
		<view class="pad learnStatus">
			<!-- <view class="card">
				<view class="flex-b top_row">
					<view class="lab">科目一阶段</view>
					<view class="btn status">已完成</view>
				</view>
				<view class="date-row">2023-08-09 22:52:12</view>
			</view> -->
			<!-- <view class="card">
				<view class="flex-b top_row">
					<view class="lab">科目一考试</view>
					<view class="btn status">已预约</view>
				</view>
				<view class="date-row">2023-08-09 22:52:12</view>
				<view class="flex-b bg">
					<view class="row">
						<view class="text">科目二</view>
						<view class="btn" @click="$goPage('/pages/carEntry/evaluate/evaluate')">去评价</view>
					</view>
				</view>
			</view> -->
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="flex-b top_row">
					<view class="lab">{{item.dynamicsName}}</view>
					<!-- <view class="btn">已预约</view> -->
				</view>
				<view class="date-row">{{item.dynamicsTime}}</view>
				<view class="bg" v-if="item.examSite||item.examTime">
					<view class="row" v-if="item.examSite">
						<view class="text">地点：{{item.examSite}}</view>
					</view>
					<view class="row" v-if="item.examTime">
						<view class="text">时间：{{item.examTime}}</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="card">
				<view class="flex-b top_row">
					<view class="lab">科目一考试</view>
					<view class="btn red status">未通过</view>
				</view>
				<view class="date-row">2023-08-09 22:52:12</view>
			</view> -->
			<nodata v-if="!list.length"></nodata>
			
		</view>
	</view>
</template>

<script>
	import { getStudentDynamics } from '@/config/api.js'
	export default {
		data() {
			return {
				tabData: [{
						text: '全部',
						id: 0
					},
					{
						text: '科目一',
						id: 1
					},
					{
						text: '科目二',
						id: 2
					},
					{
						text: '科目三',
						id: 3
					},
					{
						text: '科目四',
						id: 4
					},
				],
				currentTab: 1,
				list: []
			}
		},
		onShow() {
			this.getStudentDynamicsFn()
		},
		onPullDownRefresh() {
			this.getStudentDynamicsFn()
		},
		methods: {
			scroll(e) {
				console.log(e)
			},
			changeTab(val) {
				if(this.currentTab == val.id) return
				this.currentTab = val.id
				this.getStudentDynamicsFn()
			},
			async getStudentDynamicsFn() {
				let obj = {
					"studentId": this.studentId,
					"subject": this.currentTab,
				}
				if(obj.subject==0) delete obj.subject
				const {data: res} = await getStudentDynamics(obj)
				this.list = res
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageBg {
		padding-bottom: 40rpx;
	}
	@import '../../tabbar/learnCar/comp/comp.scss';
	.date-row {
		line-height: 88rpx;
		color: #999;
		border-top: 1px solid #F6F7FA;
	}
	.top_row {
		height: 88rpx;
	}
	.red {
		background-color: #FF7D7D !important;
	}
	.tabs {
		display: flex;
		justify-content: space-between;
		.tab {
			min-width: 108rpx;
			height: 88rpx;
			font-size: 28rpx;
			color: #333;
			text-align: center;
			line-height: 88rpx;
			margin-right: 28rpx;
	
			&.active {
				color: $themC;
				position: relative;
				&::before {
					position: absolute;
					content: '';
					width: 34rpx;
					height: 4rpx;
					background: #3776FF;
					border-radius: 2rpx;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			
		}
		.rightPad {
			min-width: 10rpx;
			height: 60rpx;
			
		}
	}
	.learnStatus {
		margin-top: 24rpx;
	}
</style>