jwl-applet/src/pages/questionBank/practiceResult.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 :titleName="rightPencentDesc" :actualValue="Number(rightPencent)" />
			<view class="top_box flex jc-c" style="flex-direction: column;">
				<view class="wp100 text-center" style="margin-top: -80px;">
					<text v-if="Number(rightPencent)>=90">太棒了！正确率很高了！</text>
					<text v-else>继续努力吧，正确率有点低~</text>
					<view class="flex ai-c jc-c mt10">
						<view class="text-center wp50" @tap="toQuestionBank">
							<view>{{wrongList.length}}/{{allDoNum}}</view>
							<text>本次错题</text>
						</view>
						<view class="text-center wp50 flex jc-c ai-c" style="flex-direction: column;" @tap="toContiune">
							<u-icon name="file-text" size="28"></u-icon>
							<text>继续做题</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p14">
			<view class="bc-fff p14" style="border-radius: 20rpx;">
				<view class="flex ai-c jc-sb">
					<view>
						<text class="fs18 cor-000 fw600">累计练题</text>
						<text class="fs14 cor-666 ml10">{{allRightList.length+allWrongList.length}}题</text>
					</view>
					<text class="fs14 cor-666">未做题{{getNotDoNum}}题</text>
				</view>
				<view class="mt10">
					<u-line-progress :percentage="percent" activeColor="#05C341" height="16"></u-line-progress>
				</view>
				<view class="p14 mt10 flex ai-c jc-sb" style="border-radius: 20rpx;background-color: rgb(253,249,238);">
					<view>
						<text class="fs16 cor-666">题目太多？试试</text>
						<text class="fs16 cor-000 fw600">精简500题</text>
					</view>
					<view style="width: 220rpx;">
							<button style="background-color:rgb(246,211,115);height: 80rpx;border-radius: 40rpx;width: 220rpx;color:rgb(102,65,0)">开始答题</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import storage from '@/jtools/storage';
	import useQuestionStore from '@/jtools/store/question' //引入store
	import GradesChart from "./components/GradesChart.vue"
	export default {
		components: {
			GradesChart
		},
		data() {
			return {
				rightPencent:0,
				rightPencentDesc:'',
				allDoNum:0,
				wrongList:[],
				subject:1,
				allRightList:[],
				allWrongList:[],
				percent:undefined,
				navTitle:'顺序练习',
			}
		},
		onLoad(op){
			if(op.allDoNum){
				this.allDoNum=op.allDoNum
			}
			if(op.navTitle){
				this.navTitle=op.navTitle
			}
			if(op.wrongList){
				this.wrongList=JSON.parse(op.wrongList)
				this.rightPencent=this.allDoNum>0?((this.allDoNum-this.wrongList.length)/this.allDoNum).toFixed(2):0
				this.rightPencentDesc=(this.rightPencent*100).toFixed(0)+'%'
			}
			if(op.subject){
				this.subject=op.subject
				this.allRightList=storage.get(`rightList_subject${this.subject}`) || []
				this.allWrongList=storage.get(`wrongList_subject${this.subject}`) || []
				this.percent=(((this.allRightList.length+this.wrongList.length) / this.orderQuestion.length)*100).toFixed(0)
			}
		},
		computed: {
			...mapState(useQuestionStore, ["orderQuestion"]), //映射函数，取出tagslist
			getNotDoNum(){
				return this.orderQuestion.length-(this.allRightList.length+this.allWrongList.length)
			}
		},
		methods: {
			toQuestionBank(){
				const list =JSON.stringify(this.wrongList)
				uni.navigateTo({
					url:"/pages/questionBank/questionBank?navTitle=错题&subject="+this.subject+"&questionList="+list
				})
			},
			toContiune(){
				uni.navigateTo({
					url:"/pages/questionBank/questionBank?navTitle="+this.navTitle+"&subject="+this.subject
				})
			}
		}
	}
</script>

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