zc_saas_h5/pages2/bank/questionBankTest.vue

<template>
	<view id="questionBank">
		<swiper class="swiper" :current="current" @change="swiperChange" :interval="interval">
			<swiper-item v-for="(bank,bankIndex) in questionList" :key="bankIndex">
				<view class="pageContent">
					<view class="pad_8 titBox" >
						<view class="firstLetter">
							<view class="leftLetters">
								<view class="btnType">
									<text v-if="bank.type==1">单选</text>
									<text v-if="bank.type==2">多选</text>
									<text v-if="bank.type==3">判断</text>
									<text v-if="bank.type==4">案例题</text>
									<text v-if="bank.type==5">简答题</text>
								</view>
								<text>1/{{current}}</text>
							</view>
							<view style="color: #666;font-size: 28rpx;">03:25:06</view>
							<view class="leftLetters"></view>
						</view>
						<view class="titles">
							<rich-text :nodes="bank.content"></rich-text>
						</view>		
					</view>
					<view class="pad_8 titBox">
						<template v-if="bank.type == 1">
							<view v-if="!ques[bankIndex]">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty" @click="radioSelect" :data-index="index" :data-bindex="bankIndex" :data-optionsId="item.optionsId">
									<view class="activeTI">{{ ast[index] }}</view>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="ques[bankIndex]">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
									<text :class="{right:(item.optionsId == ques[bankIndex]) || (item.optionsId == ans[bankIndex]),wrong:(item.optionsId == ques[bankIndex]) && (ques[bankIndex] != ans[bankIndex])}"  class="activeTI">{{ ast[index] }}</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view> 
							<view v-if="ques[bankIndex]">
								<view class="pad_8 answer">
									<view>正确答案：{{ast[ans[bankIndex]-1]}}</view>
									<view>我的答案：{{ast[ques[bankIndex]-1]}}</view>
								</view>
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent">
										<rich-text :nodes="bank.analysisContent"></rich-text>
									</view>
								</view>
							</view>
						</template>
						
						<template v-if="bank.type == 2">
							<view v-if="!ques[bankIndex]">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty" @click="checkboxSelect" :data-index="index" :data-bindex="bankIndex" :data-optionsId="item.optionsId">
									<view :class="{checked:item.checked}" class="activeTI">{{ ast[index] }}</view>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="!ques[bankIndex]" class="submit_checkbox" @click="checkboxSubmit" :data-bindex="bankIndex">
								确认答案
							</view>
							<view v-if="ques[bankIndex]">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
									<text :class="{right:(ques[bankIndex].indexOf(item.optionsId) != -1 ) || (ans[bankIndex].indexOf(item.optionsId) != -1),wrong:(ques[bankIndex].indexOf(item.optionsId) != -1 ) && (ans[bankIndex].indexOf(item.optionsId) == -1)}"  class="activeTI">{{ ast[index] }}</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view> 
							<view v-if="ques[bankIndex]">
								<view class="pad_8 answer">
									<view>正确答案：
										<text v-for="ansItem in ans[bankIndex]">{{ast[ansItem-1]}}</text>
									</view>
									<view>我的答案：
										<text v-for="quesItem in ques[bankIndex]">{{ast[quesItem-1]}}</text>
									</view>
								</view>
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent">
										<rich-text :nodes="bank.analysisContent"></rich-text>
									</view>
								</view>
							</view>
						</template>
						
						<template v-if="bank.type == 3">
							<view v-if="!ques[bankIndex]">
								<view v-for="(item, index) in judge" :key="index" class="lisSty" @click="judgeSelect" :data-index="index" :data-bindex="bankIndex" >
									<view class="activeTI">{{ ast[index] }}</view>
									{{ item }}
								</view>
							</view>
							<view v-if="ques[bankIndex]">
								<view v-for="(item, index) in judge" :key="index" class="lisSty">
									<text :class="{right:(index == ques[bankIndex]) || (index == ans[bankIndex]),wrong:(index == ques[bankIndex]) && (ques[bankIndex] != ans[bankIndex])}"  class="activeTI">{{ ast[index] }}</text>
									{{ item }}
								</view>
							</view> 
							<view v-if="ques[bankIndex]">
								<view class="pad_8 answer">
									<view>正确答案：{{ast[ans[bankIndex]]}}</view>
									<view>我的答案：{{ast[ques[bankIndex]]}}</view>
								</view>
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent">
										<rich-text :nodes="bank.analysisContent"></rich-text>
									</view>
								</view>
							</view>
						</template>
						
						
						<!-- 简答题 -->
						<template v-if="bank.type == 5">
							<view class="ans">
								<view class="ans_input" v-if="!ques[bankIndex]">
									<view class="top flex">
										<image :data-index="bankIndex" class="icon" :data-bindex="bankIndex" @click="chooseImg" src="/static/08-10_032.jpg" mode=""></image>
										<view class="progress">0/4</view>
										<view class="submit"  @click="submitAns" :data-bindex="bankIndex" >确认答案</view>
									</view>
									<view class="textarea">
										<textarea v-model="bank.ansText.text" placeholder="在此输入答案"></textarea>
									</view>
									<view class="imgs">
										<view class="img" v-for="(img,imgIndex) in bank.ansText.imageList" >
											<text @click="deleteImg" :data-imgIndex="imgIndex" :data-bindex="bankIndex">x</text>
											<image :src="img"></image>
										</view>
									</view>
								</view>
								<view class="ans_submit answerInfos" v-if="ques[bankIndex]">
									<view class="answerTitle">答案我的</view>
									{{ques[bankIndex].text}}
									<view class="imgs">
										<image class="img" v-for="ques in ques[bankIndex].imageList" :src="ques"></image>
									</view>
								</view>
							</view>
							<view v-if="ques[bankIndex]">
								<view class="pad_8 answerInfos">
									<view class="answerTitle">答案解析</view>
									<view class="answerContent">
										<rich-text :nodes="bank.analysisContent"></rich-text>
									</view>
								</view>
							</view>
						</template>
						
						<!-- 案例题 -->
						<template v-if="bank.type == 4">
							<view class="tabs">
								<view class="tab" :class="{current:tabIndex == bank.current}" :data-bindex="bankIndex" :data-index="tabIndex" :key="tabIndex" v-for="(tab,tabIndex) in bank.jsonStr" @click="tabSelect">问题{{tabIndex}}</view>
							</view>
							<view v-for="(ansItem,ansIndex) in bank.jsonStr" v-if="bank.current == ansIndex" :key="ansIndex">
								<view class="titles">
									<rich-text :nodes="ans.content"></rich-text>
								</view>
								<template v-if="ansItem.type == 1">
									<view v-if="!ques[bankIndex][ansIndex]">
										<view v-for="(option, childIndex) in ansItem.optionsList" :key="childIndex" class="lisSty" @click="radioSelectChild" :data-ansIndex="ansIndex" :data-bindex="bankIndex" :data-optionsId="option.optionsId">
											<view class="activeTI">{{ ast[childIndex] }}</view>
											<rich-text class="textChild" :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="ques[bankIndex][ansIndex]">
										<view v-for="(option, childIndex) in ansItem.optionsList" :key="index" class="lisSty">
											<text :class="{right:(option.optionsId == ques[bankIndex][ansIndex]) || (option.optionsId == ans[bankIndex][ansIndex]),wrong:(option.optionsId == ques[bankIndex][ansIndex]) && (ques[bankIndex][ansIndex] != ans[bankIndex][ansIndex])}"  class="activeTI">{{ ast[childIndex] }}</text>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view> 
									<view v-if="ques[bankIndex][ansIndex]">
										<view class="pad_8 answer">
											<view>正确答案：{{ast[ans[bankIndex][ansIndex]-1]}}</view>
											<view>我的答案：{{ast[ques[bankIndex][ansIndex]-1]}}</view>
										</view>
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent">
												<rich-text :nodes="option.analysisContent"></rich-text>
											</view>
										</view>
									</view>
								</template>
								
								<template v-if="ansItem.type == 2">
									<view v-if="!ques[bankIndex][ansIndex]">
										<view v-for="(option, childindex) in ansItem.optionsList" :key="childindex" :data-childindex="childindex" class="lisSty" @click="checkboxSelectChild" :data-ansIndex="ansIndex" :data-bindex="bankIndex" :data-optionsId="ans.optionsId">
											<view :class="{checked:option.checked}" class="activeTI">{{ ast[childindex] }}</view>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="!ques[bankIndex][ansIndex]" :data-ansindex="ansIndex" class="submit_checkbox" @click="checkboxSubmitChild" :data-bindex="bankIndex">
										确认答案
									</view>
									<view v-if="ques[bankIndex] && ques[bankIndex][ansIndex]">
										<view v-for="(option, childindex) in ansItem.optionsList" :key="childindex" class="lisSty">
											<text :class="{right:right(bankIndex,ansIndex,option),wrong:wrong(bankIndex,ansIndex,option)}"  class="activeTI">{{ ast[childindex] }}</text>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view> 
									<view v-if="ques[bankIndex][ansIndex]">
										<view class="pad_8 answer">
											<view>正确答案：
												<text v-for="ansItem1 in ans[bankIndex][ansIndex]">{{ast[ansItem1-1]}}</text>
											</view>
											<view>我的答案：
												<text v-for="quesItem in ques[bankIndex][ansIndex]">{{ast[quesItem-1]}}</text>
											</view>
										</view>
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent">
												<rich-text :nodes="ansItem.analysisContent"></rich-text>
											</view>
										</view>
									</view>
								</template>
								
								<template v-if="ansItem.type == 3">
									<view v-if="!ques[bankIndex][ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty" @click="judgeSelectChild" :data-ansIndex="ansIndex" :data-childindex="childindex" :data-bindex="bankIndex" >
											<view class="activeTI">{{ ast[childindex] }}</view>
											{{ option }}
										</view>
									</view>
									<view v-if="ques[bankIndex][ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty">
											<text :class="{right:(childindex == ques[bankIndex][ansIndex]) || (childindex == ans[bankIndex][ansIndex]),wrong:(childindex == ques[bankIndex][ansIndex]) && (ques[bankIndex][ansIndex] != ans[bankIndex][ansIndex])}"  class="activeTI">{{ ast[childindex] }}</text>
											{{ option }}
										</view>
									</view> 
									<view v-if="ques[bankIndex][ansIndex]">
										<view class="pad_8 answer">
											<view>正确答案：{{ast[ans[bankIndex][ansIndex]]}}</view>
											<view>我的答案：{{ast[ques[bankIndex][ansIndex]]}}</view>
										</view>
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent">
												<rich-text :nodes="ansItem.analysisContent"></rich-text>
											</view>
										</view>
									</view>
								</template>
								
								
								<!-- 简答题 -->
								<template v-if="ansItem.type == 5">
									<view class="ans">
										<view class="ans_input" v-if="!ques[bankIndex][ansIndex]">
											<view class="top flex">
												<image :data-ansindex="ansIndex" class="icon" :data-bindex="bankIndex" @click="chooseImgChild" src="/static/08-10_032.jpg" mode=""></image>
												<view class="progress">0/4</view>
												<view class="submit"  @click="submitAnsChild" :data-ansindex="ansIndex" :data-index="ansIndex" :data-bindex="bankIndex" >确认答案</view>
											</view>
											<view class="textarea">
												<textarea v-model="ansItem.ansText.text" placeholder="在此输入答案"></textarea>
											</view>
											<view class="imgs">
												<view class="img" v-for="(img,imgIndex) in ansItem.ansText.imageList" >
													<text @click="deleteImgChild" :data-imgIndex="imgIndex" :data-ansindex="ansIndex"  :data-bindex="bankIndex">x</text>
													<image :src="img"></image>
												</view>
											</view>
										</view>
										<view class="ans_submit answerInfos" v-if="ques[bankIndex][ansIndex]">
											<view class="answerTitle">答案我的</view>
											{{ques[bankIndex][ansIndex].text}}
											<view class="imgs">
												<image class="img" v-for="ques in ques[bankIndex][ansIndex].imageList" :src="ques"></image>
											</view>
										</view>
									</view>
									<view v-if="ques[bankIndex][ansIndex]">
										<view class="pad_8 answerInfos">
											<view class="answerTitle">答案解析</view>
											<view class="answerContent">
												<rich-text :nodes="ansItem.analysisContent"></rich-text>
											</view>
										</view>
									</view>
								</template>
								
								
							</view>
						</template>
						
						
					</view>
					
					
				</view>
			</swiper-item>
		</swiper>
		
		<view class="footer_btn">
			<view @click="collect">收藏</view>
			<view @click="openFooterTab">答题卡</view>
			<view @click="submit">交卷</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" height="680rpx">
			<view class="popupView">
				<view class="popupTops">
					<view class="topIcon"></view>
					点击编号即可跳转至对应题目
				</view>
				<view class="popupContent">
					<scroll-view scroll-y="true" style="height: 506rpx;">
						<view class="boxSty">
							<view v-for="(item, index) in questionList" :key="index" :data-index="index" @click="changeIndex" :class="{isRight:isRight(item,index),isWrong:isWrong(item,index)}" class="liListSty">{{ index + 1 }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		
		<view class="dialog" v-if="showDialog">
			<view class="text">左右滑动切换上下题</view>
			<view class="btn" @click="hideDialog">我知道了</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id:'',
			current:0,
			questionList:[],
			ast: ['A', 'B', 'C', 'D','E','F','G'],
			judge:['错误','正确'],
			ans:[],
			ques:[],
			show: false,
			showDialog:true,
			bankList: []
		};
	},
	onLoad(option){
		this.id = option.id;
		this.goodsQuestionList()
	},
	methods: {
		goodsQuestionList() {
			this.$api.goodsQuestionList({
				examId:this.id
			}).then(res => {
				console.log(res)
				res.data.data.forEach((item,index) => {
					item.jsonStr = JSON.parse(item.jsonStr)
					
					if(item.type == 2) { //多选
						item.jsonStr.forEach(str => {
							str.optionsId = ''+str.optionsId;
						})
						let arr = item.answerQuestion.split(',');
						arr.forEach((a,i) => {
							arr[i] = ''+a;
						})
						this.$set(this.ans,index,arr);
						return;
					} else if(item.type == 5) {
						item.ansText = {
							text: '',
							imageList: []
						}
						
					} else if(item.type == 4) {
						console.log(item.jsonStr)
						this.$set(this.ques,index,[])
						item.current = 0;
						let ansArr = []; 
						item.jsonStr.forEach((json,index) => {
							if(json.type == 1) {
								ansArr[index] = json.answerQuestion;
							} else if(json.type == 2) {
								json.optionsList.forEach(str => {
									str.optionsId = ''+str.optionsId;
								})
								let arr = json.answerQuestion.split(',');
								arr.forEach((a,i) => {
									arr[i] = ''+a;
								})
								ansArr[index] = arr
							} else if(json.type == 3) {
								ansArr[index] = json.answerQuestion;
							} else if(json.type == 5) {
								ansArr[index] = {
									text: '',
									imageList: []
								}
								json.ansText = {
									text: '',
									imageList: []
								}
							}
						})
						
						
						this.$set(this.ans,index,ansArr);
						return;
						
					}
					
					this.$set(this.ans,index,item.answerQuestion);
				})
				
				this.questionList = res.data.data;
				
			})
		},
		/**
		 * @param {Object} e单选点击
		 */
		radioSelect(e) {
			let optionsId = e.currentTarget.dataset.optionsid;
			let bindex = e.currentTarget.dataset.bindex;
			if(this.ques[bindex]) return;
			this.$set(this.ques,bindex,optionsId)
		},
		
		/**
		 * @param {Object} e单选点击
		 */
		radioSelectChild(e) {
			console.log(e.currentTarget.dataset)
			let optionsId = e.currentTarget.dataset.optionsid;
			
			let ansIndex = e.currentTarget.dataset.ansindex;
			let bindex = e.currentTarget.dataset.bindex;
			if(this.ques[bindex][ansIndex]) return;
			this.$set(this.ques[bindex],ansIndex,optionsId)
			
		},
		
		
		/**
		 * @param {Object} 多选点击
		 */
		checkboxSelect(e) {
			let optionsId = e.currentTarget.dataset.optionsid;
			let bindex = e.currentTarget.dataset.bindex;
			let index = e.currentTarget.dataset.index;
			
			this.$set(this.questionList[bindex].jsonStr[index],'checked',!this.questionList[bindex].jsonStr[index].checked)
		},
		
		/**
		 * @param {Object} 多选点击
		 */
		checkboxSelectChild(e) {
			let optionsId = e.currentTarget.dataset.optionsid;
			let bindex = e.currentTarget.dataset.bindex;
			let ansIndex = e.currentTarget.dataset.ansindex;
			let childIndex = e.currentTarget.dataset.childindex;
			
			this.$set(this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex],'checked',!this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex].checked)
		},
		
		/**
		 * @param {Object} 多选确认
		 */
		checkboxSubmit(e) {
			let bindex = e.currentTarget.dataset.bindex;
			
			if(this.ques[bindex]) return;
			let arr = [];
			this.questionList[bindex].jsonStr.forEach(item => {
				console.log(item)
				if(item.checked) {
					arr.push(item.optionsId)
				}
			})
			
			this.$set(this.ques,bindex,arr)
		},
		
		/**
		 * @param {Object} 多选确认
		 */
		checkboxSubmitChild(e) {
			let bindex = e.currentTarget.dataset.bindex;
			let ansIndex = e.currentTarget.dataset.ansindex;
			
			if(this.ques[bindex][ansIndex]) return;
			let arr = [];
			this.questionList[bindex].jsonStr[ansIndex].optionsList.forEach(item => {
				if(item.checked) {
					arr.push(item.optionsId)
				}
			})
			
			this.$set(this.ques[bindex],ansIndex,arr)
		},
		
		judgeSelect(e) {
			let index = e.currentTarget.dataset.index;
			let bindex = e.currentTarget.dataset.bindex;
			if(this.ques[bindex]) return;
			this.$set(this.ques,bindex,index+'')
		},
		
		judgeSelectChild(e) {
			let ansindex = e.currentTarget.dataset.ansindex;
			let childindex = e.currentTarget.dataset.childindex;
			let bindex = e.currentTarget.dataset.bindex;
			if(this.ques[bindex][ansindex]) return;
			this.$set(this.ques[bindex],ansindex,childindex+'')
		},
		
		openFooterTab() {
			this.show = true;
		},
		hideDialog() {
			this.showDialog = false
		},
		changeIndex(e) {
			let index = e.currentTarget.dataset.index
			// if(index >= 5) {
			// 	uni.showToast({
			// 	    title: '返回详情购买后即可继续',
			// 	    duration: 2000,
			// 		icon:'none'
			// 	});
			// 	return;
			// }
			
			this.current = e.currentTarget.dataset.index
		},
		
		swiperChange(e) {
			this.current = e.detail.current;
		},
		
		submit() {
			uni.showToast({
			    title: '不能试做返回详情购买后即可交卷~',
			    duration: 2000,
				icon:'none'
			});
			return;
		},
		
		collect() {
			uni.showToast({
			    title: '返回详情购买后即可收藏~',
			    duration: 2000,
				icon:'none'
			});
			return;
		},
		
		click(e) {
			if(this.ques[this.current]) return;
			let value = e.currentTarget.dataset.value;
			this.ques[this.current] = value;
			this.ques = Object.assign({},this.ques)
			
		},
		
		deleteImg(e) {
			
			var imgIndex = e.currentTarget.dataset.imgindex;
			var bankIndex = e.currentTarget.dataset.bankindex;
			
			this.questionList[bankIndex].ansText.imageList.splice(imgIndex,1)
		},
		
		
		deleteImgChild(e) {
			
			var imgIndex = e.currentTarget.dataset.imgindex;
			var bankIndex = e.currentTarget.dataset.bankindex;
			var ansIndex = e.currentTarget.dataset.ansindex;
			
			this.questionList[bankIndex].jsonStr[ansIndex].ansText.imageList.splice(imgIndex,1)
		},
		
		chooseImg(e) {
			console.log(e.currentTarget.dataset)
			let bankindex = e.currentTarget.dataset.bindex;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', ], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: (res) => {
					// console.log(JSON.stringify(res.tempFilePaths));
					
					this.questionList[bankindex].ansText.imageList.push(res.tempFilePaths)
				}
			})
		},
		
		chooseImgChild(e) {
			let bankindex = e.currentTarget.dataset.bindex;
			let ansindex = e.currentTarget.dataset.ansindex;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', ], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: (res) => {
					// console.log(JSON.stringify(res.tempFilePaths));
					
					console.log(this.questionList[bankindex].jsonStr[ansindex])
					
					this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.push(res.tempFilePaths)
				}
			})
		},
		
		submitAns(e) {
			let type = e.currentTarget.dataset.type;
			let bankindex = e.currentTarget.dataset.bindex;
				
			console.log(this.questionList[bankindex])
			if(!this.questionList[bankindex].ansText.text && !this.questionList[bankindex].ansText.imageList.length) {
				uni.showToast({
					title: '请输入内容或上传图片',
					duration: 2000,
					icon:'none'
				});
				return
			}
			
			this.$set(this.ques,bankindex,{
				imageList:this.questionList[bankindex].ansText.imageList,
				text:this.questionList[bankindex].ansText.text,
			})
			
		},
		
		submitAnsChild(e) {
			let type = e.currentTarget.dataset.type;
			let bankindex = e.currentTarget.dataset.bindex;
			let ansindex = e.currentTarget.dataset.ansindex;
				
			if(!this.questionList[bankindex].jsonStr[ansindex].ansText.text && !this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.length) {
				uni.showToast({
					title: '请输入内容或上传图片',
					duration: 2000,
					icon:'none'
				});
				return
			}
			
			this.$set(this.ques[bankindex],ansindex,{
				imageList:this.questionList[bankindex].jsonStr[ansindex].ansText.imageList,
				text:this.questionList[bankindex].jsonStr[ansindex].ansText.text,
			})
			
		},
		
		isRight(item,index) {
			//单选
			if(this.ques[index]) {
				if(item.type == 1) {
					return this.ques[index] == this.ans[index];
				//多选
				} else if(item.type == 2) {
					//每一项都相等
					return this.ques.every((item,index) => {
						return item == this.ans[index];
					})
				//判断
				} else if(item.type == 3) {
					return this.ques[index] == this.ans[index];
				} else {
					return false;
				}
			} else {
				return false;
			}
			
		},
		
		
		right(bankIndex,ansIndex,option) {
			console.log(this.ques[bankIndex][ansIndex] || this.ans[bankIndex][ansIndex] )
			if(this.ques[bankIndex][ansIndex] && this.ans[bankIndex][ansIndex]) {
				
				if((this.ques[bankIndex][ansIndex].indexOf(option.optionsId) != -1 ) || (this.ans[bankIndex][ansIndex].indexOf(option.optionsId) != -1)) {
					return true
				} else {
					return false;
				}
			} else {
				return false;
			}
			
		},
		
		wrong(bankIndex,ansIndex,option) {
			console.log(this.ques[bankIndex][ansIndex] || this.ans[bankIndex][ansIndex] )
			if(this.ques[bankIndex][ansIndex] && this.ans[bankIndex][ansIndex]) {
				
				if((this.ques[bankIndex][ansIndex].indexOf(option.optionsId) != -1 ) && (this.ans[bankIndex][ansIndex].indexOf(option.optionsId) == -1)) {
					return true;
				} else {
					return false;
				}
			} else {
				return false;
			}
		},
		
		isWrong(item,index) {
			if(this.ques[index]) {
				//单选
				if(item.type == 1) {
					return this.ques[index] != this.ans[index];
				//多选
				} else if(item.type == 2) {
					//每一项都相等
					return this.ques.some((item,index) => {
						return item != this.ans[index];
					})
				//判断
				} else if(item.type == 3) {
					return this.ques[index] != this.ans[index];
				} else {
					return false;
				}
			} else {
				return false;
			}
			
		},
		
		tabSelect(e) {
			let index = e.currentTarget.dataset.index;
			let bankindex = e.currentTarget.dataset.bindex;
			
			this.$set(this.questionList[bankindex],'current',index)
			
			console.log(this.questionList[bankindex])
		}
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	width:100%;
	height:100vh;
}
.lisSty {
	margin-bottom: 16rpx;
	display: flex;
	
	.flex_auto {
		flex:1;
	}
}
.activeTI {
	vertical-align: middle;
	display: inline-block;
	border: 1rpx solid #eee;
	border-radius: 50rpx;
	height: 48rpx;
	line-height: 46rpx;
	text-align: center;
	width: 48rpx;
	margin-right: 15rpx;
	color: #666;
	font-size: 30rpx;
	
	
	&.right {
		color:#fff;
		background:green;
	}
	
	&.wrong {
		color:#fff;
		background:red;
	}
	
	&.checked {
		color:#fff;
		background:blue;
	}
}

