questionbankvue3/pages/exercises/theoryStudy/theoryStudy.vue

<template>
	<view class="content">
		<up-navbar title="理论学习" :leftIconColor="'#333'" :safeAreaInsetTop="true" :autoBack="true" >
			<template #right>
				<view class="u-nav-slot flex" @click="show = true">
					<view class="txt">{{ usecarStore.carInfo.carTypeName }}</view>
					<u-icon name="arrow-down-fill" color="#333" size="12"></u-icon>
				</view>
			</template>
		</up-navbar>
		
		<view class="tabs flex">
			<view class="tab" @click="changeTab(1)" :class="{active: currentTab==1}">科目一</view>
			<view class="tab" @click="changeTab(4)" :class="{active: currentTab==4}">科目四</view>
		</view>
		
		<view class="swiperBox">
			<u-swiper :list="bannerList" @click="swiperClick" :dots-styles="dotsStyles" indicatorMode="dot"   keyName="cover" height="160rpx"></u-swiper>
		</view>
		
		<view class="notice" v-if="nodes">
			<view class="yellowT">通知/</view>
			<rich-text :nodes="nodes"></rich-text>
		</view>
		
		<view class="iconBox">
			<view class="iconComl">
				<!-- @click="$goPage(item.url)" -->
				<view class="item"  v-for="(item,index) in leftItem" :key="index" @click="$goPage(item.url)">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
			<view class="centerComl">
				<view class="ctItem" @click="goAndSetCar">
					<view class="txt">顺序练习</view>
					<view class="txt">{{adCount.orderAlready }}/{{ adCount.orderAlready }}</view>
				</view>
				<!-- $goPage('/pages/vip/vipEntry/vipEntry') -->
				<view class="ctItem" @click="$noDoFn">
					<view class="txt">精选试题</view>
					<view class="txt">{{adCount.siftAlready }}/{{ adCount.siftTotal }}</view>
				</view>
			</view>
			<view class="iconComl">
				 <!-- @click="$goPage(item.url)" $noDoFn -->
				<view class="item"  v-for="(item,index) in rightItem" :key="index"  @click="$goPage(item.url)">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
		</view>
		
		<view class="simulatedExam flex-b">
			<view class="leftTxt">
				<view class="h8">科{{ usecarStore.carInfo.stepType==1? '一': '四'}}模拟考试</view>
				<view class="text">考试次数：1次</view>
				<view class="text">预测通过率：10%</view>
				<view class="btnBox flex">
					 <!-- @click="$goPage('/pages/exercises/examSubjiect1/examSubjiect1')" -->
					<view class="btnTxt"  @click="$goPage('/pages/exercises/examSubjiect1/examSubjiect1')">开始考试</view>
					<view class="btnIcon">
						<image src="@/static/images/theory/sanjx.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="rightImg">
				<image src="@/static/images/theory/computed.png" mode=""></image>
			</view>
		</view>
		
		<view class="ul flex">
			<view class="li" v-for="(item,index) in bottomItem" :key="index" @click="$goPage('pages/exercises/examIntroduction/examIntroduction?tab='+index)">
				<view class="icon">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="txt">{{ item.name }}</view>
			</view>
		</view>
		
		<u-picker :show="show" :columns="columns" keyName="title" @close="show=false" @cancel="show=false" @confirm="confirmPicker"></u-picker>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { questbanktypeApi, indexNoticeApi, indexAdApi, indexAdCount, examProcessInfo} from '@/config/api.js'
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()
	const list1 = [
		 new URL('@/static/images/bigImg/banner1.png', import.meta.url).href,
		 new URL('@/static/images/bigImg/banner2.png', import.meta.url).href,
	]
	function swiperClick(val) {
		let item = bannerList.value[val]
		if(!item.url) return
		usecarStore.webLink = item.url
		uni.navigateTo({
			url:'/pages/exercises/webView/webView'
		})
	}
	const currentTab = ref(1)
	const dotsStyles = ref({
		backgroundColor: '#E8E9EC',
		border: '1px #E8E9EC solid',
		color: '#fff',
		selectedBackgroundColor: '#1989FA',
		selectedBorder: '1px #1989FA solid'
	})
		
	const leftItem = ref([
		{name: '分类学习', icon: new URL('@/static/images/theory/theoryIcon1.png', import.meta.url).href, url: '/pages/exercises/categoryExercises/categoryExercises'},
		{name: '章节练习', icon: new URL('@/static/images/theory/theoryIcon7.png', import.meta.url).href, url: '/pages/exercises/chapter/chapter'},
		{name: '题型练习', icon: new URL('@/static/images/theory/theoryIcon6.png', import.meta.url).href, url: '/pages/exercises/queTypeExercises/queTypeExercises'},
		{name: '精选试题', icon: new URL('@/static/images/theory/theoryIcon9.png', import.meta.url).href, url: '/pages/exercises/brushQuestions/brushQuestions'},
		
	])
	
	const rightItem = ref([
		{name: '错题收藏', icon: new URL('@/static/images/theory/theoryIcon8.png', import.meta.url).href, url: '/pages/exercises/wrongQuestion/wrongQuestion'},
		{name: '仿真考试', icon: new URL('@/static/images/theory/theoryIcon10.png', import.meta.url).href, url: '/pages/exercises/beforeExam/beforeExam'},
		{name: '我的学习', icon: new URL('@/static/images/theory/theoryIcon12.png', import.meta.url).href, url: '/pages/exercises/myStudy/myStudy'},
		{name: '考前密卷', icon: new URL('@/static/images/theory/theoryIcon11.png', import.meta.url).href, url: '/pages/exercises/brushQuestions/brushQuestions'},
	])
	
	const bottomItem = ref([
		{name: '考试简介', icon: new URL('@/static/images/theory/theoryIcon3.png', import.meta.url).href, url: ''},
		{name: '考试准备', icon: new URL('@/static/images/theory/theoryIcon2.png', import.meta.url).href, url: ''},
		{name: '考试流程', icon: new URL('@/static/images/theory/theoryIcon4.png', import.meta.url).href, url: ''},
		{name: '注意事项', icon: new URL('@/static/images/theory/theoryIcon5.png', import.meta.url).href, url: ''},
	])
	
	function changeTab(num) {
		currentTab.value = num
		usecarStore.setCar('stepType', num)
		upDataFn()
	}
	// 顺序练题
	function goAndSetCar() {
		usecarStore.setCar('types', '')
		uni.navigateTo({
			url: '/pages/exercises/brushQuestions/brushQuestions'
		})
	}
	// 选择车型
	function confirmPicker(item) {
		let value = item.value[0]
		usecarStore.setCar('carType', value.carType)
		usecarStore.setCar('carTypeName', value.title)
		show.value = false
	}
	// 请求车类型
	let show = ref(false)
	let columns = ref([])
	async function questbanktypeFn() {
		const {data: res} = await questbanktypeApi()
		columns.value = [res]
	}
	questbanktypeFn()
	
	async function upDataFn() {
		uni.showLoading({
			title: '正在加载...'
		})
		await indexNotice()
		await indexAd()
		await indexAdCountFn()
		uni.hideLoading()
	}
	
	// 消息请求
	const nodes = ref('')
	async function indexNotice() {
		const {data: res} = await indexNoticeApi(usecarStore.carInfo.stepType)
		if(res.length) {
			nodes.value = res[0].content
		}
		// console.log(res)
	}
	indexNotice()
	// 轮播图
	let bannerList = ref([])
	async function indexAd() {
		const {data: res} = await indexAdApi(usecarStore.carInfo.stepType)
		if(res.length) bannerList.value = res
		console.log(res)
	}
	indexAd()
	
	// 统计多少题目
	let adCount = ref({})
	async function indexAdCountFn() {
		const {data:res} = await indexAdCount({subject: usecarStore.carInfo.stepType, carType: usecarStore.carInfo.carType})
		adCount.value = res
	}
	
	indexAdCountFn()
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tabs {
		display: flex;
		height: 100rpx;
		width: 100%;
		justify-content: center;
		.tab {
			color: #333;
			position: relative;
			padding: 0 40rpx;
			font-weight: 400;
			flex: 1;
			text-align: center;
			&.active {
				width: 100%;
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					width: 30rpx;
					height: 4rpx;
					background: #333;
					font-weight: 700;
					border-radius: 2rpx;
					transform: translateX(-50%);
				}
			}
		}
	}
	
	.content {
		padding: 100rpx 30rpx 30rpx 30rpx;
	  .u-nav-slot {
		  .txt {
			  font-size: 28rpx;
			  margin-right: 10rpx;
		  }
	  }
	
	  .swiperBox {
	    padding-top: 20rpx;
	  }
	
	  .notice {
		padding: 18rpx;
		background: #FEF9ED;
		border-radius: 8rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		display: flex;
	    .yellowT {
			font-weight: 800;
			color: #F1AD40;
			font-style: italic;
			display: inline-block;
			white-space: nowrap;
			margin-right: 10rpx;
	    }
	
	    .txt {
			display: inline-block;
	    }
	  }
	
	  .iconBox {
		  display: flex;
		  justify-content: space-between;
		  padding: 60rpx 30rpx;
	    .iconComl {
			display: flex;
			flex-direction: column;
	      .item {
			  text-align: center;
			  margin-bottom: 40rpx;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
	        .icon {
	          width: 72rpx;
	          height: 72rpx;
			  
	        }
	
	        .text {
				font-size: 28rpx;
				margin-top: 10rpx;
	        }
	      }
	    }
	
	    .centerComl {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-bottom: 30rpx;
	      .ctItem {
			  width: 230rpx;
			  height: 230rpx;
			  background: url('../../../static/images/circular1.png') no-repeat;
			  background-size: 100% 100%;
			  border-radius: 50%;
			  // border: 10px solid;
			  // opacity: 0.1;
			  // border-image: linear-gradient(0deg, #4FACFE, #00F2FE) 10 10;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  flex-direction: column;
			  &:last-child {
				  background: url('../../../static/images/circular2.png') no-repeat;
				  background-size: 100% 100%;
				}
	        .txt {
				font-size: 32rpx;
				color: #fff;
				padding: 6rpx 0;
	        }
	      }
	    }
	  }

	  .simulatedExam {
		  background: #DFF6FF;
		  border-radius: 20rpx;
		  padding: 30rpx;
		  // margin-top: 40rpx;
	    .leftTxt {
			flex: 1;
			width: 0;
	      .h8 {
			font-weight: bold;
			font-size: 44rpx;
	      }
	
	      .text {
			font-size: 28rpx;
			margin-top: 12rpx;
	      }
	
	      .btnBox {
			  width: 188rpx;
			  height: 66rpx;
			  background: #3776FF;
			  border-radius: 33rpx;
			  display: flex;
			  justify-content: center;
			  margin-top: 30rpx;
	        .btnTxt {
				font-size: 30rpx;
				color: #FFFFFF;
	        }
	
	        .btnIcon {
	          width: 10rpx;
			  height: 12rpx;
			  margin-left: 12rpx;
	        }
	      }
	    }
	
	    .rightImg {
			width: 256rpx;
			height: 256rpx;
	      img {
	
	      }
	    }
	  }
	
	  .ul {
		  padding: 20rpx 0 0 0;
		  justify-content: space-between;
	    .li {
			width: 23%;
			height: 174rpx;
			background: linear-gradient(0deg, #FFFFFF 0%, #E5F7FF 100%);
			box-shadow: 0px 2px 2px 0px #E5F7FF;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
	      .icon {
			  width: 58rpx;
			  height: 60rpx;
			  margin: 0 auto;
	      }
	
	      .txt {
			font-weight: 500;
			font-size: 28rpx;
			margin-top: 24rpx;
			text-align: center;
	      }
	    }
	  }
	}
</style>