录音

src/components/Adult/preview/Soundrecord.vue

@@ -3,7 +3,7 @@
   <div class="NNPE-Book-record">
     <template v-if="(type && type == 'normal') || (type && type == 'mini')">
       <div
-        :class="['record', microphoneStatus ? 'active' : '']"
+        :class="['record', microphoneStatus ? 'active' : '', !this.TaskModel||this.TaskModel!='ANSWER'?'':'notAllow']"
         @click="microphone"
       />
       <span
@@ -30,7 +30,7 @@
     </template>
     <template v-else-if="type && type == 'pro'">
       <div
-        :class="['record', microphoneStatus ? 'active' : '']"
+        :class="['record', microphoneStatus ? 'active' : '', !this.TaskModel||this.TaskModel!='ANSWER'?'':'notAllow']"
         @click="microphone"
       />
       <el-select
@@ -41,7 +41,7 @@
       >
         <el-option
           v-for="(item, index) in recordList"
-          :key="item.id"
+          :key="'select'+item.id"
           :label="item.name"
           :value="index"
         />
@@ -57,13 +57,13 @@
         "
       />
       <a
-        :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
+        :class="['record-delete', hasMicro&&(!this.TaskModel||this.TaskModel!='ANSWER') ? 'record-delete-has' : '', !this.TaskModel||this.TaskModel!='ANSWER'?'':'notAllow']"
         @click="handleDelete"
       />
     </template>
     <template v-else>
       <div
-        :class="['record', microphoneStatus ? 'active' : '']"
+        :class="['record', microphoneStatus ? 'active' : '', !this.TaskModel||this.TaskModel!='ANSWER'?'':'notAllow']"
         @click="microphone"
       />
       <span
@@ -81,7 +81,7 @@
       >
         <el-option
           v-for="(item, index) in recordList"
-          :key="item.id"
+          :key="'selectbig' + item.id + index "
           :label="item.name"
           :value="index"
         />
@@ -97,7 +97,7 @@
         "
       />
       <a
-        :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
+        :class="['record-delete', hasMicro&&(!this.TaskModel||this.TaskModel!='ANSWER') ? 'record-delete-has' : '', !this.TaskModel||this.TaskModel!='ANSWER'?'':'notAllow']"
         @click="handleDelete"
       />
     </template>
