修改问答题

src/components/examination/characters-subject.vue

@@ -19,7 +19,11 @@
 			{{subject_data.qnsContent}}
 		</view>
 		<view class="option_div">
-			
+			<questionVue
+				@changePlay="changePlay"
+				:dataInfo="talkingInfo"
+				:activeVoiceId="activeVoiceId"
+			></questionVue> 
 		</view>
 	
 	</view>
@@ -33,10 +37,12 @@
 		computed,
 		toRaw
 	} from 'vue'
+	import questionVue from './question.vue';
 	import radioSubjectItem from './radio-subject-item.vue'
 	import {
 		SUBJECT_TYPE
 	} from '@/enum.js'
+	const talkingInfo = reactive({})
 	const customStyle = {
 		borderRadius: '16rpx',
 		width: '292rpx',
@@ -67,7 +73,9 @@
 	})
 	// 题类型
 	const subject_type_text = computed(() => SUBJECT_TYPE.find(res => subject_data.qnsTyp === res.value)?.label || '')
-	
+	const changePlay = (id) => {
+		// emit('handleEvents', 'changePlay', props.talkingInfo, id)
+	}
 </script>
 
 <style scoped lang="scss">

src/components/examination/question.vue

@@ -0,0 +1,266 @@
+<template>
+	<view class="talking-info"  v-if="dataInfo.intrctWay === '02'">
+		<view :class="['talking-gif', !voiceLoading&&(props.activeVoiceId === dataInfo.id) ? 'is-play' : '']">
+			<CommonLoading color="#fff" v-show="voiceLoading"/>
+		</view>
+		<view class="right-time">{{voiceTime}}</view>
+		<view class="talking-cont">
+			<text :class="['talking-text translate-text loading']" v-show="!translateLoading">
+				{{ showContent }}
+			</text>
+			<view class="talking-text translate-text" v-if="translateLoading">
+				<CommonLoading color="#fff"/>
+			</view>
+		</view>
+		<view class="btns-cont">
+			<view class="play-btn">
+				<image class="icon" 
+					v-show="!(!voiceLoading&&(props.activeVoiceId === dataInfo.id))" 
+					@click="playVoice"
+					src="@/static/images/course/play-blue.png" 
+					style="width: 100%;height: 100%;"
+				></image>
+				<image class="icon"
+					v-show="!voiceLoading&&(props.activeVoiceId === dataInfo.id)" 
+					@click.stop="pauseVoice"
+					src="@/static/images/course/stop-blue.png" 
+					style="width: 100%;height: 100%;"
+				></image>
+			<!-- <view class="icon text-btn" v-if="type === 1" @click.stop="translateVoice(dataInfo)">文</view> -->
+			</view>
+		</view>
+	</view>
+	<view class="talking-info talking-info-text"  v-else-if="dataInfo.intrctWay === '01'">
+		<view class="talking-cont">
+			<text :class="['talking-text translate-text loading']">
+				{{ showContent }}
+			</text>
+		</view>
+	</view>
+	<view class="talking-info talking-info-loading"  v-else>
+		<view :class="['talking-gif']">
+			<CommonLoading color="#fff"/>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, unref, ref, toRefs, watch, onMounted } from "vue"
+import { onUnload } from '@dcloudio/uni-app';
+ 	const props = defineProps({
+		dataInfo: {
+			default: () => ({}),
+			type: Object
+		},
+		activeVoiceId:{
+			default:'',
+			type: String
+		},
+	})
+	const { activeVoiceId, dataInfo } = toRefs(props)
+	const emit = defineEmits(['changePlay'])
+	watch(() => props.dataInfo, () => {},{deep: true,immediate: true})
+	// 声音播放初始化
+	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 dataInfo.value.talkingText || ''
+	})
+	onMounted(()=>{
+		initVoice()
+	})
+	onUnload(()=>{
+		pauseVoice()
+	})
+	watch(() => props.dataInfo.talkingVoice,(val)=>{
+		if(val){
+			initVoice()
+		}
+	},{
+		deep: true,
+		immediate: true
+	})
+	const pauseVoice = () => {
+		if(!talkVoiceObj.value) return
+		talkVoiceObj.value.pause()
+		isPlaying.value = false
+		emit('changePlay', '')
+	}
+	const playVoice = () =>{
+		emit('changePlay', unref(dataInfo)?.id)
+		if(talkVoiceObj.value && talkVoiceObj.value.src) {
+			talkVoiceObj.value.play() 
+			return
+		}else{
+			talkVoiceObj.value.src = ''
+			if(unref(dataInfo).talkingVoice){
+				setTimeout(()=>{
+					talkVoiceObj.value.src = unref(dataInfo).talkingVoice
+					talkVoiceObj.value.play()
+					isPlaying.value = true
+				},100)
+			}
+		}
+	}
+	const initVoice = () => {
+		talkVoiceObj.value = uni.createInnerAudioContext()
+		talkVoiceObj.value.onEnded(()=>{
+			emit('changePlay', '')
+			talkVoiceObj.value.src = ''
+		})
+		talkVoiceObj.value.onError(()=>{
+			talkVoiceObj.value.src = ''
+		})
+		if(unref(dataInfo).intrctWay === '02'){
+			itemVoice.value = unref(dataInfo).talkingVoice
+			talkVoiceObj.value.src = itemVoice.value
+			setTimeout(()=>{
+				setVoiceTime(0)
+			},100)
+		}
+	}
+	const setVoiceTime = (sum) => {
+		sum += 1
+		if(Math.ceil(talkVoiceObj.value.duration)>0){
+			voiceTime.value = (Math.ceil(talkVoiceObj.value.duration) || 1 ) + 's'
+		}else{
+			if(sum === 20) {
+				voiceTime.value = 0 + 's'
+				return
+			}
+			setTimeout(()=>{
+				setVoiceTime(sum)
+			},200)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.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;
+			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 #eee;
+			.replay-btn{
+				float: left;
+				width: 46rpx;
+				height: 46rpx;
+				overflow: hidden;
+				margin-right: 16rpx;
+				margin-top: 25rpx;
+			}
+			.play-btn{
+				float: left;
+				width: 46rpx;
+				height: 46rpx;
+				overflow: hidden;
+				margin-right: 16rpx;
+				margin-top: 25rpx;
+			}
+			.text-btn{
+				float: left;
+				width: 46rpx;
+				height: 46rpx;
+				overflow: hidden;
+				line-height: 46rpx;
+				text-align: center;
+				color: #fff;
+				margin-right: 16rpx;
+				margin-top: 25rpx;
+				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;
+				}
+			}
+		}
+	}
+</style>

