zc_saas_h5/pages2/bank/questionBank.vue

<template>
	<view id="questionBank">
		<swiper class="swiper" :current="current" @change="swiperChange" :interval="interval">
			<swiper-item v-for="(bank,bankIndex) in bankList">
				<view v-if="bank.type == 'text'" class="pageContent">
					<view class="pad_8 titBox">
						<view class="firstLetter">
							<view class="leftLetters">
								<view class="btnType">简答</view>
								<text>{{bankIndex}}/{{bankList.length}}</text>
							</view>
							<view style="color: #666;font-size: 28rpx;">03:25:06</view>
							<view class="leftLetters"></view>
						</view>
						<view class="titles">论述我国中央人民政府和特别行政区的关系。</view>
					</view>
					<view class="ans">
						<view class="ans_input" v-if="!ques[bankIndex]">
							<view class="top flex">
								<image :data-index="bankIndex" class="icon" @click="chooseImg" src="/static/08-10_032.jpg" mode=""></image>
								<view class="progress">0/4</view>
								<view class="submit"  @click="submitAns" data-type='text' :data-bankIndex="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.arr" >
									<text @click="deleteImg" :data-imgIndex="imgIndex" :data-bankIndex="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].arr" :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>
					
				</view>
				
				<view v-if="bank.type == 'checkbox'" class="pageContent">
					<view class="pad_8 titBox">
						<view class="firstLetter">
							<view class="leftLetters">
								<view class="btnType">多选</view>
								<text>{{bankIndex}}/{{bankList.length}}</text>
							</view>
							<view style="color: #666;font-size: 28rpx;">03:25:06</view>
							<view class="leftLetters"></view>
						</view>
						<view class="titles">建造师执业资格注册的有效期一般为（ ）年。</view>
						<view class="">
							<view v-if="ques[bankIndex] ">
								<view v-for="(item, index) in bank.arr" :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>
									{{ item.label }}
								</view>
							</view>
							<view v-if="!ques[bankIndex]">
								<view v-for="(item, index) in bank.arr" :key="index" @click="click" :data-value="item.value" class="lisSty">
									<text class="activeTI">{{ ast[index] }}</text>
									{{ item.label }}
								</view>
							</view>
						</view>
					</view>
					<!-- <view v-if="!ques[bankIndex]" class="submit_checkbox" @click="submitAns" data-type="checkbox"  :data-bankIndex="bankIndex">
						确认答案
					</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">
								建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更执业单位者，应当及时办理变更手续。
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="bank.type == 'radio'" class="pageContent">
					<view class="pad_8 titBox">
						<view class="firstLetter">
							<view class="leftLetters">
								<view class="btnType">单选</view>
								<text>{{bankIndex}}/{{bankList.length}}</text>
							</view>
							<view style="color: #666;font-size: 28rpx;">03:25:06</view>
							<view class="leftLetters"></view>
						</view>
						<view class="titles">建造师执业资格注册的有效期一般为（ ）年。</view>
						<view class="">
							<view v-if="ques[bankIndex] ">
								<view v-for="(item, index) in bank.arr" :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>
									{{ item.label }}
								</view>
							</view>
							<view v-if="!ques[bankIndex]">
								<view v-for="(item, index) in bank.arr" :key="index" @click="click" :data-value="item.value" class="lisSty">
									<text class="activeTI">{{ ast[index] }}</text>
									{{ item.label }}
								</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">
								建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更执业单位者，应当及时办理变更手续。
							</view>
						</view>
					</view>
					
				</view>
			</swiper-item>
		</swiper>
		
		<view class="footer-start">开始做答</view>
		<view class="footer_btn">
			<view @click="collect">收藏</view>
			<view @click="openFooterTab">答题卡</view>
			<navigator url="/pages2/bank/question_report" open-type="redirect">
				<view>交卷</view>
			</navigator>
			
		</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 bankList" :key="index" :data-index="index" @click="changeIndex" class="liListSty">{{ index + 1 }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			current:0,
			ast: ['A', 'B', 'C', 'D',],
			ans:['',1,3,4,1],
			ques:['','','','',''],
			show: false,
			bankList: [
				{
					type:'text',
					arr:[],
					text:''
				},
				{
					type:'checkbox',
					arr:[
						{
							label: '9',
							value: 1,
							checked:false,
						},
						{
							label: '10',
							value: 2,
							checked:false,
						},
						{
							label: '11',
							value: 3,
							checked:false,
						},
						{
							label: '12',
							value: 4,
							checked:false,
						}
					],
				},
				{
					type:'radio',
					arr:[{
							label: '13',
							value: 1
						},
						{
							label: '14',
							value: 2
						},
						{
							label: '15',
							value: 3
						},
						{
							label: '17',
							value: 4
						}],
				},
				{
					type:'radio',
					arr:[{
							label: '13',
							value: 1
						},
						{
							label: '14',
							value: 2
						},
						{
							label: '15',
							value: 3
						},
						{
							label: '17',
							value: 4
						}],
				},
				{
					type:'radio',
					arr:[{
							label: '13',
							value: 1
						},
						{
							label: '14',
							value: 2
						},
						{
							label: '15',
							value: 3
						},
						{
							label: '17',
							value: 4
						}],
				}]
		};
	},
	methods: {
		openFooterTab() {
			this.show = true;
		},
		hideDialog() {
			this.showDialog = false
		},
		changeIndex(e) {
			let index = e.currentTarget.dataset.index
			
			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)
			
		},
		
		clickCheckbox(e) {
			
		},
		
		chooseImg(e) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', ], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: (res) => {
					// console.log(JSON.stringify(res.tempFilePaths));
					this.bankList[e.currentTarget.dataset.index].arr.push(res.tempFilePaths)
					console.log(this.bankList[e.currentTarget.dataset.index])
				}
			})
		},
		
		deleteImg(e) {
			
			var imgIndex = e.currentTarget.dataset.imgindex;
			var bankIndex = e.currentTarget.dataset.bankindex;
			
			this.bankList[bankIndex].arr.splice(imgIndex,1)
		},
		
		submitAns(e) {
			let type = e.currentTarget.dataset.type;
			let bankindex = e.currentTarget.dataset.bankindex;
			
			if(type == 'text') {
				if(!this.bankList[bankindex].text || !this.bankList[bankindex].arr.length) {
					uni.showToast({
					    title: '请输入内容',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				
				
				this.$set(this.ques,bankindex,{
						arr:this.bankList[bankindex].arr,
						text:this.bankList[bankindex].text,
					})
			} else if(type == 'checkbox') {
				
			} else {
				if(this.ques[this.bankindex]) return;
				let value = e.currentTarget.dataset.value;
				this.ques[this.bankindex] = value;
				this.ques = Object.assign({},this.ques)
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	width:100%;
	height:100vh;
}
.lisSty {
	margin-bottom: 16rpx;
	
}
.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;
	}
}
.titles {
	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;
	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-start {
	position:fixed;
	bottom:100rpx;
	left:50%;
	transform: translateX(-50%);
	width: 526rpx;
	height: 80rpx;
	background: rgba(0, 122, 255, 0.6);
	color:#fff;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
	border-radius: 40rpx;
}


.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;
}
.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 {
	width: 88rpx;
	height: 88rpx;
	border-radius: 32rpx;
	background-color: #ff3b30;
	text-align: center;
	line-height: 88rpx;
	color: #fff;
	font-size: 32rpx;
	float: left;
	margin: 20rpx 23rpx;
	
	&.disabled {
		border:1rpx solid #EEEEEE;
		color:#EEEEEE;
		background: none;
	}
}
.answerInfos {
	padding: 25rpx 25rpx 25rpx 23rpx;
}
.answerTitle {
	margin-bottom: 28rpx;
	color: #666;
	font-size: 30rpx;
}
.answerContent {
	font-size: 30rpx;
	color: #666;
}

</style>