jwl-applet/src/pages/index/index.vue

<template>
	<view>
		  <u-sticky bgColor="#fff">
		    <u-tabs :list="categoryList" :current="curTab" :scrollable="false" @change="changeCategory"></u-tabs>
		  </u-sticky>
			<view style="height: 100vh;background-color: rgb(245, 245, 245);">
				<template v-if="subject=='1' || subject=='4'">
					 <Subject1 :subject="subject" :rightList="rightList" :wrongList="wrongList" />
				</template>
				<template v-else>
					<Subject2 :subject="subject" ref="subjectRef" />
				</template>
				
			</view>
			</view>
</template>
<script>
	import { mapState,mapActions } from 'pinia' //引入映射函数
	import useQuestionStore from '@/jtools/store/question' //引入store
	import storage from '@/jtools/storage';
	import {
		querySysConfigList,
	} from '@/jtools/api/question';
	import Subject1 from "./components/Subject1";
	import Subject2 from "./components/Subject2";
  export default {
    components: {Subject1,Subject2},
    data() {
			return {
				subject:storage.get('curSubject') || '1',
				curTab:Number(storage.get('curSubject'))-1,
				searchValue:'',
				cityName:'',
				categoryList:[],
				rightList:storage.get(`rightList_subject${this.subject}`) || [],
				wrongList:storage.get(`wrongList_subject${this.subject}`) || [],
			};
		},
		onLoad(){
			this.getSubjectConfig()
		},
	 onShow() {
		 if(this.subject=='1'||this.subject=='4'){
			this.rightList=storage.get(`rightList_subject${this.subject}`) || []
			this.wrongList=storage.get(`wrongList_subject${this.subject}`) || [] 
		 }
	 },
	 methods:{
		  ...mapActions(useQuestionStore,['getOrderQuestion_sub4','getOrderQuestion_sub1','changeSubject']),
			//获取科目配置
			getSubjectConfig(){
				const carTypeId=storage.get('carType') || '1001'
				querySysConfigList(carTypeId,'Subject').then(resp=>{
					if(resp.code==='0000'){
						this.categoryList=resp.data.map(item=>{
							return{
								...item,
								name:item.configItemName
							}
						})
					}
				})
			},
		 //切换科目
		async changeCategory(val){
			 this.subject=val.configItemCode
			 console.log();
			 if(this.subject=='1'){
				await this.getOrderQuestion_sub1()
			 }else if(this.subject=='4'){
				await this.getOrderQuestion_sub4()
			 }else{
				this.changeSubject(this.subject)
				setTimeout(()=>{
					this.$refs.subjectRef.getDiverType()
				},100)
			 }
			 if(this.subject=='1'||this.subject=='4'){
			 		this.rightList=storage.get(`rightList_subject${this.subject}`) || []
			 		this.wrongList=storage.get(`wrongList_subject${this.subject}`) || [] 
			 }
		 },
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
		bottom: 14rpx !important;
	}
</style>