yichael_zhongchuang_front_2/components/student/survey.vue

<template>
	<!-- 原理认知 -->
	<view class="myComRoot ylrz-box df fdr">
		<!-- 左边导航栏 -->
		<view class="leftBox">
			<view class="df fdc leftMenu" v-for="(menu1,i) in btnList" :key="i">
				<view class="leftMenu-btn1 df fdr aic jcsb" @click="onLeftBtn1Click(i)">
					<view class=" df fdr aic ">
						<view class="leftMenu-btn1-icon df">
							<img :src="menu1.icon_btn1_unchecked"></img>
						</view>
						<view class="leftMenu-btn1-text" :style="{color:color_unchecked_01}">{{menu1.text}}</view>
					</view>
					<view class="leftMenu-btn1-arrow df">
						<img :src="arrowSrc"></img>
					</view>
				</view>
				<view class="leftMenu-btn2-box2 df fdr aic" v-for="(menu2,m) in menu1.list" :key="m" @click="onLeftBtn2Click(i,m)">
					<view class="leftMenu-btn2-icon df">
						<img :src="(checkedIndex1==i&& checkedIndex2==m)?icon_btn2_checked:icon_btn2_unchecked"></img>
					</view>
					<view class="leftMenu-btn2-text" :style="{color:(checkedIndex1==i&& checkedIndex2==m)?color_checked:color_unchecked_02}">{{menu2}}</view>
				</view>
			</view>
		</view>
		<!-- 右边详情页 -->
		<view class="rightBox">
			<!-- 学习知识点 -->
			<view class="right-content df fdc" v-show="checkedIndex1==0">
				<view v-for="(content,n) in myData_YLRZ_ZSD[checkedIndex2].content" :key="n">
					<view class="right-title df aic" v-show="content.type=='title'">
						<view class="right-title-line"></view>
						<view class="right-title-text">{{content.details}}</view>
					</view>
					<view class="right-text" v-show="content.type=='text'">{{content.details}}</view>
					<view class="right-pic df jcc" v-show="content.type=='pic'">
						<img :src="content.src"></img>
					</view>
					<view class="right-space" v-show="content.type=='space'"></view>
				</view>
				<view class="df jcc">
					<view class="right-btn-next df aic jcc" @click="onClick_next">下一步</view>
				</view>
			</view>
			<!-- 测验 -->
			<view class="ylrz-cy df" v-show="checkedIndex1==1">
				<!-- 开始测验 -->
				<view class="ylrz-cy df jcc aic" v-show="testIndex==0">
					<view class="df fdc ylrz-kscy-box">
						<view class="df fdr jcse">
							<view class="df fdc aic">
								<img src='../../assets/learning/icon_test_01.png'></img>
								<view>100%及格率</view>
							</view>
							<view class="df fdc aic">
								<img src='../../assets/learning/icon_test_02.png'></img>
								<view>无时间限制</view>
							</view>
						</view>
						<view class="ylrz-kscy-text df aic jcc">{{text_ksdt}}</view>
						<view class="df fdr jcse ylrz-kscy-btn">
							<view class="ylrz-btn-red df aic jcc" @click="onClick_ksdt">开始答题</view>
							<view class="ylrz-btn-gray df aic jcc">取消</view>
						</view>
					</view>
				</view>
				<!-- 答题 -->
				<view class="ylrz-cy-dt df fdc" v-show="testIndex==1">
					<view class="right-title df aic">
						<view class="right-title-line"></view>
						<view class="right-title-text">答题</view>
					</view>
					<!-- 问题 -->
					<view class="ylrz-test-q">
						{{(curQIndex+1)+'、'+test_YLRZ.list[curQIndex].q}}
					</view>
					<!-- 答案 -->
					<view class="ylrz-test-a-box">
						<view class="ylrz-test-a-box2">
							<view class="df aic fdr ylrz-test-a" v-for="(answer,answerI) in test_YLRZ.list[curQIndex].a_list" :key="answerI"
							 @click="onClick_test_a(answerI)">
								<img class="ylrz-test-a-img" :src="curCheckedAnswer[answerI]==1?test_answer_icon_checked:test_answer_icon_unchecked"></img>
								<view class="ylrz-test-a-text" :style="{color:curCheckedAnswer[answerI]==1?test_answer_color_checked:test_answer_color_unchecked}">
									{{test_answer_pre[answerI]+':'+answer}}
								</view>
							</view>
						</view>
					</view>
					<!-- 按钮 -->
					<view class="ylrz-test-btn-box df fdr">
						<view v-show="curQIndex>0" class="ylrz-test-btn-red df aic jcc" @click="onClick_test_last">上一题</view>
						<view v-show="curQIndex<test_YLRZ.list.length-1" class="ylrz-test-btn-red df aic jcc" @click="onClick_test_next">下一题</view>
						<view v-show="curQIndex==test_YLRZ.list.length-1" class="ylrz-test-btn-red df aic jcc" @click="onClick_test_finish">完成</view>
					</view>
					<view class="ylrz-test-btn-exit ylrz-test-btn-red df aic jcc" @click="onClick_test_exit">退出</view>
				</view>
			</view>
			<!-- 结论 -->
			<view class="ylrz-cy-jl df" v-show="checkedIndex1==2">
				<view class="ylrz-cy-dt df fdc" v-show="testIndex==1">
					<view class="right-title df aic">
						<view class="right-title-line"></view>
						<view class="right-title-text">查看错题</view>
					</view>
					<view class="df fdc" v-for="(wrong,wrongIndex) in allWrongTest" :key="wrongIndex">
						<!-- 问题 -->
						<view class="ylrz-test-q">
							{{(wrong+1)+'、'+test_YLRZ.list[wrong].q}}
						</view>
						<!-- 答案 -->
						<view class="ylrz-test-a-box">
							<view class="ylrz-test-a-box2">
								<view class="df aic fdr ylrz-test-a" v-for="(answer2,answerI2) in test_YLRZ.list[wrong].a_list" :key="answerI2">
									<img class="ylrz-test-a-img" :src="test_YLRZ.list[wrong].a[answerI2]==1?test_answer_icon_checked:allCheckedAnswer[wrong][answerI2]==1?test_answer_icon_wrong:test_answer_icon_unchecked"></img>
									<view class="ylrz-test-a-text" :style="{color:test_YLRZ.list[wrong].a[answerI2]==1?test_answer_color_checked:allCheckedAnswer[wrong][answerI2]==1?test_answer_color_wrong:test_answer_color_unchecked}">
										{{test_answer_pre[answerI2]+':'+answer2}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="ylrz-test-btn-exit ylrz-test-btn-red df aic jcc" @click="onClick_test_exit">退出</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				checkedIndex1: 0, //一级目录
				checkedIndex2: 0, //二级目录
				testIndex: 0, //0开始答题1答题
				//当前问题索引
				curQIndex: 0,
				//玩家当前选择答案0未选中，1选中
				curCheckedAnswer: [],
				//玩家选择的答案
				allCheckedAnswer: [],
				//玩家错误的题目序列号
				allWrongTest: [],

				// ------以下为静态
				arrowSrc: require('../../assets/learning/icon_ylrz_arrow.png'),
				btnList: [
					{
						"text": '测验（完成获得10分）',
						"icon_btn1_checked": require('../../assets/learning/icon_ylrz_menu_02.png'),
						"icon_btn1_unchecked": require('../../assets/learning/icon_ylrz_menu_01.png'),
						"list": ['测验']
					},
					{
						"text": '结论',
						"icon_btn1_checked": require('../../assets/learning/icon_ylrz_menu_02.png'),
						"icon_btn1_unchecked": require('../../assets/learning/icon_ylrz_menu_01.png'),
						"list": ['结论']
					}
				],
				icon_btn2_checked: require('../../assets/learning/icon_ylrz_menu_02.png'),
				icon_btn2_unchecked: require('../../assets/learning/icon_ylrz_menu_01.png'),
				color_checked: '#EA252C',
				color_unchecked_01: '#070707', //1级菜单
				color_unchecked_02: '#555555', //2级菜单
				myData_YLRZ_ZSD: [
					YLRZ_ZSD_01,
					YLRZ_ZSD_02,
					YLRZ_ZSD_03,
					YLRZ_ZSD_04
				],
				text_ksdt: '你必须正确回答所有测试问题才能完成课程。测试没有次数限制，也没有惩罚，即使你已经通过测试也可以再次回答。你可以在课程页面上的测试模块中点击“结果‘按钮查看测试结果的详细报告。',
				//原理认知测试题
				test_YLRZ: myData_test_YLRZ,
				//答案小标号
				test_answer_pre: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
				test_answer_icon_checked: require('../../assets/learning/icon_test_03_02.png'),
				test_answer_icon_unchecked: require('../../assets/learning/icon_test_03_01.png'),
				test_answer_icon_wrong: require('../../assets/learning/icon_test_03_03.png'),
				test_answer_color_checked: '#437FFA',
				test_answer_color_unchecked: '#1A1A1A',
				test_answer_color_wrong: '#EA252C',
			}
		},
		methods: {
			initData() {
				// this.checkedIndex1 = 0;
				// this.checkedIndex2 = 0;
			},
			onLeftBtn1Click(index) {
				if (index != this.checkedIndex1) {
					this.checkedIndex2 = 0;
					this.checkedIndex1 = index;
				}
			},
			onLeftBtn2Click(index1, index2) {
				this.checkedIndex1 = index1;
				this.checkedIndex2 = index2;
			},
			onClick_next() {
				if (this.checkedIndex2 < this.btnList[this.checkedIndex1].list.length - 1) {
					this.checkedIndex2 += 1;
				} else {
					if (this.checkedIndex1 + 1 < this.btnList.length) {
						this.checkedIndex1 += 1;
						this.checkedIndex2 = 0;
					} else {
						// 先空着
					}
				}
			},
			//开始答题
			onClick_ksdt() {
				this.testIndex = 1;
				this.resetTest();
			},
			resetTest() {
				//重置玩家选择的答案
				let arr = [];
				for (let i = 0; i < this.test_YLRZ.list.length; i++) {
					arr.push([]);
				}
				this.allCheckedAnswer = arr;
				this.curQIndex = 0;
				this.resetCurCheckedAnswer();
				this.allWrongTest = [];
			},
			resetCurCheckedAnswer() {
				let curChecked = []
				for (let i = 0; i < this.test_YLRZ.list[this.curQIndex].a_list.length; i++) {
					curChecked.push(0);
				}
				this.curCheckedAnswer = curChecked;
				this.allCheckedAnswer[this.curQIndex] = this.curCheckedAnswer;
			},
			onClick_test_a(answerI) {
				// console.log("点击答案");
				let answer = this.curCheckedAnswer[answerI] == 1 ? 0 : 1;
				this.curCheckedAnswer[answerI] = answer;
				this.allCheckedAnswer[this.curQIndex] = this.curCheckedAnswer;
				this.$forceUpdate();
			},
			onClick_test_last() {
				this.curQIndex--;
				this.resetCurCheckedAnswer();
			},
			onClick_test_next() {
				this.curQIndex++;
				this.resetCurCheckedAnswer();
			},
			onClick_test_finish() {
				console.log("所有答案", this.allCheckedAnswer);
				//检验一下答案
				for (let i = 0; i < this.test_YLRZ.list.length; i++) {
					let isTrue = true;
					for (let m = 0; m < this.allCheckedAnswer[i].length; m++) {
						if (this.allCheckedAnswer[i][m] != this.test_YLRZ.list[i].a[m]) {
							isTrue = false;
							this.allWrongTest.push(i);
							break;
						}
					}
				}
				console.log("检测结果为", this.allWrongTest);
				this.checkedIndex1 = 2;
			},
			onClick_test_exit() {
				this.checkedIndex1 = 1;
				this.testIndex = 0;
				this.resetTest();
			}
		}
	}
