Anti-fraud-mobile/pages/exercise/components/dayQuestion/index - 副本.vue

<template>
	<view class="dayQuestion">
		<view class="title">每日答题</view>
		<view class="subTitle">太阳每天都是新的</view>
		<!-- 题号题型 -->
		<view class="tip">
			<view class="type">
				单选题（10分）
			</view>
			<view class="number">
				1/10
			</view>
		</view>
		<!-- 题目主体 -->
		<view class="question">
			<view class="descripiton">
				如果一个或多个地区货币对外贬值，一般导致如果一个或多个地区货币对外贬值，一般导致
			</view>
			<view class="option" v-for="item in optionList" :key="item.code" @click="handleClick(item)">
				<view
					:class="['number', selectedOption.includes(item) ? 'active':'', isTrue ? '': 'falseResult', isResult ? 'trueResult':'']">
					{{item.code}}
				</view>
				<view :class="['content', isTrue ? '': 'falseOption', isResult ? 'trueOption':'']">
					{{item.optVal}}
				</view>
			</view>
		</view>
		<!-- 如果题型是多选的话展示提交按钮且未答题时 -->
		<view class="submitBtn">
			<u-button color="#f8572c" shape="circle" text="提交答案" @click="handleSubmit"></u-button>
		</view>
		<!-- 答案 -->
		<view class="answerBox" v-if="isAnswer">
			<view class="resultBox">
				<view :class="['sign', isTrue ? '': 'falseSign']">{{isTrue ? '✓':'x'}}</view>
				<view :class="['result', isTrue ? '': 'falseResult']">{{isTrue ? '回答正确':'回答错误'}}</view>
			</view>
			<view class="detailBox">
				<view class="true_result">
					<view class="sign">正确答案</view>
					<view class="result">B</view>
				</view>
				<view class="user_result">
					<view class="sign">您的答案</view>
					<view :class="['result', isTrue ? '': 'falseResult']">{{selectVal}}</view>
				</view>
			</view>
		</view>
		<!-- 问题解析 -->
		<view class="analysis" v-if="isAnswer">
			<view class="analysis_title">
				解析
			</view>
			<view class="analysis_content">
				本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加本国进口增加
			</view>
		</view>

		<!-- 底部题卡-->
		<QuestionTabbar />
	</view>
</template>

<script>
	import QuestionTabbar from "../tabbar/index.vue";
	export default {
		components: {
			QuestionTabbar
		},
		data() {
			return {
				// 记录用户的回答是否正确
				isTrue: true,
				// 正确选项
				isResult: false,
				// 是否答题
				isAnswer: false,
				// 存储多选时选中的选项
				selectedOption: [],
				// 存储用户选中的选项
				selectVal: "",
				// 选项列表(模拟数据)
				optionList: [{
						code: 'A',
						optVal: "本国出口减少"
					},
					{
						code: 'B',
						optVal: "本国出口增加"
					},
					{
						code: 'C',
						optVal: "本国进口增加"
					},
					{
						code: 'D',
						optVal: "本国旅游收入减少"
					},{
						code: 'E',
						optVal: "本国旅游收入减少"
					},{
						code: 'F',
						optVal: "本国旅游收入减少"
					},{
						code: 'G',
						optVal: "本国旅游收入减少"
					},
				]
			};
		},
		methods: {
			// 数组的值按照英文字母排序
			sortEn(arr) {
				arr.sort(function(a, b) {
					return a.charCodeAt(0).toString(16) - b.charCodeAt(0).toString(16);
				});
				return arr;
			},
			// 点击选项时
			handleClick(val) {
				// 如果是单选直接请求接口,并存储用户选中的选项
				this.selectVal = val.code

				// 如果是多选，记录当前点击的选项(取反，选中的再次点击要取消选中)
				if (this.selectedOption.includes(val.code)) {
					this.selectedOption = this.selectedOption.filter(t => t !== val.code)
				} else {
					this.selectedOption.push(val.code)
				}
				this.selectVal = this.sortEn(this.selectedOption).join(",")

			},
			// 点击提交按钮 (多选题)
			handleSubmit() {
				// 直接请求接口
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
		height: 100%;
	}

	.dayQuestion {
		padding: 40rpx;
		color: #000;

		.title {
			font-size: 60rpx;
			font-weight: 900;
		}

		.subTitle {
			margin: 20rpx 0;
			color: #666;
		}

		.tip {
			width: 100%;
			height: 100rpx;
			background-color: #eeecec;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			margin: 50rpx 0;
		}

		.question {
			.option {
				display: flex;
				align-items: center;
				margin: 30rpx 0;

				.number {
					margin-right: 20rpx;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 600;
					border: 1px solid #f8572c;
					border-radius: 50%;
					color: #f8572c;
				}

				.active {
					// border: 1px solid #f8572c;
					background-color: #f8572c;
					color: #fff;
				}

				.trueResult {
					border: 1px solid #22c134;
					background-color: #22c134;
					color: #fff;
				}

				.trueOption {
					color: #22c134;
				}

				.falseResult {
					border: 1px solid #ff4d4f;
					background-color: #ff4d4f;
					color: #fff;
				}

				.falseOption {
					color: #ff4d4f;
				}

			}
		}

		.submitBtn {
			width: 200rpx;
			margin: 80rpx auto;
			margin-bottom: 160rpx;
		}

		.answerBox {
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.2);

			.resultBox {
				display: flex;
				align-items: center;
				height: 40%;
				// background-color: red;
				padding: 0 20rpx;

				.sign {
					width: 30rpx;
					height: 30rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					border-radius: 50%;
					background-color: #22c134;
				}

				.result {
					color: #22c134;
					font-weight: 600;
				}

				.falseSign {
					background-color: #ff4d4f;
				}

				.falseResult {
					color: #ff4d4f;
				}
			}

			.detailBox {
				height: 60%;
				display: flex;
				// background-color: yellow;
				box-sizing: border-box;
				border-top: 4rpx solid #f9f9f9;

				.true_result,
				.user_result {
					width: 50%;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;

					.result {
						font-weight: 600;
						color: #22c134;
					}

					.falseResult {
						color: #ff4d4f;
					}
				}

				.true_result {
					border-right: 4rpx solid #f9f9f9;
				}
			}
		}

		.analysis {
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.2);
			margin-top: 20rpx;
			margin-bottom: 160rpx;
			padding: 20rpx 12rpx;

			.analysis_title {
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}
</style>