questionbankvue3/pages/exercises/examIntroduction/examIntroduction.vue

<template>
	<view class="content">
		<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" :fixed="false"
			:bgColor="'transparent'" title="考试" :titleStyle="{color: '#fff'}"></up-navbar>
		<view class="padding">

			<view class="tabs flex-b">
				<view class="btn" @click="changeNav(item, index)" :class="{active: currentNav==index}"
					v-for="(item,index) in tabData" :key="index">{{ item.name }}</view>
			</view>

			<view class="card">
				<view class="title">
					<view class="titlebg">{{ tabData[currentNav]?.name }}</view>
				</view>
				<!-- <tab1 v-if="currentNav=='考试简介'"/>
				<tab2 v-if="currentNav=='考试流程'"/>
				<tab3 v-if="currentNav=='考试准备'"/>
				<tab4 v-if="currentNav=='注意事项'"/> -->
				
				<!-- <rich-text :nodes="nodes"></rich-text> -->
				<u-parse :content="nodes" :tagStyle="style"></u-parse>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import carStore from '@/store/modules/car.js'
	let usecarStore = carStore()
	import { examProcessInfo } from '@/config/api.js'
	import {
		ref
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	import tab1 from './comp/tab1.vue'
	import tab2 from './comp/tab2.vue'
	import tab3 from './comp/tab3.vue'
	import tab4 from './comp/tab4.vue'
	const value = ref(false)
	const currentNav = ref(0)
	const nodes = ref('')
	function changeNav(val, index) {
		currentNav.value = index
		console.log(index)
		console.log(dataList.value[index])
		nodes.value = dataList.value[index]?dataList.value[index].content: '<p>暂无内容</p>'
	}
	let style = {
					img: 'max-width:100%;height:auto',
					p: 'font-size:32rpx',
				}
	onLoad((option) => {
		if (option.tab) currentNav.value = option.tab
		examProcessInfoFn()
	})
	const tabData = ref([{
			name: '考试简介',
			id: 0
		},
		{
			name: '考试准备',
			id: 1
		},
		{
			name: '考试流程',
			id: 2
		},
		{
			name: '注意事项',
			id: 3
		},
	])
	 
	const dataList = ref([])
	async function examProcessInfoFn() {
		const {data:res} = await examProcessInfo( usecarStore.carInfo.stepType)
		if(!res.length) return
		dataList.value = res
		nodes.value = res[currentNav.value]?res[currentNav.value].content: '<p>暂无内容</p>'
	}
	
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		padding: 20rpx 0 10rpx 0;

		.btn {
			color: #fff;
			position: relative;

			// padding: 0 20rpx;
			&.active {
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					width: 40rpx;
					height: 6rpx;
					background: #F6F7F8;
					border-radius: 3rpx;
					transform: translateX(-50%);
				}
			}
		}
	}

	.content {
		width: 100%;
		// background-color: #F6F7FA;
		min-height: 100vh;
		// padding: 0rpx 30rpx 30rpx 30rpx;
		padding-bottom: 30rpx;
		background: url('../../../static/images/bigImg/exambg.png') #F6F7FA no-repeat;
		background-size: 100% 800rpx;

		.card {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 30rpx 30rpx 30rpx;
			margin-top: 50rpx;

			.title {
				height: 116rpx;
				display: flex;
				justify-content: center;

				.titlebg {
					width: 260rpx;
					height: 70rpx;
					font-weight: bold;
					font-size: 36rpx;
					background: url('../../../static/images/greetab.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
				}
			}
		}
	}
</style>