jwl-applet/src/pages/questionBank/examResult.vue

<template>
	<view>
		<!-- <u-navbar title="本次成绩" @rightClick="rightClick" :autoBack="true"></u-navbar> -->
		<j-navbar backPath="/pages/index/index">本次成绩</j-navbar>
		<view class="p14 wp100">
			<GradesChart color="#FF6E02" :titleName="score+'分'" :actualValue="Number(scorePrecent)" />
			<view class="top_box flex jc-c" style="flex-direction: column;">
				<view class="wp100 text-center" style="margin-top: -153rpx;">
					<text v-if="score>=90">太棒了！正确率很高了！</text>
					<text v-else>很遗憾！考试不及格</text>
					<button class="centerBtn" @click="toVip">马上提分</button>
					<view class="flex ai-c jc-c mt10">
						<view class="text-center wp33">
							<view>{{doNotNum}}</view>
							<text>未做题</text>
						</view>
						<view class="text-center wp33" @tap="toQuestionBank">
							<view>{{wrongList?.length}}</view>
							<text>看错题</text>
						</view>
						<view class="text-center wp33 flex jc-c ai-c" style="flex-direction: column;" @tap="toExams">
							<u-icon name="edit-pen" size="28"></u-icon>
							<text>重新考试</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p14lr">
			<view class="bc-fff p14 relative" style="border-radius: 20rpx;">
				<view class="flex ai-c jc-sb">
					<text class="fs18 cor-000 fw600">考试情况</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
				<view class="flex wp100 ai-c" style="position: absolute;top: 70px;left: 24px;font-size: 14px;">
					<text style="color: #00B74F;margin-right: 10px;">90</text>
					<view class="xian"></view>
					<text style="color: #00B74F;position: absolute;right:33px;top:-13px">及格线</text>
				</view>
			</view>
			<view class="wp100 text-center bc-fff pb10">
				<text>近五次模考成绩</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import useUserStore from '@/jtools/store/user'
	import GradesChart from "./components/GradesChart.vue"
	import storage from '@/jtools/storage';
	import {
		testTotal
	} from '@/jtools/api/question';
	export default {
		components: {
			GradesChart
		},
		data() {
			return {
				navTitle:"模拟考试",
				subject:1,
				doNotNum:0,
				wrongList:undefined,
				score:0,
				scorePrecent:0,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#FAC858"],
					padding: [10, 5 ,5,5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disabled:true,
						disableGrid: true
					},
					yAxis:{
						data:[{
						gridType: "dash",
						position: 'left',
						dashLength: 2,
						max:100,
						min:0,
					}]
					},
					legend:{
						show:false
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			};
		},
		onLoad(op){
			if(op.doNotNum){
				this.doNotNum=op.doNotNum
			}
			if(op.wrongList){
				console.log(op.wrongList);
				this.wrongList=JSON.parse(op.wrongList) || []
			}
			if(op.score){
				this.score=op.score
				this.scorePrecent=(this.score/100).toFixed(2)
			}
			if(op.subject){
				this.subject=op.subject
			}
			if(op.navTitle){
				this.navTitle=op.navTitle
			}
		},
	onReady() {
			this.getServerData();
		},
		onUnload() {
			//#ifdef MP-WEIXIN
			uni.reLaunch({
				url:"/pages/index/index"
			})
			//#endif
		},
		computed: {
			...mapState(useUserStore, ["vipOnList"])
		},
		methods: {
			...mapActions(useUserStore, ['searchUserVip']),
			async toVip(){
				await this.searchUserVip()
				const res = this.vipOnList.some(item => item.subjects.includes(this.subject))
				if(res){
					uni.navigateTo({
					  url: '/pages/me/vip'
					})
				}else{
					uni.navigateTo({
					 url:"/pages/index/videoVip?subject="+this.subject
					})
				}
			},
			getServerData() {
				testTotal({
					"carTypeId": storage.get('carType') || '1001',
					"subject": this.subject
				}).then(resp=>{
					if(resp.code==='0000'){
						if(resp.data&&resp.data.recentTestList&&resp.data.recentTestList.length){
							const scoreList =resp.data.recentTestList.map(item=>{
								return item.score
							})
							let res = {
								categories: ["第一次","第二次","第三次","第四次","第五次"],
								series: [{
									 name: "",
										data: scoreList
									},
								]
							};
							this.chartData = JSON.parse(JSON.stringify(res));
						}
					}
				})
			},
			toQuestionBank(){
				if(this.wrongList.length==0){
					uni.showToast({
						title:'当前无错题~',
						icon:'none'
					})
				}else{
					const list =JSON.stringify(this.wrongList)
					uni.navigateTo({
						url:"/pages/questionBank/questionBank?navTitle=错题&subject="+this.subject+"&questionList="+list
					})
				}
			},
			//重新考试
			toExams(){
				uni.navigateTo({
					url:"/pages/questionBank/practiceExams?subject="+this.subject
				})
			},
		},
	}
</script>

<style scoped>
	.top_box {
		padding: 15px;
		background-color: #fdfdfd;
		border-radius: 20rpx;
	}

	.centerBtn {
		width: 349rpx;
		height: 76rpx;
		background: #DEEFE5;
		border:none;
		border-radius: 38rpx;
		line-height: 76rpx;
		text-align: center;
		color: #00B74F;
		margin-top: 10px
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
		background-color: #fdfdfd;
		border-radius: 20rpx;
		padding-top: 20rpx;
	}
	.xian{
		width: 565rpx;
		height: 0rpx;
		border-top: 1px dashed #CCCCCC;
	}
</style>