psy_web_share/examWidght/components/Li-ExamWidght/Li-ExamWidght.vue

<template>
	<view class="exam-list-row">
		<view class="">
			<!-- <view class="TitleFontWeight" style="min-height: 20px">
				{{ currentIndex + 1 }}:{{ QuestionList.answer }}
			</view> -->
			<view class="TitleFontWeight">
				{{ QuestionList.answer }}
			</view>
			<view class="exam-list-content fontSize16">
				<!-- <scroll-view> -->
				<view v-if="QuestionList.questionType == 0">
					<view class='question_select'>
						<view v-for="(item, i) in QuestionList.QuestionOptionList" :key="i" class="disRowAroundStart"
							:class="
							  QuestionList.fldAnswer == item.fldOptionText
							    ? 'checked_user'
							    : 'checked_'
							" @click.stop="onListItem(item)">
							<view style='display: flex;align-items: center;'>
								<view class='question_circle'>

								</view>
								<view class="question_txt"
									:style="{color:QuestionList.fldAnswer == item.fldOptionText?'#ffffff':'#656C74'}">
									{{ item.fldOptionText }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="question_select" v-if="QuestionList.questionType == 2"><input class="ans_input"
						@input="onKeyInput" placeholder="请输入答案" /></view>
				<view class="question_select" v-if="QuestionList.questionType == 5">
					<picker-view :indicator-style="indicatorStyle" :value="selectVal" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in selectArr" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view v-if="QuestionList.questionType == 8">
					<view class="image_wrap">
						<image style="width: 46%;" v-for="(item,index) in getAnswerImg(QuestionList.questionParam)"
							:src="item" :key="index" alt="" mode="widthFix"></image>
					</view>
					<view class='question_select'>
						<view v-for="(item, i) in QuestionList.QuestionOptionList" :key="i" class="disRowAroundStart"
							:class="
							  QuestionList.fldAnswer == item.fldOptionText
							    ? 'checked_user'
							    : 'checked_'
							" @click.stop="onListItem(item)">
							<view style='display: flex;align-items: center;'>
								<view class='question_circle'>

								</view>
								<view class="question_txt"
									:style="{color:QuestionList.fldAnswer == item.fldOptionText?'#ffffff':'#656C74'}">
									{{ item.fldOptionText }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="exam-list-button">
					<button v-if="currentIndex > 0" @click="goPrev" class="answer_button">
						上一题
					</button>
					<button v-if="currentIndex < total - 1 && QuestionList.questionType == 5" @click="goNext"
						class="answer_button">
						下一题
					</button>

					<button v-if="currentIndex + 1 == total" @click="subMit" class="answer_button">
						提交
					</button>
				</view>
			</view>
		</view>
		<!-- 按钮区域 -->
	</view>
</template>

<script>
	export default {
		name: "Li-ExamWidght",
		props: ["QuestionList", "total", "currentIndex"],
		data() {
			return {
				checked_user: '',
				checked_: '',
				// checked_user: this.$imageUrl.urls.checked_user,
				// checked_: this.$imageUrl.urls.checked_,
				isShowBtn: true,
				blankAnswer: "",
				indicatorStyle: `height: 50px;`,
				selectVal: [0],
			};
		},
		computed: {
			selectArr() {
				let arr = [];
				if (this.QuestionList.questionType == 5) {
					arr = JSON.parse(this.QuestionList.questionParam)
				}
				return arr;
			}
		},
		mounted() {
			this.isShowBtn = true;
		},
		methods: {
			goPrev() {
				this.$emit("goPrevAnswer");
			},
			goNext() {
				if (this.QuestionList.questionType == '5') {
					this.$emit("goNextAnswer", this.selectVal[0]);
					this.selectVal = [0];
				} else {
					this.$emit("goNextAnswer", this.blankAnswer);
					this.this.blankAnswer = "";
				}
			},
			onItem(item) {
				this.$emit("onItemAnswer", item);
			},
			onListItem(item) {
				this.$emit("onListItemAnswer", item);
			},
			subMit() {
				console.log("=1=====>", this.isShowBtn);
				// if(!this.isShowBtn) return;
				// this.isShowBtn=false;
				this.$emit("subMitList");
				console.log("=2=====>", this.isShowBtn);
				// setTimeout(()=>{
				// this.isShowBtn=true;
				// },2000)
			},
			// 填空输入
			onKeyInput: function(event) {
				this.blankAnswer = event.target.value;
			},
			bindChange(e) {
				this.selectVal = e.detail.value;
			},
			// 对应返回备选答案图片地址
			getAnswerImg(param) {
				param = JSON.parse(param);
				let imgArr = [];
				param.forEach(item => {
					imgArr.push(`/static/scaleImages/${item.imgUrl}`)
				})
				return imgArr;
			},
		},
	};
</script>

<style scoped>
	.exam-list-content-img {
		width: 60rpx;
		height: 60rpx;
	}

	.exam-list-row {
		/* 	padding-top: 10px; */
	}

	.exam-list-content {
		/* padding-top: 30px; */
	}

	.checked_ {
		display: flex;
		align-items: center;
		background: #E3FDFF;
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		margin-bottom: 18px;
		min-height: 40px;
	}

	.checked_user {
		background: #00D8E7;
		color: #ffffff;
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		margin-bottom: 18px;
		/* color: #3fb4c9;
		padding: 15px 0;
		padding-left: 20px;
		background-color: #d4f3f8;
		border-radius: 50px;
		margin-bottom: 10px;
		font-weight: bold; */
		min-height: 40px;
	}

	.exam-list-button {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 40px;
	}

	.ans_input {
		width: 80%;
		height: 36px;
		line-height: 36px;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding-left: 5px;
	}

	.TitleFontWeight {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 18px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #040000;
		line-height: 26px;
		background-color: #ffffff;
		padding-top: 10px;
		padding: 20rpx 40rpx 0 40rpx;

	}

	.answer_button {
		flex: 1;
		background-color: #03A2AD;
		color: #ffffff;
		font-size: 16px;
		margin: 0 20rpx;
	}

	.question_circle {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		border: 2px solid #03A2AD;
		background: #ffffff;
		margin: 0 28rpx;
	}

	.question_select {
		background-color: #ffffff;
		padding-left: 10px;
		padding-right: 10px;
		padding: 60rpx 40rpx 80rpx 40rpx;
	}

	.question_txt {
		box-sizing: border-box;
		padding: 10rpx 10rpx 10rpx 0;
		flex: 1;
		line-height: 1.8;
		letter-spacing: 2px;
	}

	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.image_wrap {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background: #ffffff;
		padding-top: 20rpx;
	}
</style>