.submit_checkbox {
	margin:20rpx auto;
	width: 526rpx;
	height: 80rpx;
	background: rgba(0, 122, 255, 1);
	color:#fff;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
	border-radius: 40rpx;
}
.titles {
	overflow: hidden;
	margin-bottom: 24rpx;
}
.titBox {
	padding: 41rpx 25rpx 24rpx 25rpx;
}

.tabs {
	margin:10rpx;
	display: flex;
	.tab {
		margin:0 10rpx;
		width: 96rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color:#007AFF;
		font-size: 28rpx;
		border-radius: 16rpx;
		
		&.current {
			color:#fff;
			background: #007AFF;
		}
	}
}

.ans {
	margin:8rpx 8rpx 8rpx;
	
	.ans_input {
	    border-radius: 16rpx;
		background:#fff;
		.top {
			border-bottom:1rpx solid #EEEEEE;
			padding: 16rpx;
			display: flex;
			align-items: center;
			
			.icon {
				margin-right:20rpx;
				width: 40rpx;
				height: 38rpx;
			}
			
			.progress {
				flex:1;
			}
			
			.submit {
				width: 168rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				color:#fff;
				font-size: 30rpx;
				background: #007AFF;
				border-radius: 24rpx;
			}
		}
		
		.textarea {
			textarea {
				width:100%;
				height:287rpx;
				padding:10rpx;
			}
		}
		
		.imgs {
			overflow: hidden;
			display: flex;
			width:100%;
			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 8rpx;
				position:relative;
				margin:20rpx;
				
				
				text {
					position:absolute;
					right:-15rpx;
					top:-15rpx;
					width:30rpx;
					height:30rpx;
					text-align: center;
					line-height: 30rpx;
					color:#fff;
					background:red;
					border-radius:50%;
				}
				
				image {
					width:100%;
					height:100%;
				}
			}
		}
	}
	
	.ans_submit {
		padding:16rpx;
		border-radius: 16rpx;
		background:#fff;
		
		.imgs {
			overflow: hidden;
			display: flex;
			width:100%;
			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 8rpx;
				position:relative;
				margin:20rpx;
				
				image {
					width:100%;
					height:100%;
				}
			}
		}
	}
}
.firstLetter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	.leftLetters {
		display: flex;
		align-items: center;
		width: 220rpx;
		.btnType {
			padding: 5rpx 10rpx;
			border: 1rpx solid #007aff;
			border-radius: 10rpx;
			background-color: rgba(0, 122, 255, 0.1);
			font-size: 28rpx;
			color: #007aff;
			margin-right: 15rpx;
		}
	}
}
.popupView {
	height: 100%;
	padding-bottom: 100rpx;
	.popupTops {
		height: 77rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;
		line-height: 77rpx;
		font-size: 24rpx;
		color: #999;
		position: relative;
		.topIcon {
			position: absolute;
			top: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 80rpx;
			height: 8rpx;
			background-color: #999;
			border-radius: 4rpx;
		}
	}
	.popupContent {
	}
}
.pageContent {
	background-color: #eaeef1;
	min-height: 100vh;
	padding-top: 8rpx;
	padding-bottom: 100rpx;
}
.pad_8 {
	background-color: #fff;
	margin: 0rpx 8rpx 8rpx;
	border-radius: 16rpx;
}
.answer {
	height: 80rpx;
	line-height: 80rpx;
	padding: 0rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #666;
	font-size: 30rpx;
}
.footer_btn {
	background-color: #fff;
	z-index: 10078;
	position: fixed;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 98rpx;
	padding: 0rpx 38rpx;
	border-top: 1rpx solid #eee;
}
.boxSty {
	padding: 44rpx 41rpx 0rpx;
}
.liListSty {
	border:1rpx solid #EEEEEE;
	width: 88rpx;
	height: 88rpx;
	border-radius: 32rpx;
	text-align: center;
	line-height: 88rpx;
	color: #333;
	font-size: 32rpx;
	float: left;
	margin: 20rpx 23rpx;
	
	&.isRight {
		border:1rpx solid #EEEEEE;
		color:#fff;
		background: green;
	}
	
	&.isWrong {
		border:1rpx solid #EEEEEE;
		color:#fff;
		background: red;
	}
}
.answerInfos {
	padding: 25rpx 25rpx 25rpx 23rpx;
}
.answerTitle {
	margin-bottom: 28rpx;
	color: #666;
	font-size: 30rpx;
}
.answerContent {
	font-size: 30rpx;
	color: #666;
}

.textChild {
	display: inline-block;
	vertical-align: middle;
}

.dialog {
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 20000;
	
	.text {
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
	}
	
	.btn {
		width: 242rpx;
		height: 82rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 16rpx;
		text-align: center;
		line-height: 82rpx;
		margin:41rpx auto;
		color:#fff;
		font-size: 32rpx;
	}
}
</style>