You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
11 KiB
418 lines
11 KiB
<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">考试次数：{{ examInfo.accumulate }}次</view>
|
|
<view class="text">预测通过率：{{ examInfo.exampassRate}}%</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, idexExam} 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()
|
|
await idexExamFn()
|
|
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()
|
|
|
|
// 模拟考试通过率
|
|
let examInfo = ref({})
|
|
async function idexExamFn() {
|
|
const {data:res} = await idexExam({stepType: usecarStore.carInfo.stepType, carType: usecarStore.carInfo.carType})
|
|
examInfo.value = res
|
|
}
|
|
idexExamFn()
|
|
|
|
</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>
|