</script>

<style lang="scss">
	.ylrz-box {
		background: #F4F4F4;
	}

	.leftBox {
		background-color: #FFFFFF;
		width: px2vw(374);
		height: 100%;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		margin-top: px2vw(11);
	}

	.rightBox {
		flex: 1;
		height: 100%;
		background: #FFFFFF;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		margin-top: px2vw(11);
		margin-left: px2vw(11);
	}

	.leftMenu-btn1 {
		width: 100%;
		height: px2vw(70);
		background: #F2F2F2;
	}

	.leftMenu-btn1-icon {
		margin-left: px2vw(38);
	}

	.leftMenu-btn1-icon img {
		width: px2vw(18);
	}

	.leftMenu-btn1-text {
		margin-left: px2vw(14);
		font-size: px2vw(20);
	}

	.leftMenu-btn2-box1 {
		margin-top: px2vw(30);
		margin-bottom: px2vw(30);
	}

	.leftMenu-btn2-box2 {
		margin-left: px2vw(48);
		margin-top: px2vw(25);
	}

	.leftMenu-btn2-text {
		margin-left: px2vw(14);
		font-size: px2vw(20);
	}

	.leftMenu-btn2-icon img {
		width: px2vw(16);
	}

	.leftMenu-btn1-arrow {
		margin-right: px2vw(38);
	}

	.leftMenu-btn1-arrow img {
		width: px2vw(15);
	}

	.leftMenu {
		margin-bottom: px2vw(25);
	}

	.right-content {
		margin-top: px2vw(40);
		margin-left: px2vw(50);
		margin-bottom: px2vw(40);
		margin-right: px2vw(50);
	}

	.right-title {}

	.right-title-line {
		width: px2vw(8);
		height: px2vw(24);
		background: #EA252C;
	}

	.right-title-text {
		font-size: px2vw(24);
		margin-left: px2vw(23);
		color: #070707;
	}

	.right-text {
		font-size: px2vw(22);
		color: #020202;
		line-height: px2vw(46);
		margin-top: px2vw(40);
	}

	.right-space {
		margin-top: px2vw(50);
	}

	.right-pic {
		margin-top: px2vw(40);
	}

	.right-pic img {
		max-width: px2vw(1397);
	}

	.right-btn-next {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		margin-top: px2vw(60);
		font-size: px2vw(24);
		color: #FFFFFF;
	}

	.ylrz-kscy-box {
		width: px2vw(1000);
	}

	.ylrz-kscy-box img {
		width: px2vw(110);
	}

	.ylrz-kscy-text {
		width: px2vw(883);
		height: px2vw(130);
		background: #F4F4F4;
		border-radius: px2vw(10);
		font-size: px2vw(20);
		color: #020202;
		line-height: px2vw(41);
		padding: px2vw(20) px2vw(60) px2vw(20) px2vw(60);
		margin-top: px2vw(54);
	}

	.ylrz-kscy-btn {
		margin-top: px2vw(100);
	}

	.ylrz-btn-red {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
	}

	.ylrz-btn-gray {
		width: px2vw(200);
		height: px2vw(58);
		background: #CCCCCC;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
	}

	.ylrz-cy {
		width: 100%;
		height: 100%;
	}

	.ylrz-cy-dt {
		width: 100%;
		// height: 100%;
		margin-left: px2vw(50);
		margin-top: px2vw(50);
	}

	.ylrz-test-q {
		margin-top: px2vw(42);
		font-size: px2vw(24);
		color: #1A1A1A;
		line-height: px2vw(31);
	}

	.ylrz-test-a-box {
		width: px2vw(870);
		// height: px2vw(274);
		background: #F2F2F2;
		border-radius: px2vw(10);
		font-size: px2vw(20);
		color: #1A1A1A;
		line-height: px2vw(26);
		margin-top: px2vw(40);
	}

	.ylrz-test-a-box2 {
		margin-top: px2vw(18);
		margin-bottom: px2vw(18);
		margin-left: px2vw(30);
		margin-right: px2vw(30);
	}

	.ylrz-test-a {
		margin-top: px2vw(18);
		margin-bottom: px2vw(18);
	}

	.ylrz-test-a-img {
		width: px2vw(22);
	}

	.ylrz-test-a-text {
		margin-left: px2vw(18);
	}

	.ylrz-test-btn-box {
		margin-top: px2vw(60);
	}

	.ylrz-test-btn-red {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-right: px2vw(30);
	}

	.ylrz-test-btn-exit {
		margin-right: px2vw(47);
		position: fixed;
		align-self: flex-end;
	}
	.ylrz-cy-jl{
		margin-bottom: px2vw(60);
	}
</style>