驾考app驾考理论速成技巧驾校源码小程序驾考理论驾考科目三3D仿真灯光模拟实现

在开发驾考科目一,科目四题库系统完成后，参考市面上已有的驾考系统，新开发驾考科目三3D仿真灯光模拟微信小程序端，整个系统预览图

系统前端UNIAPP开发,后端基于微擎核心开发，支持APP,公众号，微信小程序3端
灯光模拟部分代码前端实现
操作界面布局

	<view class="quanping">
		<view class="content">

			<view @click="go_back" class="back-home" v-if="1==2" :style="back_top">
				<image mode="aspectFit" src="/static/common/images/back.png"></image>
			</view>
			<view @click="show_help" class="show-help" :style="back_top">
				<image mode="aspectFit" src="/static/images/question.png"></image>
			</view>
			<view 
				@click="time_pause" 
				:class="{'show':timeout_text>0}"
				class="timer-view" 
				:style="timeout_text_css">{{timeout_text}}</view>
			
			<view class="test-btn-list" :style="test_btn_css"> 
				<button @click="tap_practise" :class="[is_in_practise?'btn-active-md':'btn-default-md']" hover-class="btn-active-md1">{{is_in_practise?'练习中':'练习模式'}}</button>
				<button @click="tap_exam" :class="[is_in_exam?'btn-active-md':'btn-default-md']" hover-class="btn-active-md1">{{is_in_exam?'考试中':'考试模式'}}</button>
				<button @click="setquiz"  class="btn-default-md" hover-class="btn-active-md">设置题库</button>
				<button class="btn-default-md" hover-class="btn-active-md" open-type="share">分享</button>
			</view>
			
			<view class="center-bg">
				<image class="center-wall" mode="widthFix" src="/static/common/images/center-wall.png"></image>
				<image class="center-road" src="/static/common/images/center-road.png"></image>
				<image class="center-road-side" src="/static/common/images/center-road-side.png"></image>
				<image class="center-road-side" v-show="light_status.shikuandeng" src="/static/common/images/center-wall-shikuandeng.png"></image>
				<image class="center-road-side" v-show="light_status.jinguangdeng" src="/static/common/images/center-wall-jinguangdeng.png"></image>
				<image class="center-road-side" v-show="light_status.t_yuanguangdeng" src="/static/common/images/center-wall-yuanguangdeng.png"></image>
				<image class="center-road-side" v-show="light_status.qianwudeng || light_status.houwudeng" src="/static/common/images/center-wall-wudeng.png"></image>
				<image class="center-road-side" v-show="light_status.t_zuozhuandeng" src="/static/common/images/center-wall-zuozhuandeng.png"></image>
				<image class="center-road-side" v-show="light_status.t_youzhuandeng" src="/static/common/images/center-wall-youzhuandeng.png"></image>
			</view>
			
			<view class="dz-yuanguananniu">
				<view>
					<image 
						@touchstart="ts_yuanguangdeng"
						@touchend="te_yuanguangdeng"
						class="dz-dadeng-up"
						:src="dzdadengupimg">	
					</image>
					<image 
						@touchstart="ts_yuanguangdeng_mid"
						@touchend="te_yuanguangdeng_mid"
						class="dz-dadeng-mid" 
						:src="dzdadengmidimg">	
					</image>
					<view>
						<image 
							@touchstart="ts_yuanguangdeng_gt"
							@touchend="te_yuanguangdeng_gt"
							class="dz-dadeng-down" 
							:src="dzdadengdownimg">	
						</image>
					</view>
				</view>
			</view>
			
			
			<view class="cockpit">
				<image class="dizuo" mode="scaleToFill" src="/static/images/dz-dizuo.png"></image>
				<view class="ctr-list">
					<view :animation = "yaogan_animation" class="dz-yaogan-view">
						<view class="dz-yaogan-view1" :style="yaogan_width">
							<image 
								@touchstart="yaogan_start"
								@touchmove="yaogan_move"
								@touchend="yaogan_end"
								class="dz-yaogan" 
								mode="aspectFit" 
								src="/static/images/dz-yaogan.png">
							</image>
						</view>
					</view>
					<view class="dz-xuanzhuan">
						<view class="dz-xuanzhuan-bg">
							<image class="dz-anniudi" src="/static/images/dz-anniudi.png"></image>
							<view :animation = "xuanzhuan_animation"  class="dz-xuanzhuanniu">
								<image 
									@touchstart="xuanzhuan_start"
									@touchmove="xuanzhuan_move"
									@touchend="xuanzhuan_end"
									@click="xuanzhuan_click"
									class="dz-xuanzhuanniu-img" 
									:src="xuanzhuanimg">
								</image>
							</view>
						</view>
					</view>
					<image class="yibiaopan" src="/static/images/dz-yibiaopan.png"></image>
					<image class="yibiaopan" v-show="light_status.t_zuozhuandeng" src="/static/images/dz-zuozhuandeng.png"></image>
					<image class="yibiaopan" v-show="light_status.t_youzhuandeng" src="/static/images/dz-youzhuandeng.png"></image>
					<image class="yibiaopan" v-show="light_status.qianwudeng && light_status.houwudeng" src="/static/images/dz-houwudeng.png"></image>
					<image class="yibiaopan" v-show="light_status.t_yuanguangdeng" src="/static/images/dz-yuanguangdeng.png"></image>
					<image 
						@click="weixiandeng_click"
						class="dz-weixiandeng" 
						:src="weixiandengimg">
					</image>
				</view>
			</view>
			
		</view>
		
		
		
		
		
		<view @click="hide_error" class="toast-error" :style="toast_error_display">
			<view class="toast-content">
				<view class="flex-row header">
					<image mode="widthFix" src="/static/common/images/error-tips.png"></image>
					<view>操作错误</view>
				</view>
				<view 
					v-show="QA.finnaly"
					class="flex-row list-content">
					<view class="title">提醒:</view>
					<view>{{QA.Q}}</view>
				</view>
				<view 
					v-show="!QA.finnaly"
					class="flex-row list-content">
					<view class="title">题目:</view>
					<view>{{QA.Q}}</view>
				</view>
				<view 
					v-show="!QA.finnaly"
					class="flex-row list-content" >
					<view class="title">操作:</view>
					<view class="info">
						<text>{{QA.A}}</text>{{QA.OP?"（"+QA.OP+"）":""}} </view>
				</view>
				<view class="flex-row btn-list">
					<button @click.stop="once_again_error" class="btn-active-lg" hover-class="btn-active-lg1" v-if="is_in_practise&&paid">重做此题</button>
					<button @click.stop="play_yj_error" class="btn-active-lg" hover-class="btn-active-lg1" v-if="yuanguangdeng_gt_error">错误原因</button>
				</view>
			</view>
		</view>
		<view @click="hide_succ" class="toast-succ" :style="toast_succ_display">
			<view class="toast-content">
				<view class="flex-row header">
					<image mode="widthFix" src="/static/common/images/succ-tips.png"></image>
					<view>顺利通过</view>
				</view>
				<view class="flex-row succ-content" v-if="is_in_exam"> 恭喜您通过了本次科目三灯光考试模式，您平时可以多加练习，确保对所有题目和考试流程能够熟练掌握，候考的时候还可以拿出手机再练习一下，很方便哦，祝您考试顺利！</view>
				<view class="flex-row succ-content" v-else> 恭喜您已经一次性做对了所有的练习题目，现在您可以点击“考试模式”去检验一下自己对考题的掌握程度，系统每次会随机从考题中抽取{{question_config.randomQuestionNum}}道题目进行考试模式，快去试试吧！</view>
			</view>
		</view>
		
		
		
		<view 
			v-show = "showHelp"
			@click="show_help" class="help-image">
			<button @click.stop="show_help" class="back-home">
				<image mode="aspectFit" src="/static/common/images/back.png"></image>
			</button>
			<image @click.stop="show_help_video" class="video-btn" mode="widthFix" src="/static/help/video_hanyu.png"></image>
			<image class="bg" mode="aspectFill" src="/static/help/dazhong_hanyu.jpg"></image>
			<view 
				v-show = "showHelpVideo"
				@click.stop="videowrapper" 
				class="video-wrapper" 
				>
				<view class="video-content">
					<video 
						id="helpVideo"
						:controls="true" 
						:showCenterPlayBtn="false" 
						:showFullscreenBtn="false" 
						:showPlayBtn="true"
						src="http://www.ailaopo.top/dazhong.mp4"></video>
				</view>
				<image @click="show_help_video" class="close" mode="widthFix" src="/static/help/close_f.png"></image>
			</view>
		</view>
	
	</view>
