|
@@ -1,5 +1,30 @@
|
|
|
<template>
|
|
|
<div class="record_box">
|
|
|
+ <div class="ca-b-o-main2" style="height: 25px;">
|
|
|
+ <div class="select_box" v-if="audioUrlArray.length">
|
|
|
+ <span>音频:</span>
|
|
|
+ <el-select v-model="audioUrl">
|
|
|
+ <el-option v-for="(item, index) in audioUrlArray" :key="index" :label="'音频'+(index+1)" :value="item">
|
|
|
+ <div class="selectBox">
|
|
|
+ <span>{{ '音频'+(index+1) }}</span>
|
|
|
+ <div class="controlsBox">
|
|
|
+ <span class="delSelect" @click.stop="delAudio(index)"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select_box">
|
|
|
+ <span>语言:</span>
|
|
|
+ <el-select v-model="languageRadio">
|
|
|
+ <el-option v-for="item in languageList"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.lang"
|
|
|
+ :value="item.label">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="ca-b-o-main">
|
|
|
<div
|
|
|
class="ca-b-o-m-tape"
|
|
@@ -135,7 +160,14 @@ export default {
|
|
|
uploadFileLoading: false,
|
|
|
controlsStatus: 0, //0--点击开始录音 1--录音中 2--录音完毕预览 3--文字输��
|
|
|
audioUrl: this.audioUrl2,
|
|
|
+ audioUrlArray: [],
|
|
|
languageRadio: 2, //设置选择语言
|
|
|
+ // 设置list
|
|
|
+ languageList: [
|
|
|
+ { label: 2, lang: "普通话" },
|
|
|
+ { label: 3, lang: "粤语" },
|
|
|
+ { label: 13, lang: "英语" }
|
|
|
+ ],
|
|
|
recordedForm: {
|
|
|
time: "00:00:00", //时间
|
|
|
status: 0, //0--未录音 1--正在录音 2--暂停 3--录音结束
|
|
@@ -157,17 +189,53 @@ export default {
|
|
|
videoText(newValue) {
|
|
|
this.$emit("update:videoText2", newValue);
|
|
|
},
|
|
|
- audioUrl(newValue) {
|
|
|
- this.$emit("update:audioUrl2", newValue);
|
|
|
+ // audioUrl(newValue) {
|
|
|
+ // this.$emit("update:audioUrl2", newValue);
|
|
|
+ // },
|
|
|
+ audioUrlArray(newValue) {
|
|
|
+ this.$emit("update:audioUrl2", newValue.join(','));
|
|
|
},
|
|
|
videoText2(newValue) {
|
|
|
this.videoText = newValue;
|
|
|
+ },
|
|
|
+ audioUrl2(newVal){
|
|
|
+ if(newVal){
|
|
|
+ this.audioUrlArray = newVal.split(",")
|
|
|
+ if(!this.audioUrl){
|
|
|
+ this.audioUrl = newVal.split(",")[0]
|
|
|
+ }
|
|
|
+ this.controlsStatus = 2
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.videoText = this.videoText2;
|
|
|
},
|
|
|
methods: {
|
|
|
+ delAudio(index){
|
|
|
+
|
|
|
+ this.$confirm("是否确定删掉此音频?", "提醒", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ if(this.audioUrl == this.audioUrlArray[index] && this.audioUrlArray.length > 1){
|
|
|
+ this.audioUrlArray.splice(index, 1)
|
|
|
+ this.audioUrl = this.audioUrlArray[0]
|
|
|
+ }else {
|
|
|
+ this.audioUrlArray.splice(index, 1)
|
|
|
+ }
|
|
|
+ if(!this.audioUrlArray.length){
|
|
|
+ this.audioUrl = ''
|
|
|
+ this.controlsStatus = 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ console.log("不顶替");
|
|
|
+ });
|
|
|
+ },
|
|
|
updateRecordedTime({ duration }) {
|
|
|
// 更新currentTime,将秒数转换为时分秒格式
|
|
|
let hours = Math.floor(duration / 3600);
|
|
@@ -186,20 +254,20 @@ export default {
|
|
|
if (this.uploadFileLoading) return this.$message.info("请稍等...");
|
|
|
// 开始录音
|
|
|
if (this.audioUrl) {
|
|
|
- this.$confirm("是否删掉此音频并开始录音?", "提醒", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- this.recordedForm.status = 0;
|
|
|
- this.audioUrl = "";
|
|
|
- this.onClickStartRecord();
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- console.log("不顶替");
|
|
|
- });
|
|
|
+ // this.$confirm("是否删掉此音频并开始录音?", "提醒", {
|
|
|
+ // confirmButtonText: "确定",
|
|
|
+ // cancelButtonText: "取消",
|
|
|
+ // type: "warning"
|
|
|
+ // })
|
|
|
+ // .then(() => {
|
|
|
+ this.recordedForm.status = 0;
|
|
|
+ this.audioUrl = "";
|
|
|
+ this.onClickStartRecord();
|
|
|
+ // })
|
|
|
+ // .catch(e => {
|
|
|
+ // console.log(e);
|
|
|
+ // console.log("不顶替");
|
|
|
+ // });
|
|
|
} else if (this.controlsStatus != 1 && this.recordedForm.status == 0) {
|
|
|
this.controlsStatus = 1;
|
|
|
this.recordedForm.status = 1;
|
|
@@ -453,6 +521,8 @@ export default {
|
|
|
changeAudioUrl(newValue) {
|
|
|
if (!newValue) return;
|
|
|
this.audioUrl = newValue;
|
|
|
+ this.audioUrlArray.push(newValue)
|
|
|
+ this.$forceUpdate()
|
|
|
if (![1, 2].includes(this.pageStatus)) this.pageStatus = 1;
|
|
|
this.controlsStatus = 2;
|
|
|
},
|
|
@@ -834,7 +904,7 @@ export default {
|
|
|
.text_box {
|
|
|
width: calc(100% - 20px);
|
|
|
margin: 0 auto;
|
|
|
- height: calc(100% - 75px);
|
|
|
+ height: calc(100% - 105px);
|
|
|
}
|
|
|
|
|
|
.binfo_input {
|
|
@@ -899,4 +969,67 @@ export default {
|
|
|
.audio_class >>> .slider .process {
|
|
|
background: #000;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+.ca-b-o-main2 {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 50px;
|
|
|
+ margin: 10px auto;
|
|
|
+ /* border-radius: 5px; */
|
|
|
+ transition: 0.3s;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.select_box >>> .el-inpu__inner{
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.select_box{
|
|
|
+ width: 150px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.select_box > span{
|
|
|
+ min-width: fit-content;
|
|
|
+}
|
|
|
+
|
|
|
+.select_box + .select_box{
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.selectBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.controlsBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.selectBox:hover > .controlsBox {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.delSelect {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ /* display: none; */
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: url("../../../assets/icon/classroomObservation/del.svg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* transform: translateY(7px); */
|
|
|
+}
|
|
|
</style>
|