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

<template>
	<view>
		  <u-sticky bgColor="#fff">
		    <u-tabs :list="categoryList" :scrollable="false" @change="changeCategory"></u-tabs>
		  </u-sticky>
			<view style="height: 100vh;background-color: rgb(245, 245, 245);">
				<template v-if="tIndex===0 || tIndex===3">
					 <Subject1 :subject="tIndex+1" :rightList="rightList" :wrongList="wrongList" />
				</template>
				<template v-else>
					<subject2 :subject="tIndex+1" ref="subject2" />
				</template>
			</view>
			</view>
</template>
<script>
	import { mapState,mapActions } from 'pinia' //引入映射函数
	import useQuestionStore from '@/jtools/store/question' //引入store
	import storage from '@/jtools/storage';
	import Subject1 from "./components/Subject1";
	import Subject2 from "./components/Subject2";
  export default {
    components: {Subject1,Subject2},
    data() {
			return {
				tIndex:0,
				searchValue:'',
				cityName:'',
				categoryList:[{
					name:'科目1'
				},{
					name:'科目2'
				},{
					name:'科目3'
				},{
					name:'科目4'
				}],
				rightList:storage.get(`rightList_subject${this.tIndex+1}`) || [],
				wrongList:storage.get(`wrongList_subject${this.tIndex+1}`) || [],
			};
		},
	 onShow() {
		 if(this.tIndex==0||this.tIndex==3){
			this.rightList=storage.get(`rightList_subject${this.tIndex+1}`) || []
			this.wrongList=storage.get(`wrongList_subject${this.tIndex+1}`) || [] 
		 }
	 },
	 methods:{
		  ...mapActions(useQuestionStore,['getOrderQuestion']),
		 //切换科目
		 changeCategory(val){
			 this.tIndex=val.index
			 if(this.tIndex==0){
				 this.getOrderQuestion('1')
			 }else if(this.tIndex==3){
				 this.getOrderQuestion('4')
			 }else{
				 this.$refs.subject2.getDiverType()
			 }
		 },
		}
	}
</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>