From 0483b8d56d5e45fb710d9a85f5038f1969b2b87f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=88=AA?= <icho.yang@scai-global.com>
Date: Wed, 5 Nov 2025 15:28:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/sparring/components/answer.vue      | 339 ++++++++++++++++++
 src/pages/sparring/components/question.vue    | 266 ++++++++++++++
 .../sparring/components/talking-item.vue      | 128 +++++++
 src/pages/sparring/tip.vue                    |  30 ++
 4 files changed, 763 insertions(+)
 create mode 100644 src/pages/sparring/components/answer.vue
 create mode 100644 src/pages/sparring/components/question.vue
 create mode 100644 src/pages/sparring/components/talking-item.vue

diff --git a/src/pages/sparring/components/answer.vue b/src/pages/sparring/components/answer.vue
new file mode 100644
index 00000000..15e261fa
--- /dev/null
+++ b/src/pages/sparring/components/answer.vue
@@ -0,0 +1,339 @@
+<template>
+	<view class="answer-content" v-if="props.isLoading">
+		<view class="talking-cont">
+			<CommonLoading color="#06f" />
+		</view>
+	</view>
+	<view class="answer-content" v-else>
+		<view class="talking-cont">
+			<MarkdownPreview :mdString="mdText" />
+		</view>
+		<view class="btns-cont" v-if="!props.isLoading">
+			<view class="replay-btn" @click="reAnswer" v-if="!props.dataInfo.isHistory">
+				<image class="icon" src="@/static/images/dialog/answer-restart1.png" style="width: 100%; height: 100%"></image>
+			</view>
+			<view class="replay-btn" @click="stopAnswer" v-if="props.isAnswering && props.isLast">
+				<image class="icon" src="@/static/images/dialog/answer-stop1.png" style="width: 100%; height: 100%"></image>
+			</view>
+			<!-- 重新播放 -->
+			<view class="replay-btn" @click.stop="restartPlay">
+				<image class="icon" src="@/static/images/course/replay.png" style="width: 100%; height: 100%"></image>
+			</view>
+			<!-- 播放/暂停 -->
+			<view class="play-btn">
+				<image class="icon" src="@/static/images/course/play.png" style="width: 100%; height: 100%"
+					@click.stop="playVoice()" v-show="!isPlaying"></image>
+				<image class="icon" v-show="isPlaying" src="@/static/images/course/pause.png" style="width: 100%; height: 100%"
+					@click.stop="pauseVoice"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		computed,
+		ref,
+		watch,
+	} from 'vue'
+	import { onUnload } from '@dcloudio/uni-app';
+	import MarkdownPreview from '@/components/markdown-preview/markdown-preview.vue'
+	import common from '@/common/common'
+
+	const emit = defineEmits(['handleEvents', 'changePlay'])
+	const props = defineProps({
+		dataInfo: {
+			default: () => ({}),
+			type: Object
+		},
+		isLoading: {
+			default: false,
+			type: Boolean
+		},
+		isAnswering: {
+			default: false,
+			type: Boolean
+		},
+		isLast: {
+			default: false,
+			type: Boolean
+		}
+	})
+
+	watch(
+		() => props.dataInfo,
+		() => {}, {
+			deep: true,
+			immediate: true
+		}
+	)
+	watch(
+		() => props.isLoading,
+		() => {}, {
+			deep: true,
+			immediate: true
+		}
+	)
+	
+	const isPlaying = ref(false)
+	const mdText = computed(() => {
+		let _text = (props.dataInfo?.talkingText || '').replace(/\\n/g, `\n`);
+		return _text
+	})
+	const fileList = computed(() => props.dataInfo?.talkingFiles || [])
+	const crsList = computed(() => props.dataInfo?.talkingCrsList || [])
+	const activeNames = ref([1, 2])
+
+	const changeActive = val => {
+		if (activeNames.value.indexOf(val) >= 0) {
+			activeNames.value = activeNames.value.filter(t => t !== val)
+		} else {
+			activeNames.value.push(val)
+		}
+	}
+	const reAnswer = () => {
+		emit('handleEvents', 'reAnswer')
+	}
+	const stopAnswer = () => {
+		emit('handleEvents', 'stop')
+	}
+	const zanAnswer = () => {
+		emit('handleEvents', 'great')
+	}
+	const feedbackAnswer = () => {
+		emit('handleEvents', 'feedback')
+	}
+	const previewFile = item => {
+		emit('handleEvents', 'preview', item)
+	}
+	const previewCrs = item => {
+		common.navigateTo('/pages/courseDetail/index?crsId=' + item.crsId)
+	}
+	const playVoice = (readType = 'pgth') => {
+		let _content = mdText.value;
+		if (!_content) {
+			common.msg('没有可以播放的文字信息！');
+			return;
+		}
+		isPlaying.value = true
+		voiceLoading.value = true;
+		setTimeout(() => {
+			downloadFile(props.dataInfo?.talkingVoiceId)
+				.then((res) => {
+					if (res?.data) {
+						common.msg(res.data.message);
+						return;
+					}
+					voiceLoading.value = false;
+					itemVoice.value = res.tempFilePath;
+					talkVoiceObj.value.src = res.tempFilePath;
+					talkVoiceObj.value.play();
+				})
+				.catch((err) => {
+					voiceLoading.value = false;
+				});
+		}, 100);
+	};
+
+	const pauseVoice = () => {
+		if (!talkVoiceObj.value) return
+		talkVoiceObj.value.pause()
+		isPlaying.value = false
+		emit('changePlay', '')
+	}
+	onMounted(() => {
+		initVoice()
+	})
+	onUnload(() => {
+		pauseVoice()
+	})
+	watch(() => props.dataInfo.talkingVoice, (val) => {
+		if (val) {
+			initVoice()
+		}
+	}, {
+		deep: true,
+		immediate: true
+	})
+</script>
+
+<style scoped lang="scss">
+	.answer-content {
+		background-color: #f5f5f5;
+		padding: 20rpx;
+		border-radius: 15rpx;
+		padding-bottom: 10rpx;
+		position: relative;
+		overflow: hidden;
+		float: left;
+		width: 100%;
+		min-height: 80rpx;
+
+		.talking-cont {
+			padding-bottom: 20rpx;
+		}
+
+		.btns-cont {
+			overflow: hidden;
+			border-top: 3rpx solid #eee;
+			padding-bottom: 10rpx;
+
+			.replay-btn {
+				float: left;
+				width: 46rpx;
+				height: 46rpx;
+				overflow: hidden;
+				margin-right: 20rpx;
+				margin-top: 20rpx;
+			}
+
+			.play-btn {
+				float: left;
+				width: 46rpx;
+				height: 46rpx;
+				overflow: hidden;
+				margin-right: 20rpx;
+				margin-top: 20rpx;
+			}
+
+			.next-learn-btn {
+				float: left;
+				padding: 0 60rpx 0 20rpx;
+				height: 62rpx;
+				line-height: 62rpx;
+				font-size: 30rpx;
+				background-color: #06f;
+				color: #fff;
+				border-radius: 8rpx;
+				margin-top: 16rpx;
+				margin-right: 16rpx;
+				position: relative;
+
+				&.replay-study-btn {
+					float: right;
+				}
+
+				&.restart {
+					background-color: #eaf2ff;
+					color: #06f;
+				}
+
+				.icon-iamge {
+					width: 25rpx;
+					height: 25rpx;
+					position: absolute;
+					right: 20rpx;
+					top: 50%;
+					margin-top: -12rpx;
+				}
+			}
+
+			.replay-learn-btn {
+				float: left;
+				padding: 0 60rpx 0 20rpx;
+				height: 62rpx;
+				line-height: 62rpx;
+				font-size: 30rpx;
+				color: #06f;
+				background-color: #eaf2ff;
+				border-radius: 8rpx;
+				margin-top: 16rpx;
+				margin-right: 16rpx;
+				position: relative;
+
+				.icon-iamge {
+					width: 25rpx;
+					height: 25rpx;
+					position: absolute;
+					right: 20rpx;
+					top: 50%;
+					margin-top: -12rpx;
+				}
+			}
+
+			.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;
+				}
+			}
+		}
+
+		.link-cont-desc {
+			margin-bottom: 12rpx;
+			font-size: 24rpx;
+			color: #999;
+		}
+
+		.link-cont {
+			margin-bottom: 12rpx;
+			font-size: 28rpx;
+
+			.link-info {
+				height: 50rpx;
+				line-height: 50rpx;
+				overflow: hidden;
+				margin-bottom: 12rpx;
+
+				.info-text {
+					float: left;
+					padding-right: 20rpx;
+				}
+
+				&::after {
+					transition: all 0.3s ease-in-out;
+					content: '';
+					display: block;
+					float: left;
+					position: relative;
+					top: 12rpx;
+					width: 12rpx;
+					height: 12rpx;
+					border-right: 4rpx solid #333;
+					border-bottom: 4rpx solid #333;
+					transform: rotate(135deg);
+				}
+			}
+
+			&.is-active {
+				.link-info {
+					&::after {
+						top: 18rpx;
+						transform: rotate(45deg);
+					}
+				}
+
+				.link-items {
+					max-height: 600rpx;
+				}
+			}
+
+			.link-items {
+				max-height: 0rpx;
+				overflow: hidden;
+				transition: all 0.3s ease-in-out;
+
+				.link-item {
+					line-height: 48rpx;
+					color: #06f;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/sparring/components/question.vue b/src/pages/sparring/components/question.vue
new file mode 100644
index 00000000..96121d50
--- /dev/null
+++ b/src/pages/sparring/components/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>
\ No newline at end of file
diff --git a/src/pages/sparring/components/talking-item.vue b/src/pages/sparring/components/talking-item.vue
new file mode 100644
index 00000000..b3161974
--- /dev/null
+++ b/src/pages/sparring/components/talking-item.vue
@@ -0,0 +1,128 @@
+<template>
+	<view class="talking-item">
+		<!-- 头像信息 -->
+		<view class="user-info">
+			<view class="avatar-box">
+				<ImagePreview class="img-box" :imgId="roleInfo?.ossAddr"></ImagePreview>
+			</view>
+			<view class="ai-name">
+				{{ roleInfo?.chaName }}
+				<!-- <view class="ai-name-desc">{{ roleInfo?.teacherDesc }}</view> -->
+			</view>
+		</view>
+		<questionVue v-if="talkingType === 'question'" @changePlay="changePlay" :dataInfo="talkingInfo" :isLast="isLast"
+			:activeVoiceId="activeVoiceId"></questionVue>
+		<answerVue v-else-if="talkingType === 'answer'" @changePlay="changePlay" :dataInfo="props.talkingInfo" :isLast="isLast"
+			:isLoading="!!props.talkingInfo.isLoading" :isAnswering="props.isAnswering" @handleEvents="handleEvents">
+		</answerVue>
+		<view v-else></view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		toRefs,
+		watch
+	} from 'vue'
+	import questionVue from './question.vue';
+	import answerVue from './answer.vue';
+
+	const emit = defineEmits(['handleEvents'])
+	const props = defineProps({
+		talkingType: {
+			default: 'question',
+			type: String
+		},
+		talkingInfo: {
+			default: () => ({}),
+			type: Object
+		},
+		roleInfo:{
+			default: () => ({}),
+			type: Object
+		},
+		activeVoiceId: {
+			default: '',
+			type: String
+		},
+		isAnswering: {
+			default: false,
+			type: Boolean
+		},
+		isLast: {
+			default: false,
+			type: Boolean
+		},
+	})
+	watch(() => props.activeVoiceId, () => {}, {
+		deep: true,
+		immediate: true
+	})
+	watch(() => props.talkingInfo, () => {}, {
+		deep: true,
+		immediate: true
+	})
+	const {
+		talkingType
+	} = toRefs(props)
+	const handleEvents = (type, info = {}) => {
+		emit('handleEvents', {
+			type,
+			data: props.talkingInfo,
+			id: "",
+			info
+		})
+	}
+	const changePlay = (id) => {
+		emit('handleEvents', {
+			type: 'changePlay',
+			data: props.talkingInfo,
+			id,
+			info: {}
+		})
+	}
+</script>
+
+<style scoped lang="scss">
+	.talking-item {
+		overflow: hidden;
+		margin-top: 0rpx;
+
+		&+.talking-item {
+			margin-top: 30rpx;
+		}
+		.user-info {
+			overflow: hidden;
+		
+			.avatar-box {
+				float: left;
+				width: 76rpx;
+				height: 76rpx;
+				border: 3rpx solid #fff;
+				background-color: #f1f1f1;
+				overflow: hidden;
+				border-radius: 10rpx;
+				margin-right: 16rpx;
+				margin-bottom: 16rpx;
+		
+				.img-box {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		
+			.ai-name {
+				float: left;
+				color: #666;
+				font-size: 25rpx;
+				line-height: 35rpx;
+		
+				.ai-name-desc {
+					color: #999;
+					margin-left: 16rpx;
+					display: inline-block;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/sparring/tip.vue b/src/pages/sparring/tip.vue
index 35dd02a9..fe9f15f5 100644
--- a/src/pages/sparring/tip.vue
+++ b/src/pages/sparring/tip.vue
@@ -1,5 +1,9 @@
 <template>
 	<view class="sparring-detail max_page">
+		<view class="sparring-detail-loading" v-show="showLoading">
+			<view class="loading-img">
+			</view>
+		</view>
 		<view class="sparring-detail-body">
 			<view class="top-box">
 				<view class="top-title">
@@ -99,6 +103,7 @@
 	const roleList = ref([])
 	const currentIndex = ref(0)
 	const showRoleInfo = ref(false)
+	const showLoading = ref(true)
 	const gender = ref('m')
 	const activeRole = computed(()=>{
 		if(roleList.value.length>0){
@@ -113,6 +118,9 @@
 			traId: traId.value
 		}).then(res => {
 			roleList.value = res.body || []
+			setTimeout(()=> {
+				showLoading.value = false
+			}, Math.random() * 1000 + 500)
 		})
 	}
 	const onSwiperChange = (data) => {
@@ -140,6 +148,28 @@
 		background-image: url(@/static/images/sparring/bg.png);
 		background-size: cover;
 		// background-color: #f2f6fd;
+		.sparring-detail-loading{
+			position: fixed;
+			z-index: 20;
+			height: 100vh;
+			width: 100vw;
+			background-image: url(@/static/images/sparring/bg.png);
+			.loading-img{
+				position: absolute;
+				width: 380rpx;
+				height: 590rpx;
+				top: 40%;
+				transform: translateY(-50%) translateX(-50%);
+				left: 50%;
+				padding-top: 540rpx;
+				line-height: 50rpx;
+				box-sizing: border-box;
+				text-align: center;
+				background-image: url(@/static/images/sparring/waiting.png);
+				background-repeat: no-repeat;
+				background-size: cover;
+			}
+		}
 		.sparring-detail-body {
 			position: absolute;
 			overflow-x: hidden;