对接答题列表

pages2/bank/questionBankTest.vue

@@ -1,12 +1,18 @@
 <template>
 	<view id="questionBank">
 		<swiper class="swiper" :current="current" @change="swiperChange" :interval="interval">
-			<swiper-item v-for="(bank,bankIndex) in questionList">
+			<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">单选</view>
+								<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>
@@ -16,24 +22,130 @@
 							<rich-text :nodes="bank.content"></rich-text>
 						</view>
 						<view class="">
-							<template v-if="bank.type == 4">
+							<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>
+										{{ item.content }}
+									</view>
+								</view>
 								<view v-if="ques[bankIndex]">
-									<view v-for="(item, index) in bank.jsonStr[0].optionsList" :key="index" 
-										 
-										class="lisSty">
-										<view :class="{right:(item.value == ques[bankIndex]) && (ques[bankIndex] == ans[bankIndex]),wrong:(item.value == ques[bankIndex]) && (ques[bankIndex] != ans[bankIndex])}" class="activeTI">{{ ast[index] }}</view>
+									<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>
 										{{ item.content }}
 									</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>
-								<!-- <view v-if="!ques[bankIndex]">
-									<view v-for="(item, index) in bank.jsonStr[0].optionsList" :key="index" @click="click" :data-value="item.value" class="lisSty">
-										<text class="activeTI">{{ ast[index] }}</text>
+							</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>
 										{{ 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>
+										{{ item.content }}  {{ques[bankIndex].indexOf(item.optionsId) != -1 }}  {{item.optionsId}} {{ans[bankIndex].indexOf(item.optionsId) != -1}}
+									</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 == 4">
+								<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.text" placeholder="在此输入答案"></textarea>
+										</view>
+										<view class="imgs">
+											<view class="img" v-for="(img,imgIndex) in bank.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">
+											这是官方答案解析文本，卡片高度根据内容自动调整，我实在编不出来内容了，我实在编不出来内容了，我实在编不出来内容了，我实在编不出来内容了，就这样吧。
+										</view>
+									</view>
+								</view>
 							</template>
 							
-							<view v-if="ques[bankIndex] ">
+							<!-- <view v-if="ques[bankIndex] ">
 								<view v-for="(item, index) in bank.jsonStr" :key="index" 
 									 
 									class="lisSty">
@@ -46,22 +158,11 @@
 									<text class="activeTI">{{ ast[index] }}</text>
 									{{ item.label }}
 								</view>
-							</view>
+							</view> -->
 							
 						</view>
 					</view>
-					<view v-if="ques[bankIndex]">
-						<view class="pad_8 answer">
-							<view>正确答案：{{ans[bankIndex]}}</view>
-							<view>我的答案：{{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>
+					
 					
 				</view>
 			</swiper-item>
@@ -102,103 +203,13 @@ export default {
 			id:'',
 			current:0,
 			questionList:[],
-			ast: ['A', 'B', 'C', 'D',],
-			ans:[1,2,3,4,1],
-			ques:['','','','',''],
+			ast: ['A', 'B', 'C', 'D','E','F','G'],
+			judge:['错误','正确'],
+			ans:[],
+			ques:[],
 			show: false,
 			showDialog:true,
-			bankList: [
-				[
-					{
-						label: '1',
-						value: 1
-					},
-					{
-						label: '2',
-						value: 2
-					},
-					{
-						label: '3',
-						value: 3
-					},
-					{
-						label: '4',
-						value: 4
-					}
-				],
-				[
-					{
-						label: '5',
-						value: 1
-					},
-					{
-						label: '6',
-						value: 2
-					},
-					{
-						label: '7',
-						value: 3
-					},
-					{
-						label: '8',
-						value: 4
-					}
-				],
-				[
-					{
-						label: '9',
-						value: 1
-					},
-					{
-						label: '10',
-						value: 2
-					},
-					{
-						label: '11',
-						value: 3
-					},
-					{
-						label: '12',
-						value: 4
-					}
-				],
-				[
-					{
-						label: '13',
-						value: 1
-					},
-					{
-						label: '14',
-						value: 2
-					},
-					{
-						label: '15',
-						value: 3
-					},
-					{
-						label: '17',
-						value: 4
-					}
-				],
-				[
-					{
-						label: '18',
-						value: 1
-					},
-					{
-						label: '19',
-						value: 2
-					},
-					{
-						label: '21',
-						value: 3
-					},
-					{
-						label: '22',
-						value: 4
-					}
-				]
-			]
+			bankList: []
 		};
 	},
 	onLoad(option){
@@ -211,14 +222,81 @@ export default {
 				examId:this.id
 			}).then(res => {
 				console.log(res)
-				res.data.data.forEach(item => {
+				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 == 4) {
+						item.text = '';
+						item.imageList = [];
+					}
+					
+					this.$set(this.ans,index,item.answerQuestion);
 				})
+				
 				this.questionList = res.data.data;
 				
-				console.log(this.questionList[0])
 			})
 		},
+		/**
+		 * @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} 多选点击
+		 */
+		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} 多选确认
+		 */
+		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)
+			
+			console.log(this.ques);
+			console.log(this.ans)
+		},
+		
+		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+'')
+		},
+		
 		openFooterTab() {
 			this.show = true;
 		},
@@ -267,6 +345,50 @@ export default {
 			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].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].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].text && !this.questionList[bankindex].imageList.length) {
+				uni.showToast({
+					title: '请输入内容或上传图片',
+					duration: 2000,
+					icon:'none'
+				});
+				return
+			}
+			
+			this.$set(this.ques,bankindex,{
+				imageList:this.questionList[bankindex].imageList,
+				text:this.questionList[bankindex].text,
+			})
+			
 		}
 	}
 };
@@ -304,13 +426,131 @@ export default {
 		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;
 }
+
+.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;