tra-app/src/pages/courseRecord/components/esQuestion.vue

<template>
	<view class="question-info">
		<view class="qns-type">问答题</view>
		<view class="question_text">
			{{ dataInfo.qnsContent }}
		</view>
		<view class="qns-desc">你的答案：</view>
		<view class="ans-list">
			<esQuestionAnswer v-for="item in dataInfo.analyContentVos" :dataInfo="item" :intrctWay="item.ossKey?'02':'01'"
				:activeVoiceId="activeVoiceId" @changePlay="changePlay" />
		</view>
		<slot></slot>
		<!-- <view class="analysis_div">
			<view class="analysis_title">
				<view class="success_answer">参考答案：{{ dataInfo.itemAnswer }}</view>
			</view>
			<view class="analysis_note">试题解析：{{ dataInfo?.analyContent }}</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		computed,
		unref,
		ref,
		toRefs,
		watch,
		onMounted
	} from 'vue';
	import {
		onUnload
	} from '@dcloudio/uni-app';
	import esQuestionAnswer from './esQuestionAnswer.vue'
	const props = defineProps({
		dataInfo: {
			default: () => ({
				talkingText: '',
				talkingVoice: ''
			}),
			type: Object
		},
		activeVoiceId: {
			default: '',
			type: String
		}
	});
	const {
		dataInfo,
		activeVoiceId
	} = toRefs(props);

	const intrctWay = computed(() => {
		return props.intrctWay;
	});
	const emit = defineEmits(['changePlay', 'buutton_click']);
	const changePlay = (val) => {
		console.log('esq')
		emit('changePlay', val)
	}
	watch(
		() => props.dataInfo,
		() => {}, {
			deep: true,
			immediate: true
		}
	);
	const initData = (item) => {
		return {

		}
	}
	// 声音播放初始化
	const talkVoiceObj = ref(null);

	const isPlaying = ref(false);
	const voiceLoading = ref(false);
	const translateLoading = ref(false);

	const voiceTime = ref('');
	const itemVoice = ref('');

	// 中间显示的文字
	const showContent = computed(() => {
		return props.text || props.dataInfo.anserResult || '';
	});

	// 按钮点击
	const buutton_click = (type) => {
		emit('buutton_click', type, props.dataInfo);
	};
</script>

<style scoped lang="scss">
	.qns-type {
		width: 108rpx;
		height: 46rpx;
		background: #267eff;
		border-radius: 8rpx;
		font-family: PingFangSC;
		font-weight: 500;
		font-size: 25rpx;
		color: #ffffff;
		text-align: center;
		line-height: 46rpx;
	}

	.question_text {
		font-family: PingFangSC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		line-height: 48rpx;
		text-align: left;
		font-style: normal;
		margin-top: 20rpx;
	}

	.qns-desc {
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
    color: #333333;
	}

	.talking-info {
		padding: 20rpx;
		border-radius: 15rpx;
		background-color: #06f;
		padding-bottom: 30rpx;
		position: relative;
		color: #fff;
		width: 100%;
		float: right;

		.talking-gif {
			width: 200rpx;
			height: 38rpx;
			background: url(@/static/images/course/voice-gray.png) no-repeat;
			background-size: contain;
			padding-left: 168rpx;

			&.is-play {
				background: url(@/static/images/course/voice-white.gif) no-repeat;
				background-size: contain;
			}
		}

		.right-time {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			font-size: 28rpx;
			height: 38rpx;
			line-height: 38rpx;
		}

		&.talking-info-loading {
			padding-bottom: 20rpx;
		}

		&.talking-info-text {
			padding-bottom: 20rpx;
			width: auto;
			min-width: calc(100vw * 0.45);
			float: right;

			.talking-cont {
				margin-top: 0rpx;
			}
		}

		.talking-cont {
			margin-top: 16rpx;
			overflow: hidden;

			.talking-text {
				font-size: 28rpx;
				line-height: 48rpx;
				margin-bottom: 20rpx;
				word-break: break-all;
				white-space: pre-line;
				overflow: hidden;

				&.translate-text {
					min-height: 48rpx;
				}
			}
		}

		.btns-cont {
			overflow: hidden;
			border-top: 3rpx solid #1f79ff;
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;
			margin-top: 22rpx;

			.replay-btn {
				float: left;
				width: 46rpx;
				height: 46rpx;
				overflow: hidden;
				margin-right: 16rpx;
				margin-top: 25rpx;
			}

			.play-btn {
				width: 46rpx;
				height: 46rpx;
				margin-right: 16rpx;
			}

			.text-btn {
				width: 46rpx;
				height: 46rpx;
				overflow: hidden;
				line-height: 46rpx;
				text-align: center;
				color: #fff;
				margin-right: 16rpx;
				background-color: #67a4ff;
				font-size: 24rpx;
				font-weight: bold;
				border-radius: 20rpx;
			}

			.text-right-btn {
				float: right;
				padding: 0 10rpx;
				height: 46rpx;
				overflow: hidden;
				line-height: 46rpx;
				text-align: center;
				margin-left: 16rpx;
				margin-top: 25rpx;
			}

			.next-btn {
				float: right;
				padding: 0 60rpx 0 20rpx;
				height: 62rpx;
				line-height: 62rpx;
				font-size: 30rpx;
				background-color: #06f;
				color: #fff;
				border-radius: 8rpx;
				margin-top: 16rpx;
				position: relative;

				.icon-iamge {
					width: 25rpx;
					height: 25rpx;
					position: absolute;
					right: 20rpx;
					top: 50%;
					margin-top: -12rpx;
				}
			}

			.btns-cont-button-text {
				font-weight: 400;
				font-size: 30rpx;
				color: #ffffff;
				line-height: 30rpx;
				text-align: left;
				font-style: normal;
				margin-left: 10rpx;
			}
		}
	}

	.question-info {
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.ans-list {
		overflow: hidden;
	}

	.analysis_div {
		width: 100%;

		.analysis_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 12rpx 0 28rpx 0;

			.success_answer {
				font-size: 30rpx;
			}

			.your_answer {
				.success {
					color: #15b859;
				}

				.error {
					color: #f5212d;
				}
			}
		}

		.analysis_note {
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 30rpx;
			color: #666666;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
		}
	}
</style>