|
@@ -1,7 +1,10 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="NNPE-Book-record">
|
|
|
- <div :class="['record-main', microphoneStatus ? 'active' : '']">
|
|
|
+ <div
|
|
|
+ :class="['record-main', microphoneStatus ? 'active' : '']"
|
|
|
+ v-if="!TaskModel || TaskModel != 'ANSWER'"
|
|
|
+ >
|
|
|
<div class="record-main-inner" @click="microphone">
|
|
|
<div class="record" />
|
|
|
<span v-if="microphoneStatus" class="record-time">{{
|
|
@@ -11,7 +14,11 @@
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="!microphoneStatus && recordList.length > 0"
|
|
|
- :class="['hasRecord', bgIndex == 1 ? 'hasRecord-white' : '']"
|
|
|
+ :class="[
|
|
|
+ 'hasRecord',
|
|
|
+ bgIndex == 1 ? 'hasRecord-white' : '',
|
|
|
+ TaskModel == 'ANSWER' ? 'hasRecord-answer' : '',
|
|
|
+ ]"
|
|
|
>
|
|
|
<div
|
|
|
:class="[bgIndex == 1 ? 'playBack-white' : 'playBack', hasMicro]"
|
|
@@ -23,9 +30,9 @@
|
|
|
)
|
|
|
"
|
|
|
/>
|
|
|
- <span
|
|
|
- class="record-time"
|
|
|
- >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span>
|
|
|
+ <span class="record-time"
|
|
|
+ >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
|
|
|
+ >
|
|
|
<el-select
|
|
|
v-model="selectIndex"
|
|
|
placeholder="无录音"
|
|
@@ -47,7 +54,16 @@
|
|
|
import Recorder from "js-audio-recorder"; // 录音插件
|
|
|
export default {
|
|
|
components: {},
|
|
|
- props: ["wavData", "type", "fileName", "selectData", "bgIndex"],
|
|
|
+ props: [
|
|
|
+ "wavData",
|
|
|
+ "type",
|
|
|
+ "fileName",
|
|
|
+ "selectData",
|
|
|
+ "bgIndex",
|
|
|
+ "tmIndex",
|
|
|
+ "answerRecordList",
|
|
|
+ "TaskModel",
|
|
|
+ ],
|
|
|
data() {
|
|
|
return {
|
|
|
recorder: new Recorder({
|
|
@@ -84,6 +100,13 @@ export default {
|
|
|
// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
mounted() {
|
|
|
let _this = this;
|
|
|
+ _this.recordList = _this.answerRecordList
|
|
|
+ ? JSON.parse(JSON.stringify(_this.answerRecordList))
|
|
|
+ : [];
|
|
|
+ if (_this.recordList.length > 0) {
|
|
|
+ _this.selectIndex = 0;
|
|
|
+ _this.handleChangeRecord(0);
|
|
|
+ }
|
|
|
_this.audio.addEventListener("play", function () {
|
|
|
_this.changeStatus("active");
|
|
|
_this.isPlaying = true;
|
|
@@ -112,7 +135,7 @@ export default {
|
|
|
microphone() {
|
|
|
let _this = this;
|
|
|
if (!this.microphoneStatus) {
|
|
|
- _this.hasMicro=""
|
|
|
+ _this.hasMicro = "";
|
|
|
_this.$emit("getWavblob", null);
|
|
|
this.$emit("getSelectData", { type: "" });
|
|
|
// 开始录音
|
|
@@ -174,7 +197,7 @@ export default {
|
|
|
_this.$emit("getMicrophoneStatus", _this.microphoneStatus);
|
|
|
},
|
|
|
playmicrophone(totalTimes) {
|
|
|
- if(this.hasMicro){
|
|
|
+ if (this.hasMicro) {
|
|
|
this.isPlaying = true;
|
|
|
if (this.selectIndex || this.selectIndex == 0) {
|
|
|
let totalTime = totalTimes;
|
|
@@ -253,31 +276,33 @@ export default {
|
|
|
this.audio.pause();
|
|
|
this.oldIndex = null;
|
|
|
this.$emit("getWavblob", this.wavblob);
|
|
|
- if (this.recordList[index].selectData) { this.$emit("getSelectData", this.recordList[index].selectData); }
|
|
|
+ if (this.recordList[index].selectData) {
|
|
|
+ this.$emit("getSelectData", this.recordList[index].selectData);
|
|
|
+ }
|
|
|
this.$emit("sentPause", false);
|
|
|
},
|
|
|
handleDelete() {
|
|
|
- if(this.hasMicro){
|
|
|
- if (this.selectIndex || this.selectIndex == 0) {
|
|
|
- this.recordList.splice(this.selectIndex, 1);
|
|
|
- this.selectIndex =
|
|
|
- this.recordList.length > 0 ? this.recordList.length - 1 : null;
|
|
|
- this.hasMicro = this.recordList.length > 0 ? "normal" : "";
|
|
|
- this.recordtime =
|
|
|
- this.recordList.length > 0
|
|
|
- ? this.recordList[this.selectIndex].toltime
|
|
|
- : 0;
|
|
|
- this.audio.pause();
|
|
|
- this.audio = new window.Audio();
|
|
|
- this.wavblob =
|
|
|
- this.recordList.length > 0
|
|
|
- ? this.recordList[this.selectIndex].wavData
|
|
|
- : null;
|
|
|
- this.oldIndex = null;
|
|
|
- this.isPlaying = false;
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- this.$emit("getRerordStatus", this.recordList.length > 0);
|
|
|
+ if (this.hasMicro) {
|
|
|
+ if (this.selectIndex || this.selectIndex == 0) {
|
|
|
+ this.recordList.splice(this.selectIndex, 1);
|
|
|
+ this.selectIndex =
|
|
|
+ this.recordList.length > 0 ? this.recordList.length - 1 : null;
|
|
|
+ this.hasMicro = this.recordList.length > 0 ? "normal" : "";
|
|
|
+ this.recordtime =
|
|
|
+ this.recordList.length > 0
|
|
|
+ ? this.recordList[this.selectIndex].toltime
|
|
|
+ : 0;
|
|
|
+ this.audio.pause();
|
|
|
+ this.audio = new window.Audio();
|
|
|
+ this.wavblob =
|
|
|
+ this.recordList.length > 0
|
|
|
+ ? this.recordList[this.selectIndex].wavData
|
|
|
+ : null;
|
|
|
+ this.oldIndex = null;
|
|
|
+ this.isPlaying = false;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ this.$emit("getRerordStatus", this.recordList.length > 0);
|
|
|
}
|
|
|
},
|
|
|
}, // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
@@ -419,6 +444,10 @@ export default {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
+ &-answer {
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|