录音文件修改

src/components/Adult/preview/InputHasRecord.vue

@@ -5,7 +5,9 @@
           <p v-if="items.con">{{items.con}}</p>
           <div class="inputInner">
               <el-input :class="['textarea',items.record?'':'textareaNoRecord']" type="textarea" v-model="textareaCon" placeholder="输入"></el-input>
-              <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" v-if="items.record"/>
+              <div v-if="items.record" class="luyin-inner">
+                  <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box"/>
+              </div>
           </div>
       </div>
   </div>
@@ -54,6 +56,9 @@ export default {
         background: #fff;
         overflow: hidden;
         margin: 8px 0 16px 0;
+        >div.luyin-inner{
+            border-top: 1px solid rgba(0, 0, 0, 0.1);
+        }
     }
     p{
         font-size: 16px;
@@ -62,10 +67,11 @@ export default {
         margin: 0 4px;
     }
     .luyin-box{
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
         justify-content: start;
-        padding: 4px 12px;
+        padding: 4px 8px;
         height: 40px;
+        width: 280px;
+        justify-content: flex-start;
     }
 }
 </style>

src/components/Adult/preview/Soundrecord.vue

@@ -13,8 +13,9 @@
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
         v-if="type && type == 'normal'"
-        >{{ handleDateTime(recordtime) }}</span
+        >{{isPlaying?'-':''}}{{ handleDateTime(recordtime) }}</span
       >
+      <div class="line" v-if="type && type == 'normal'"></div>
       <div
         :class="['playBack', hasMicro]"
         @click="
@@ -31,16 +32,6 @@
         :class="['record', microphoneStatus ? 'active' : '']"
         @click="microphone"
       ></div>
-      <div
-        :class="['playBack', hasMicro]"
-        @click="
-          playmicrophone(
-            selectIndex || selectIndex == 0
-              ? recordList[selectIndex].toltime
-              : ''
-          )
-        "
-      ></div>
       <el-select
         v-model="selectIndex"
         placeholder="无录音"
@@ -55,6 +46,16 @@
         >
         </el-option>
       </el-select>
+      <div
+        :class="['playBack', hasMicro]"
+        @click="
+          playmicrophone(
+            selectIndex || selectIndex == 0
+              ? recordList[selectIndex].toltime
+              : ''
+          )
+        "
+      ></div>
       <a
         :class="['record-delete', hasMicro ? 'record-delete-has' : '']"
         @click="handleDelete"
@@ -71,7 +72,7 @@
           microphoneStatus ? 'record-ing' : '',
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
-        >{{ handleDateTime(recordtime) }}</span
+        >{{isPlaying?'-':''}}{{ handleDateTime(recordtime) }}</span
       >
       <el-select
         v-model="selectIndex"
@@ -127,6 +128,7 @@ export default {
       selectIndex: null, // 选中的录音索引
       oldIndex: null, // 存储播放录音索引
       playtime: 0, // 播放时间
+      isPlaying: false,
     };
   },
   computed: {},
@@ -141,23 +143,31 @@ export default {
         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.recordFile,
+            id: _this.recordFile + Math.round(Math.random()*10),
+          };
+          _this.recordList.push(obj);
+          _this.recordFile++;
+          _this.selectIndex = _this.recordList.length - 1;
       } else {
-        // this.hasMicro = "normal";
+        this.hasMicro = "normal";
         this.recorder.stop();
         clearInterval(_this.timer);
-        if (
-          (this.type && this.type == "normal") ||
-          (this.type && this.type == "mini")
-        ) {
-          this.hasMicro = "normal";
-        } else {
-          this.recordtime = 0;
-        }
+        // 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; //录音总大小
         //录音结束，获取取录音数据
@@ -168,26 +178,20 @@ export default {
         var reader = new window.FileReader();
         reader.readAsDataURL(wav);
         reader.onloadend = function () {
-          let obj = {
-            name: "新录音" + _this.recordFile,
-            wavData: reader.result,
-            toltime: Math.floor(toltime),
-            fileSize: fileSize,
-            id: _this.recordFile + String(toltime),
-          };
-          _this.recordList.push(obj);
-          _this.recordFile++;
-          if (
-            (_this.type && _this.type == "normal") ||
-            (_this.type && _this.type == "mini")
-          ) {
-            _this.selectIndex = _this.recordList.length - 1;
+            _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;
-          }
+        //   }
         };
       }
     },
     playmicrophone(totalTimes) {
+        this.isPlaying = true
       if (this.selectIndex || this.selectIndex == 0) {
         let totalTime = totalTimes;
         let _this = this;
@@ -267,7 +271,7 @@ export default {
     handleDelete() {
       if (this.selectIndex || this.selectIndex == 0) {
         this.recordList.splice(this.selectIndex, 1);
-        this.selectIndex = null;
+        this.selectIndex = this.recordList.length>1?this.recordList.length-1:null;
         this.hasMicro = "";
         this.recordtime = 0;
       }
@@ -288,12 +292,14 @@ export default {
     let _this = this;
     _this.audio.addEventListener("play", function () {
       _this.changeStatus("active");
+      _this.isPlaying = true
     });
     _this.audio.addEventListener("pause", function () {
       _this.changeStatus("normal");
     });
     _this.audio.addEventListener("ended", function () {
       _this.changeStatus("normal");
+      _this.isPlaying = false
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -334,6 +340,13 @@ export default {
       background-size: 100%;
     }
   }
+  .line{
+      width: 1px;
+      height: 16px;
+      background: rgba(0, 0, 0, 0.85);
+      opacity: 0.2;
+      margin-left: 8px;
+  }
   .record {
     width: 24px;
     height: 24px;
@@ -344,7 +357,12 @@ export default {
     &.active {
       background: url("../../../assets/newImage/common/luyin-active.png") center
         no-repeat;
-      background-size: 100%;
+      background-size: 16px;
+    }
+    &.active:hover{
+        background: url("../../../assets/newImage/common/luyin-stop.png") center
+        no-repeat;
+        background-size: 16px;
     }
   }
   .record-time {
@@ -383,7 +401,7 @@ export default {
 <style lang="scss">
 .NNPE-Book-record {
   .el-select {
-    width: 128px;
+    flex: 1;
     height: 24px;
     &.proSelect {
       width: 78px;

src/components/Adult/preview/TextInputRecord.vue

@@ -131,6 +131,7 @@ export default {
                 width: 292px;
                 height: 40px;
                 margin-left: 8px;
+                padding: 0 8px;
             }
         }
     }