JiangxiMiniProgram/pages/indexEntry/parse/parse.vue

<template>
	<view class="main">
		<view class="tit">
			第 {{step}} {{title}}
		</view>
		<view class="address" @click="$goPage('/pages/indexInner/experienceCenter/experienceCenter')" v-if="step==2">查看体检地点</view>
		<u-tabs :list="list" :is-scroll="false" :current="currentTab" @change="change" inactive-color="#999" :bold="false" style="margin-bottom: 20rpx;" v-if="step==6"></u-tabs>
		<u-parse :html="content"></u-parse>
		<view class="footerBtn">
			<view class="" v-for="(item,index) in curTtnText" :key="index" class="btn" @click="changeStep(item.step)">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	import { getDriveProcessDetails } from '@/config/api.js'; // 引入
	export default {
		data() {
			return {
				content: '',
				content1: '',
				content2: '',
				contentTemp: '',
				step: 1,
				title: '',
				btnText: [
					[{text:'回到首页',step: 0}, {text: '体检', step: 2}],
					[{text:'选择驾校',step: 1}, {text: '面签', step: 3}],
					[{text:'体检',step: 2}, {text: '报名缴费', step: 4}],
					[{text:'面签',step: 3}, {text: '理论学习', step: 5}],
					[{text:'面签',step: 3}, {text: '实操培训', step: 6}],
					[{text:'理论学习',step: 5}, {text: '安全文明考试(科目四)', step: 7}],
					[{text:'实操培训',step: 6}, {text: '拿证', step: 8}],
					[{text:'科目四',step: 7}, {text: '回到首页', step: 0}],
				],
				list: [{
						name: '模拟训练'
					}, {
						name: '科目二'
					}, {
						name: '科目三',
					}],
					currentTab: 0
			}
		},
		computed: {
			curTtnText(val) {
				if(val) {
					return this.btnText[this.step-1]
				}
			}
		},
		onLoad(options) {
			// this.step = options.index*1 + 1
			this.CarLearningTraining()
		},
		methods: {
			change(index) {
				this.currentTab = index
				let arr = [this.contentTemp,this.content1,this.content2]
				this.content = arr[index]
			},
			// 学车培训
			async CarLearningTraining() {
				const res = await getDriveProcessDetails({driveProcessId: this.step})
				if(this.step==6) {
					this.content1 = res.data.content1
					this.content2 = res.data.content2
					this.contentTemp = res.data.content
				}
				if(res.data.content) {
					this.content = res.data.content
					this.title = res.data.title
				}
				console.log(res)
			},
			changeStep(step) {
				this.step = step
				if(!this.step) {
					uni.switchTab({
						url: '/pages/tabbar/index/index'
					})
					return
				}
				this.CarLearningTraining()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 32rpx 120rpx 32rpx;
		min-height: 100vh;
		background: #fff;
	}
	.tit {
		width: 100%;
		text-align: center;
		padding: 20rpx 0 36rpx 0;
		font-size: 32rpx;
	}
	.footerBtn {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		.btn {
			flex: 1;
			white-space: normal;
			font-size: 28rpx;
			background-color: $themC;
			color: #fff;
			display: inline-block;
			text-align: center;
			line-height: 82rpx;
			text-align: center;
			&:first-child {
				border-right: 2px solid #fff;
			}
		}
	}
	.address {
		font-size: 28rpx;
		color: #1989FA;
		text-align: center;
		padding: 0 0 10rpx 0;
		position: relative;
		top: -10rpx;
		
	}
</style>