//部分功能函数实现
<script>

			tap_practise(){
				let i = this.is_in_practise;
				if(!this.is_in_practise){
					if(this.questionlistUser.length<5){
						//设置题库
						uni.navigateTo({
							url:"/pages/quiz/quiz"
						})
					}else{
						this.playButton();
						this.reset_page();
						this.reset_light_status();
						this.is_in_practise = true;
						this.is_in_exam = false;
						this.generate_quiz();
						this.execute_quiz();
					}
				}else{
					this.reset_page();
					this.reset_light_status();
					this.is_in_practise = false;
					this.is_in_exam = false;
					this.toast_error_display = "display:none";
					this.toast_succ_display = "display:none";
					this.yuanguangdeng_gt_error = false;
					this.test_btn_css = "width: 21.86667vmin";
				}

			},
			
			hide_error(){
				let t = this;
				//this.yj_error_audio.stop(), 
				this.reset_page();
				this.reset_light_status();
				this.toast_error_display = "display:none";
				this.yuanguangdeng_gt_error = false;
				this.test_btn_css = "width: 21.86667vmin";
			},
			once_again_error(){
				this.toast_error_display = "display:none";
				this.toast_succ_display  = "display:none";
				this.yuanguangdeng_gt_error = false;
				this.stopAudio();
				this.execute_quiz(this.current_test);
			},
			play_yj_error(){
				this.stopAudio();
				this.playYjError();
			},
			hide_succ(){
				
				let t = this;
				this.reset_page();
				this.reset_light_status();
				this.is_in_practise = false;
				this.is_in_exam = false;
				this.toast_succ_display = "display:none";
				this.yuanguangdeng_gt_error = false;
				this.test_btn_css = "width: 21.86667vmin";
			}
</script>