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

<template>
	<view>
		  <u-sticky bgColor="#fff">
		    <u-tabs :list="categoryList" :scrollable="false" @click="changeCategory"></u-tabs>
		  </u-sticky>
			<view style="height: 100vh;background-color: rgb(245, 245, 245);">
				<template v-if="tIndex===0 || tIndex===3">
					 <Subject1 />
				</template>
				<template v-else>
					<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'
				}]
			};
		},
	 onLoad() {
		 this.getAllQuestion()
	 },
	 methods:{
		 ...mapActions(useQuestionStore, ['getQuestionList']), //映射action
		 //切换科目
		 changeCategory(val){
			 this.tIndex=val.index
			 console.log(this.tIndex);
		 },
		 //获取全部题库
		 getAllQuestion(){
			 const arr = [{
			   questionId: 0,
			   questionTypeDesc: '单选',
			   questionDesc: '第一题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			   optionList: [{
			     op: 'A',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'B',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'C',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'D',
			     opDesc: '注意新手标志'
			   }],
			   rightOp: 'C',
			 }, {
			   questionId: 1,
			   questionTypeDesc: '单选',
			   questionDesc: '第二题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			   optionList: [{
			     op: 'A',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'B',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'C',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'D',
			     opDesc: '注意新手标志'
			   }],
			   rightOp: 'B',
			 }, {
			   questionId: 2,
			   questionTypeDesc: '单选',
			   questionDesc: '第三题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			   optionList: [{
			     op: 'A',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'B',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'C',
			     opDesc: '注意新手标志'
			   }, {
			     op: 'D',
			     opDesc: '注意新手标志'
			   }],
			   rightOp: 'A',
			 },
			   {
			     questionId: 3,
			     questionTypeDesc: '单选',
			     questionDesc: '第四题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }, {
			     questionId: 4,
			     questionTypeDesc: '单选',
			     questionDesc: '第5题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   },
			   {
			     questionId: 5,
			     questionTypeDesc: '单选',
			     questionDesc: '第6题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }, {
			     questionId: 6,
			     questionTypeDesc: '单选',
			     questionDesc: '第7题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }, {
			     questionId: 7,
			     questionTypeDesc: '单选',
			     questionDesc: '第8题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }, {
			     questionId: 8,
			     questionTypeDesc: '单选',
			     questionDesc: '第9题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'C',
			   }, {
			     questionId: 9,
			     questionTypeDesc: '单选',
			     questionDesc: '第10题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'B',
			   }, {
			     questionId: 10,
			     questionTypeDesc: '单选',
			     questionDesc: '第11题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   },
			   {
			     questionId: 11,
			     questionTypeDesc: '单选',
			     questionDesc: '第12题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }, {
			     questionId: 12,
			     questionTypeDesc: '单选',
			     questionDesc: '第13题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   },
			   {
			     questionId: 13,
			     questionTypeDesc: '单选',
			     questionDesc: '第14题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }, {
			     questionId: 14,
			     questionTypeDesc: '单选',
			     questionDesc: '第15题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }, {
			     questionId: 15,
			     questionTypeDesc: '单选',
			     questionDesc: '第16题，在实习期内驾驶机动车的，应当在车身后部粘贴或者悬挂哪种标志？',
			     optionList: [{
			       op: 'A',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'B',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'C',
			       opDesc: '注意新手标志'
			     }, {
			       op: 'D',
			       opDesc: '注意新手标志'
			     }],
			     rightOp: 'A',
			   }
			 ]
			 this.getQuestionList(arr)
		 },
	 }
	}
</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>