添加音频功能

徐浩
components/RecordingDevice/index.vue
components/VoicePlayback/index.vue
new_tec/onLineDetails/onLineDetails.vue
--- a/components/RecordingDevice/index.vue
查看文件 @ba3b50e
+++ b/components/RecordingDevice/index.vue
查看文件 @ba3b50e
 <template>
 	<view class="RecordingDevice">
-		<view class="RecordingDevice-2">
-			<VoicePlayback ref="voicePlayback"/>
+		<view class="RecordingDevice-2" v-if="speech.url">
+			<VoicePlayback ref="voicePlayback" />
 		</view>
 		<view class="RecordingDevice-1">
 			<view class="RecordingDevice-1-i">
@@ -67,10 +67,33 @@
 	}
 	export default {
 		name: 'RecordingDevice',
+		props: {
+			value: {
+				type: Object,
+				default: () => {
+					return {
+						duration: 0,
+						url: ''
+					}
+				}
+			}
+		},
+		model: {
+			event: 'input',
+			prop: 'value'
+		},
 		components: {
 			VoicePlayback
 		},
 		computed: {
+			speech: {
+				get() {
+					return this.value
+				},
+				set(val) {
+					this.$emit('input', val)
+				}
+			},
 		    formattedTime() {
 				const hours = this.padDigits(this.hours);
 				const minutes = this.padDigits(this.minutes);
@@ -84,6 +107,7 @@
 				// 是否正在录制
 				isTape: RECORDINGSTATUS.NOTSTARTEDYET,
 				recorder: null,
+				totalTime: 0,
 				seconds: 0,
 				minutes: 0,
 				hours: 0,
@@ -115,6 +139,7 @@
 			},
 			startTimer() {
 				this.timer = setInterval(() => {
+					this.totalTime++
 					this.seconds++;
 					if (this.seconds >= 60) {
 					  this.seconds = 0;
@@ -129,6 +154,7 @@
 			resetTimer() {
 				clearInterval(this.timer);
 				this.timer = null;
+				this.totalTime = 0
 				this.seconds = 0
 				this.minutes = 0
 				this.hours = 0
@@ -179,12 +205,23 @@
 					})
 					return
 				}
+				let result = {
+					duration: this.totalTime
+				}
+				this.speech = { ...this.speech, ...result }
 				this.resetTimer()
 				this.recorder.stop();
 			},
 			uploadFiles(tempFilePath) {
 				this.$service.wx_upload(tempFilePath, 'video').then(res => {
-					this.$refs.voicePlayback.setUrl(res.data)
+					this.$set(this.speech, 'url', res.data)
+					let result = {
+						url: res.data
+					}
+					this.speech = { ...this.speech, ...result }
+					this.$nextTick(() => {
+						this.$refs.voicePlayback.init(this.speech)
+					})
 				})
 			}
 		}
--- a/components/VoicePlayback/index.vue
查看文件 @ba3b50e
+++ b/components/VoicePlayback/index.vue
查看文件 @ba3b50e
@@ -22,7 +22,6 @@
 			}
 		},
 		mounted() {
-			this.init()
 		},
 		onUnload() {
 			this.audioContext.stop();
@@ -36,12 +35,13 @@
 					this.audioContext.pause()
 				}
 			},
-			setUrl(url) {
+			setUrl({url, duration}) {
 				this.audioContext.src  = url
+				this.duration = duration
 			},
-			init() {
+			init({ url, duration }) {
 				this.audioContext = wx.createInnerAudioContext();
-				this.audioContext.src = require("@/static/imagesV2/test.mp3")
+				this.audioContext.src = url
 				this.audioContext.onPlay(() => {
 					this.isPlay = true
 				});
@@ -58,12 +58,11 @@
 					this.audioContext.play()
 					this.audioContext.pause()
 					setTimeout(() => {
-						this.duration = this.audioContext.duration
+						this.duration = duration
 						this.remainingTime = this.duration
 					}, 100)
 				})
 				this.audioContext.onTimeUpdate(() => {
-					this.duration = this.audioContext.duration
 					this.currentTime = this.audioContext.currentTime
 					this.remainingTime = this.duration - this.currentTime
 				});
--- a/new_tec/onLineDetails/onLineDetails.vue
查看文件 @ba3b50e
+++ b/new_tec/onLineDetails/onLineDetails.vue
查看文件 @ba3b50e
@@ -52,7 +52,7 @@
 						<view class="myQuestion-2-i-3-c-1-r">{{info.answer_time}}</view>
 					</view>
 					<view style="margin-top: 28rpx;" v-if="isVoiceReply">
-						<VoicePlayback />
+						<VoicePlayback ref="voicePlaybackRef"/>
 					</view>
 					<view class="myQuestion-2-i-3-c-2" v-else>
 						{{info.answer}}
@@ -74,7 +74,7 @@
 				<textarea class="onLineDetails-1-2-c" placeholder="请输入" v-model="answer"></textarea>
 			</view>
 			<view v-else>
-				<RecordingDevice />
+				<RecordingDevice v-model="speech" />
 			</view>
 		</view>
@@ -103,7 +103,11 @@
 				answerType: MESSAGETYPE.TEXTANSWER,
 				value: 5,
 				answer: '',
-				info: {}
+				info: {},
+				speech: {
+					duration: 0,
+					url: ''
+				}
 			};
 		},
 		computed: {
@@ -113,7 +117,7 @@
 			},
 			// 是否查看
 			isWatch() {
-				return this.info.answer_type === ANSWERTYPE.ANSWERED
+				return this.info.answer_type !== ANSWERTYPE.TOBEANSWERED
 			},
 			// 是否语音回复
 			isVoiceReply() {
@@ -145,6 +149,15 @@
 					uni.hideLoading();
 					if (res.code == 1) {
 						this.info = res.data;
+						if(this.info.answer_type === MESSAGETYPE.VOICEANSWERS) {
+							let result = this.info.answer
+							if(result) {
+								result = JSON.parse(result)
+								this.$nextTick(() => {
+									this.$refs.voicePlaybackRef.init(result)
+								})
+							}
+						}
 					}else {
 						if (res.msg) {
 							uni.showToast({
@@ -174,15 +187,23 @@
 					title: '提交中',
 					mask: true
 				})
-				const { answerType, answer, id } = this;
+				let { answerType, answer, id } = this;
 				if(answerType === MESSAGETYPE.TEXTANSWER && !answer) {
 					uni.showToast({
 						title: '请输入解答内容',
 						icon: 'none'
 					});
 					return false;
+				} else if(answerType === MESSAGETYPE.VOICEANSWERS && !this.speech.url) {
+					uni.showToast({
+						title: '请录制音频',
+						icon: 'none'
+					});
+					return false;
+				}
+				if(answerType === MESSAGETYPE.VOICEANSWERS) {
+					answer = JSON.stringify(this.speech)
 				}
-				
 				this.$service.P_post('/lecturer/answer', {
 					answer_type: answerType,
 					answer,