hongsengtangMall_user_app/pages_course/components/ques.vue

<template>
	<view class="ques-content" :style="{ fontSize: fontSize(28)}">
		<view class="ques-content-tit" :style="{ fontSize: fontSize(36)}" v-show="openCommentStatus!=1">问答题</view>
		<view v-for="(item,index) in quesList" :key="index">
			<view class="ques-title" :style="{ fontSize: fontSize(32)}">
				<text>{{index + 1}}.</text>
				<view class="ques-type" :style="{ fontSize: fontSize(24)}" v-show="item.type == 1 || item.type == 2">
					{{item.type == 1 ? '单选' : item.type == 2 ? '多选' : ''}}
				</view>
				<text>{{item.title}}</text>
			</view>
			<view :class="isAnswer(item,option.name) ?'ques-option ques-option-active':'ques-option'"
				v-for="(option,idx) in item.questionOption" :key="idx" @click="handleAnswer(item,option,index)">
				<view>
					{{numberToLetter(idx)}}.
				</view>
				<view>{{option.name}}</view>
			</view>
		</view>
		<view class="empty" v-if="quesList&&quesList.length==0">暂未设置题目~</view>
	</view>
</template>

<script>
	export default {
		props: ['quesList','openCommentStatus'],
		data() {
			return {
				
			}
		},
		computed: {
			fontSize() {
				return size=>{
					const value = uni.upx2px(size)
					const scale = uni.getStorageSync('fontScale') || 1;
					if(scale<1){
						return value + 'px';
					}else {
						return value * scale + 'px';
					}
				}
			},
			isAnswer() {
				return (item, name) => {
					if (item.type == 1) {
						return item.answer == name
					} else if (item.type == 2) {
						const array = item.answer.split(',')
						return array.some(i => i == name)
					} else {
						return false
					}
				}
			}
		},
		methods: {
			numberToLetter(num) {
				// 将数字转换为字母的 ASCII 码
				let letterCode = num + 65;
				// 将 ASCII 码转换为大写字母
				let letter = String.fromCharCode(letterCode);
				return letter;
			},
			handleAnswer(item, option,index) {
				const param = {
					item,
					option,
					index
				}
				this.$emit("handleAnswer", param)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.empty {
		@include u-flex(row, center, center);
		padding: 24rpx 50rpx;
		color: #999999;
	}
	.ques-content {
		background-color: #fff;
		padding: 24rpx 32rpx 24rpx 32rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	.ques-content-tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #222222;
	}

	.ques-title {
		margin: 48rpx 0 34rpx 0;
		font-weight: 500;
		font-size: 32rpx;
		white-space: normal;
	}

	.ques-type {
		flex-shrink: 0;
		min-width: 72rpx;
		min-height: 40rpx;
		padding: 0 12rpx;
		margin: 0 12rpx;
		box-sizing: border-box;
		background: #FF5C03;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 40rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		display: inline-block;
	}

	.ques-option {
		min-height: 88rpx;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		background: #F5F7FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;

		&-active {
			color: #FF5C03 !important;
			background: #FCF0E7 !important;
		}
	}
</style>