rt_fhyx_user_miniapp/pages_course/components/ques.vue

<template>
	<view class="ques-content" :style="{ fontSize: fontSize(28)}">
		<view class="ques-flex" v-if="openCommentStatus!=1"  :style="{justifyContent:showTreatment==0 || (showNote==1&&courseNote)?'space-around':'flex-start'}">
			<view class="ques-content-tit" :style="{ color: currentId==0&&showNote==1&&courseNote ? '#FF5C03':'#222',fontSize: fontSize(36)}" @click="choose(0)">问答题</view>
			<view class="ques-content-tit" v-if="showTreatment==0" :style="{ color: currentId==2? '#FF5C03':'#222',fontSize: fontSize(36)}" @click="choose(2)">活动</view>
			<view class="ques-content-tit" v-if="showNote==1&&courseNote" :style="{ color: currentId==1 ? '#FF5C03':'#222',fontSize: fontSize(36)}" @click="choose(1)">笔记</view>
		</view>
		<view v-if="currentId==1&&showNote==1&&courseNote" class="note" :style="{ fontSize: fontSize(32)}">{{courseNote}}</view>
		<template v-if="currentId==2&&showTreatment==0">
			<goodsList ref="goodsList" :treatmentPackage="treatmentPackage" :urlOption="urlOption"></goodsList>
		</template>
		<template v-if="currentId==0">
			<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>
		</template>
	</view>
</template>

<script>
	import goodsList from "./goodsList.vue"
	export default {
		components: {
			goodsList
		},
		props: ['quesList','openCommentStatus','courseNote','showNote','showTreatment','treatmentPackage','urlOption'],
		data() {
			return {
				currentId: 0
			}
		},
		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)
			},
			choose(type) {
				this.currentId=type
				this.$emit("showBtnType", type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.ques-flex {
		// justify-content: space-around
		@include u-flex(row, center, space-around);
	}
	.note{
		padding: 30rpx 0;
	}
	.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>