src/pages/examination/index.vue

@@ -57,8 +57,11 @@
 						@click="button_tab(1)"></uv-button>
 				</view>
 			</view>
-			<TouchBtn class="talk-btns" @uploadVoice="uploadRecordNow" @submitAnswer="submitAnswerNow"
-				:loadingText="sendLoadingText" :isLoading="!answerIsOver" :isDisabled="false" />
+			<view class="touch-btn-div" :class="{'show':showTouchBtn}">
+				<TouchBtn  class="talk-btns" @uploadVoice="uploadRecordNow"
+					@submitAnswer="submitAnswerNow" :loadingText="sendLoadingText" :isLoading="!answerIsOver"
+					:isDisabled="false" />
+			</view>
 		</view>
 	</view>
 </template>
@@ -85,6 +88,9 @@
 	import {
 		getPageCache
 	} from '@/common/common';
+	import {
+		commonUploadVoiceFile
+	} from "@/api/common.js"
 	const sendLoadingText = ref('问题回答中，请在问题回答结束后重试！')
 	const answerIsOver = ref(true)
 	const examId = ref('')
@@ -94,14 +100,19 @@
 		limitTm: 0,
 		papersName: '',
 	}) // 试卷信息
+	const topicList = reactive([]) // 问题列表
+	const questionNumber = ref(0) // 题号
+
+	const showTouchBtn = computed(() => {
+		return topicList[questionNumber.value]['qnsTyp'] === 'ES'
+	})
+	// const showTouchBtn = ref(true)
 	const progress = computed(() => { // 计算进度百分比（保留两位小数）
 		const total = topicList.length;
 		if (total === 0) return 0;
 		const completed = questionNumber.value + 1;
 		return Math.min(Math.round((completed / total) * 10000) / 100, 100);
 	})
-	const topicList = reactive([]) // 问题列表
-	const questionNumber = ref(0) // 题号
 	const swiperChange = (item) => {
 		questionNumber.value = item.detail.current
 	}
@@ -116,9 +127,54 @@
 		questionNumber.value = newNumber;
 	}
 	// 发送语音
-	const uploadRecordNow = (voicePath) => {}
+	const uploadRecordNow = (voicePath) => {
+		//#ifdef APP-PLUS
+		// talkingList.value.push({
+		// 	type: 'question',
+		// 	talkingText: '',
+		// 	isLoading: true
+		// })
+		// scrollToBottomNow()
+		commonUploadVoiceFile(voicePath, '/traask/traAskchat/voiceTrans', {}).then(res => {
+			let _res = JSON.parse(res.data)
+			console.log('_res', _res);
+			if (_res.rtnCode === '0000') {
+				// if (!!(_res.body.transContent || '').trim()) {
+				// 	askData.value = {
+				// 		reqBatch: reqBatch.value,
+				// 		intrctWay: '02', //01-文本；02-语音；03-图片
+				// 		intrctContent: _res.body.transContent,
+				// 		bucketKey: _res.body.fileId,
+				// 		ossFileAddr: _res.body.ossFileAddr,
+				// 		talkingVoice: voicePath
+				// 	}
+				// 	sendMessage({
+				// 		"commond": 'ASK',
+				// 		"body": askData.value
+				// 	})
+				// } else {
+				// 	// talkingList.value.pop()
+				// 	uni.showToast({
+				// 		title: '未识别到文字！',
+				// 		icon: "none",
+				// 		duration: 1000
+				// 	});
+				// }
+			} else {}
+		}).catch(err => {
+			// talkingList.value.pop()
+			uni.showToast({
+				title: '系统异常，请联系管理员',
+				icon: "none",
+				duration: 1000
+			});
+		})
+		// #endif
+	}
 	// 发送文本
-	const submitAnswerNow = (val, cb = null) => {}
+	const submitAnswerNow = (val, cb = null) => {
+		
+	}
 	// 初始化时检查
 	onLoad(() => {
 		const examination = getPageCache('examination')
@@ -136,13 +192,14 @@
 		})))
 	});
 	const hand_in_paper = () => {
-		console.log('点击交卷', topicList);
+		console.log('点击交卷', showTouchBtn.value);
+		showTouchBtn.value = !showTouchBtn.value
 	}
 </script>
 
 <style scoped lang="scss">
 	$bg-margin-left: 30rpx;
-
+	
 	.fixed-box {
 		position: fixed;
 		width: 100%;
@@ -153,8 +210,18 @@
 		background: #FFFFFF;
 	}
 
-	.fixed-btn-box {
 
+	.touch-btn-div {
+	  height: 0;
+	  overflow: hidden;
+	  transition: height 0.2s ease-out; 
+	}
+	
+	.touch-btn-div.show {
+	  height: 150rpx;
+	}
+	
+	.fixed-btn-box {
 		height: 154rpx;
 		display: flex;
 		justify-content: space-between;