baiyuApp/pages/course/components/questionsPopup.vue

<template>
	<u-popup :show="showPopup" mode="bottom" round="30" @close="close">
		<view class="ques-content">
			<view class="quesTitleViewClass">
				<view class="quesTitleLeftClass">
					<image src="/static/image/hall/ques_icon.png" mode="aspectFill"></image>
					<text class="quesTitleTextClass">问答题</text>
				</view>
				<view @tap="close">
					<u-icon name="close-circle-fill" color="#D8D8D8FF" size="32"></u-icon>
				</view>
			</view>
			<scroll-view class="scroll-y" scroll-y>
				<view class="dataItemViewClass" v-for="(item, index) in quesList" :key="index">
					<view class="ques-title">
						<text>{{ index + 1 }}.</text>
						<!-- <view class="ques-type" 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.question" :key="idx" @tap="handleSelectAnswer(item, option)">
						<view>
							{{ numberToLetter(idx) }}.
						</view>
						<view>{{ option.name }}</view>
					</view>
				</view>
				<view class="empty" v-if="quesList.length == 0">暂未设置题目~</view>
			</scroll-view>
			<view v-if="quesList.length > 0" class="bottomBtnViewClass">
				<view v-if="~~remainSeconds > 0" class="btnViewClass" @tap.stop="close">再观看{{ formatTime(remainSeconds)
				}}可答题</view>
				<view v-else :class="isOkAnswer ? 'btnViewClass btnViewClass-active' : 'btnViewClass'"
					@tap="isOkAnswer ? confirmAnswer() : null">
					提交答案</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import {
	newVideoDetailsApi
} from '@/api/course'
export default {
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		typeStatus: {
			type: Number,
			default: 1, //提交类型：1、可以提交答案，2、需再观看视频
		},
		// 父组件传：剩余秒数
		remainSeconds: {
			type: Number,
			default: 0
		},
		videoId: {
			type: Number,
			default: ''
		},
	},
	data() {
		return {
			showPopup: false,
			quesList: [],
		}
	},
	computed: {
		isOkAnswer() {
			let newData = false
			newData = !(this.quesList.map(item => item.answer).some(itemOne => itemOne == null || itemOne === ''))
			return newData
		},
		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
				}
			}
		}
	},
	watch: {
		isShow(newVal) {
			this.showPopup = newVal
			if (newVal) {
				this.getNewQuestionsList()
			}
		}
	},

	methods: {
		// 获取新视频详情
		async getNewQuestionsList() {
			let res = await newVideoDetailsApi({
				videoId: this.videoId
			})
			if (res.code == 200) {
				this.quesList = res.data.questionBankList.length > 0 ? res.data.questionBankList.map(item => ({ ...item, question: JSON.parse(item.question), answer: '' })) : []
			}
		},
		// 秒数 → 分:秒 格式
		formatTime(seconds) {
			if (seconds <= 0) {
				return '00分00秒'
			}
			const m = Math.floor(seconds / 60)
			const s = seconds % 60
			return `${m.toString().padStart(2, '0')}分${s.toString().padStart(2, '0')}秒`
		},
		numberToLetter(num) {
			// 将数字转换为字母的 ASCII 码
			let letterCode = num + 65;
			// 将 ASCII 码转换为大写字母
			let letter = String.fromCharCode(letterCode);
			return letter;
		},
		// 点击选择答案
		handleSelectAnswer(item, option) {
			if (item.type == 1) {
				// 单选option
				if (item.answer === option.name) {
					item.answer = ''
				} else {
					item.answer = option.name
				}
			} else if (item.type == 2) {
				// 多选
				let answer = item.answer ? item.answer.split(',') : []
				if (answer.indexOf(option.name) === -1) {
					answer.push(option.name)
					item.answer = answer.join(',')
				} else {
					answer.splice(answer.indexOf(option.name), 1)
					item.answer = answer.join(',')
				}
			}
		},

		// 提交答案
		confirmAnswer() {
			this.$emit('submitAnswer', this.quesList)
		},
		// 关闭弹框
		close() {
			this.$emit('closeMethod')
		},
	},
}
</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;
}

.scroll-y {
	width: 100%;
	height: calc(60vh - 300rpx)
}

.quesTitleViewClass {
	@include u-flex(row, center, space-between);
	padding-bottom: 26rpx;
	border-bottom: 2rpx solid #D8D8D8;
	margin-bottom: 24rpx;

	.quesTitleLeftClass {
		@include u-flex(row, center, center);

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}

		.quesTitleTextClass {
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}
	}
}

.ques-content {
	width: 100vw;
	height: 60vh;
	background-color: #fff;
	padding: 24rpx 24rpx 10rpx 24rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
}

.dataItemViewClass {
	width: 100%;
	margin-bottom: 25rpx;
}

.ques-title {
	font-weight: 600;
	font-size: 40rpx;
	margin-bottom: 24rpx;
	color: rgba(0, 0, 0, 0.85);
	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: 104rpx;
	padding: 24rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	background: #F5F7FAFF;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	font-weight: 400;
	font-size: 40rpx;
	color: rgba(0, 0, 0, 0.85);

	&-active {
		color: #FF233CFF !important;
		background: #FFF0F1FF !important;
	}
}

.bottomBtnViewClass {
	width: 100%;
	height: 130rpx;
	@include u-flex(row, center, center);

	.btnViewClass {
		width: 630rpx;
		height: 96rpx;
		background: #00000040;
		border-radius: 48rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;

		&-active {
			background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
		}
	}
}
</style>