@@ -115,6 +115,7 @@ export default {
     "selectData",
     "tmIndex",
     "answerRecordList",
+    "TaskModel"
   ],
   data() {
     return {
@@ -182,77 +183,66 @@ export default {
     // 开始录音
     microphone() {
       let _this = this;
+      if(!this.TaskModel||this.TaskModel!='ANSWER'){
+          if (!_this.microphoneStatus) {
+            _this.hasMicro = "";
+            _this.$root.isRecording = true;
+            _this.$emit("getWavblob", null);
+            this.$emit("getSelectData", { type: "" });
+            // 开始录音
+            this.recorder.start();
+            this.microphoneStatus = true;
+            this.recordtime = 0;
+            this.isPlaying = false;
+            clearInterval(_this.timer);
+                _this.timer = setInterval(() => {
+                _this.recordtime++;
+            }, 1000);
+            this.$emit("handleParentPlay");
+            let obj = {
+                name: _this.fileName
+                    ? _this.fileName + _this.recordFile
+                    : "新录音" + _this.recordFile,
+                id: _this.recordFile + Math.round(Math.random() * 10),
+            };
+            if (this.selectData) obj.selectData = this.selectData;
+                _this.recordList.push(obj);
 
-      if (!_this.microphoneStatus) {
-        _this.hasMicro = "";
-        _this.$root.isRecording = true;
-        _this.$emit("getWavblob", null);
-        this.$emit("getSelectData", { type: "" });
-        // 开始录音
-        this.recorder.start();
-        this.microphoneStatus = true;
-        this.recordtime = 0;
-        this.isPlaying = false;
-        clearInterval(_this.timer);
-        _this.timer = setInterval(() => {
-          _this.recordtime++;
-        }, 1000);
-        this.$emit("handleParentPlay");
-        let obj = {
-          name: _this.fileName
-            ? _this.fileName + _this.recordFile
-            : "新录音" + _this.recordFile,
-          id: _this.recordFile + Math.round(Math.random() * 10),
-        };
-        if (this.selectData) obj.selectData = this.selectData;
-        _this.recordList.push(obj);
-
-        _this.recordFile++;
-        _this.selectIndex = _this.recordList.length - 1;
-      } else {
-        this.hasMicro = "normal";
-        this.recorder.stop();
-        _this.$root.isRecording = false;
-        clearInterval(_this.timer);
-        // if (
-        //   (this.type && this.type == "normal") ||
-        //   (this.type && this.type == "mini")
-        // ) {
-        //   this.hasMicro = "normal";
-        // } else {
-        //   this.recordtime = 0;
-        // }
-        let toltime = this.recorder.duration; // 录音总时长
-        let fileSize = this.recorder.fileSize; // 录音总大小
-        // 录音结束，获取取录音数据
-        let PCMBlob = this.recorder.getPCMBlob(); // 获取 PCM 数据
-        let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
-        // this.wavblob = wav;
-        this.microphoneStatus = false;
-        let reader = new window.FileReader();
-        reader.readAsDataURL(wav);
-        reader.onloadend = () => {
-          _this.recordList[_this.selectIndex].wavData = reader.result;
-          _this.recordList[_this.selectIndex].toltime = Math.floor(toltime);
-          _this.recordList[_this.selectIndex].fileSize = fileSize;
-          //   if (
-          //     (_this.type && _this.type == "normal") ||
-          //     (_this.type && _this.type == "mini")
-          //   ) {
-          _this.wavblob = _this.recordList[_this.selectIndex].wavData;
-          _this.$emit("getWavblob", _this.wavblob);
-          _this.$emit(
-            "handleWav",
-            JSON.parse(JSON.stringify(_this.recordList)),
-            _this.tmIndex
-          );
-          if (this.recordList[this.selectIndex].selectData)
-            this.$emit(
-              "getSelectData",
-              this.recordList[this.selectIndex].selectData
-            );
-          //   }
-        };
+                _this.recordFile++;
+                _this.selectIndex = _this.recordList.length - 1;
+            } else {
+                this.hasMicro = "normal";
+                this.recorder.stop();
+                _this.$root.isRecording = false;
+                clearInterval(_this.timer);
+                let toltime = this.recorder.duration; // 录音总时长
+                let fileSize = this.recorder.fileSize; // 录音总大小
+                // 录音结束，获取取录音数据
+                let PCMBlob = this.recorder.getPCMBlob(); // 获取 PCM 数据
+                let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
+                // this.wavblob = wav;
+                this.microphoneStatus = false;
+                let reader = new window.FileReader();
+                reader.readAsDataURL(wav);
+                reader.onloadend = () => {
+                _this.recordList[_this.selectIndex].wavData = reader.result;
+                _this.recordList[_this.selectIndex].toltime = Math.floor(toltime);
+                _this.recordList[_this.selectIndex].fileSize = fileSize;
+                _this.wavblob = _this.recordList[_this.selectIndex].wavData;
+                _this.$emit("getWavblob", _this.wavblob);
+                _this.$emit(
+                    "handleWav",
+                    JSON.parse(JSON.stringify(_this.recordList)),
+                    _this.tmIndex
+                );
+            if (this.recordList[this.selectIndex].selectData)
+                this.$emit(
+                "getSelectData",
+                this.recordList[this.selectIndex].selectData
+                );
+            //   }
+            };
+        }
       }
     },
     playmicrophone(totalTimes) {
@@ -263,9 +253,11 @@ export default {
           let _this = this;
           if (!this.audio.paused) {
             this.audio.pause();
+            this.hasMicro = 'normal'
             clearInterval(_this.timer);
           } else if (this.audio.paused && _this.oldIndex == _this.selectIndex) {
             _this.audio.play();
+            this.hasMicro = 'active'
             if (_this.recordtime == 0) {
               _this.recordtime = totalTimes;
               _this.playtime = 0;
@@ -279,6 +271,7 @@ export default {
               }
             }, 1000);
           } else {
+            _this.hasMicro = 'active'
             _this.audio.pause();
             _this.audio.load();
             _this.audio.src = _this.wavblob;
@@ -341,7 +334,7 @@ export default {
     },
     handleDelete() {
       let _this = this;
-      if (_this.hasMicro) {
+      if (_this.hasMicro&&(!this.TaskModel||this.TaskModel!='ANSWER')) {
         if (_this.selectIndex || _this.selectIndex == 0) {
           _this.recordList.splice(_this.selectIndex, 1);
           _this.$emit(
@@ -365,6 +358,10 @@ export default {
           _this.oldIndex = null;
           _this.isPlaying = false;
           clearInterval(_this.timer);
+          _this.audio.addEventListener("ended", function () {
+            _this.changeStatus("normal");
+            _this.isPlaying = false;
+          });
         }
       }
     },
@@ -424,6 +421,12 @@ export default {
         no-repeat;
       background-size: 100%;
     }
+    &.notAllow{
+        cursor: not-allowed;
+        background: url("../../../assets/newImage/common/luyin-notAllow.png") center
+            no-repeat;
+        background-size: 100%;
+    }
   }
   .record-time {
     color: rgba(0, 0, 0, 0.3);
@@ -459,6 +462,9 @@ export default {
         background-size: 100%;
       }
     }
+    &.notAllow{
+        cursor: not-allowed;
+    }
   }
 }
 </style>

src/components/Adult/preview/TableView.vue

@@ -50,7 +50,7 @@
     </div>
     <!-- 录音 -->
     <div class="record">
-      <Soundrecord @handleWav="handleWav" type="pro-plus" class="luyin-box" />
+      <Soundrecord :answerRecordList="curQue.Bookanswer.recordList" @handleWav="handleWav" :TaskModel="TaskModel" type="pro-plus" class="luyin-box" />
     </div>
   </div>
 </template>
@@ -89,7 +89,6 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      console.log(this.TaskModel)
       let curCorrect = [];
       this.curQue.option.forEach((item) => {
         let curCorrectItem = []