questionbankvue3/pages/exercises/myStudy/myStudy.vue

<template>
	<view class="content">
		<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" title="我的学习" :bgColor="'transparent'" :titleStyle="{color: '#fff'}" :fixed="false">
		</up-navbar>
		<view class="padding">
			<view class="studyDay" v-if="info.days">已坚持学习{{info.days}}天</view>
			<view class="card">
				<view class="tabs">
					<view class="tab" @click="changeNav(1)" :class="{active: currentNav==1}">科一</view>
					<view class="tab" @click="changeNav(4)" :class="{active: currentNav==4}">科四</view>
				</view>
				<view class="pd20">
					<view class="statistics">
						<view class="statisticsItem" v-for="(item,index) in statisticsData" :key="index">
							<view class="num">{{ item.num }}</view>
							<view class="text">{{ item.name }}</view>
						</view>
					</view>
					<view class="h3">刷题进度</view>
					<view class="bgCard_row">
						<view class="bgCard">
							<view class="lab">顺序练习</view>
							<view class="tps">已完成（题）</view>
							<view class="num">{{adCount.orderAlready }} <text>/</text>{{ adCount.orderTotal }}</view>
						</view>
						<view class="bgCard">
							<view class="lab">精选试题</view>
							<view class="tps">已完成（题）</view>
							<view class="num">{{adCount.siftAlready }}<text>/</text>{{ adCount.siftTotal }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<statistics tit="模拟考试" :chartData="chartData" :listData="listData" key="1" :subject="currentNav"></statistics>
			<statistics tit="防真考试" :chartData="chartData2" :listData="listData2" key="2" :subject="currentNav" url="/pages/exercises/beforeExam/beforeExam"></statistics>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import nodata from '@/components/nodata/nodata.vue'
	import { mystudy, examStatistics, indexAdCount } from '@/config/api.js'
	import statistics from './comp/statistics.vue'
	const value = ref(false)
	const currentNav = ref(1)
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()
	currentNav.value = usecarStore.carInfo.stepType
	function changeNav(val) {
		if(currentNav.value == val) return
		currentNav.value = val
		let data = info.value.oneresponse
		if(val==2) {
			data = info.value.fourResponse
		}
		initStatisticsData(data)
		indexAdCountFn()
	}
	const statisticsData = ref([])
	
	
	const info = ref({})
	async function mystudyFn() {
		const {data: res} = await mystudy(usecarStore.carInfo.carType)
		initStatisticsData(res.oneresponse)
		info.value = res
		console.log(res)
	}
	
	function initStatisticsData(data) {
		statisticsData.value = [
			{name: '我的收藏', num: data.collectCount || 0},
			{name: '我的错题', num: data.errorCount || 0},
			{name: '考试记录', num: data.examCount || 0},
			{name: '预计合格率', num: data.exampassRate +'%' || 0},
		]
	}
	
	mystudyFn()
	// stepType	1模拟考试 2仿真考试
	let chartData = ref({})
	let listData = ref([])
	let chartData2 = ref({})
	let listData2 = ref([])
	async function examStatisticsFn(examType) {
		let obj = usecarStore.carInfo
		const {data: res} = await examStatistics({carType: obj.carType, stepType: obj.stepType,  examType})
		if(!res?.length) return
		let obj2 = {
		    categories: res.map(item=>item.formatStartTime),
		    series: [
		      {
		        name: "目标值",
		        data: res.map(item=>item.score)
		      }
		    ]
		  }
		if(examType==1) {
			listData.value = res
			chartData.value = obj2
			console.log(chartData.value)
		}else {
			listData2.value = res
			chartData2.value = obj2
			console.log(chartData2.value)
		}  
	}
	examStatisticsFn(1)
	examStatisticsFn(2)
	
	
	// 统计多少题目
	let adCount = ref({})
	async function indexAdCountFn() {
		const {data:res} = await indexAdCount({subject: currentNav.value, carType: usecarStore.carInfo.carType, city: usecarStore.carInfo.city})
		adCount.value = res
	}
	indexAdCountFn()
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		display: flex;
		.btn {
			color: #fff;
			position: relative;
			padding: 0 20rpx;
			&.active {
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					width: 30rpx;
					height: 4rpx;
					background: #F6F7F8;
					border-radius: 2rpx;
					transform: translateX(-50%);
				}
			}
		}
	}
	.content {
	  width: 100%;
	  // background-color: #F6F7FA;
	  min-height: 100vh;
	  padding: 0rpx 0rpx 30rpx 0rpx;
	  background: url('../../../static/images/topbg.png') #F6F7FA no-repeat;
	  background-size: 100% 410rpx;
	  .studyDay {
	  	font-weight: bold;
	  	font-size: 36rpx;
	  	color: #FFFFFF;
	  	padding: 20rpx 0;
	  }
	    .card {
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 20rpx;
			&.card2 {
				padding: 20rpx;
			}
			.pd20 {
				padding: 20rpx;
			}
	      .tabs {
			  height: 84rpx;
			  background: #F6F7FA;
			  border-radius: 20rpx 20rpx 0px 0px;
			  display: flex;
			  line-height: 84rpx;
			  text-align: center;
	        .tab {
				  width: 160rpx;
				  font-weight: 500;
				  font-size: 28rpx;
				  &.active {
					  background: #fff;
				  }
	        }
	      }
	  
	      .statistics {
			  display: flex;
	        .statisticsItem {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 152rpx;
				&:last-child {
					background: linear-gradient(0deg, rgba(55,118,255,0) 0%, #EDF3FF 100%);
					border-radius: 10px;
					color: $themC;
					.text {
						color: $themC;
					}
				}
	          .num {
				font-family: DIN;
				font-weight: bold;
				font-size: 38rpx;
				margin-bottom: 6rpx;
	          }
	  
	          .text {
				font-size: 24rpx;
				color: #CCCCCC;
				margin-bottom: 16rpx;
	          }
	        }
	      }
	  
	      .h3 {
			font-weight: 500;
			font-size: 30rpx;
	      }
	  
	      .bgCard_row {
			  display: flex;
			  justify-content: space-between;
			  margin-top: 20rpx;
	        .bgCard {
				
				padding: 20rpx 0 0 30rpx;
				height: 172rpx;
				width: 48%;
				&:first-child {
					background: url('../../../static/images/mystudy1.png') no-repeat;
					background-size: 100% 100%;
					color: #24CBBA;
				}
				&:last-child {
					background: url('../../../static/images/mystudy2.png') no-repeat;
					background-size: 100% 100%;
					color: #F07634;
				}
	          .lab {
				font-size: 28rpx;
	          }
	  
	          .tps {
				font-size: 24rpx;
				opacity: 0.3;
				padding: 6rpx 0;
	          }
	  
	          .num {
				font-family: DIN;
				font-weight: bold;
				font-size: 36rpx;
	          }
	        }
	      }
	    }
	}
	
	
</style>