|
|
@@ -4,17 +4,20 @@
|
|
|
<div
|
|
|
:class="['record-main', microphoneStatus ? 'active' : '']"
|
|
|
>
|
|
|
- <div class="record-main-inner" @click="microphone">
|
|
|
- <div class="record" />
|
|
|
- <span v-if="microphoneStatus" class="record-time">{{
|
|
|
+ <div class="record-main-inner" @click="microphone" v-if="!microphoneStatus">
|
|
|
+ <div class="record">
|
|
|
+ <svg-icon icon-class="Voice-luyin" :style="{color:'#fff',fontSize:'28px'}"></svg-icon>
|
|
|
+ </div>
|
|
|
+ <!-- <span v-if="microphoneStatus" class="record-time">{{
|
|
|
handleDateTime(recordtime)
|
|
|
- }}</span>
|
|
|
+ }}</span> -->
|
|
|
</div>
|
|
|
+ <img @click="microphone" class="luyin-gif" :style="{width:'56px'}" v-else src="../../assets/voice-gif.png" />
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
v-if="
|
|
|
- !microphoneStatus && recordList.length > 0
|
|
|
+ !microphoneStatus && recordList.length > 0 &&selectIndex || selectIndex == 0
|
|
|
"
|
|
|
:class="[
|
|
|
'hasRecord',
|
|
|
@@ -31,31 +34,31 @@
|
|
|
)
|
|
|
"
|
|
|
>
|
|
|
- <svg-icon icon-class="play-fill" className="icon-svg"></svg-icon>
|
|
|
+ <svg-icon icon-class="pause" className="icon-svg" v-if="hasMicro!=='normal'"></svg-icon>
|
|
|
+ <svg-icon icon-class="play-fill" className="icon-svg" v-else></svg-icon>
|
|
|
</div>
|
|
|
- <span
|
|
|
+ <!-- <span
|
|
|
class="record-time"
|
|
|
>{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
|
|
|
- >
|
|
|
- <el-select
|
|
|
+ > -->
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
v-model="selectIndex"
|
|
|
placeholder="No recording"
|
|
|
no-data-text="No recording"
|
|
|
:popper-append-to-body="false"
|
|
|
@change="handleChangeRecord"
|
|
|
- >
|
|
|
+ class="diff-select"
|
|
|
+ :class="[bgIndex == 1 ? 'diff-select-white' : '']"
|
|
|
+ v-if="recordList.length > 0"
|
|
|
+ >
|
|
|
<el-option
|
|
|
- v-for="(item, index) in recordList"
|
|
|
- :key="'recordList' + index"
|
|
|
- :label="item.name"
|
|
|
- :value="index"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- <a
|
|
|
- class="record-delete"
|
|
|
- @click="handleDelete"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ v-for="(item, index) in recordList"
|
|
|
+ :key="'recordList' + index"
|
|
|
+ :label="'录音'+(index+1)"
|
|
|
+ :value="index">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -93,7 +96,19 @@ export default {
|
|
|
isPlaying: false,
|
|
|
};
|
|
|
},
|
|
|
- watch: {},
|
|
|
+ watch: {
|
|
|
+ answerRecordList: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ let _this = this;
|
|
|
+ _this.recordList = _this.answerRecordList
|
|
|
+ ? JSON.parse(JSON.stringify(_this.answerRecordList))
|
|
|
+ : [];
|
|
|
+
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
this.handleActive();
|
|
|
@@ -120,6 +135,8 @@ export default {
|
|
|
!_this.microphoneStatus && _this.recordList.length > 0
|
|
|
);
|
|
|
_this.$forceUpdate();
|
|
|
+ }else{
|
|
|
+ _this.selectIndex = null
|
|
|
}
|
|
|
_this.audio.addEventListener("play", function () {
|
|
|
_this.changeStatus("active");
|
|
|
@@ -168,7 +185,6 @@ export default {
|
|
|
: "Recording " + _this.recordFile,
|
|
|
id: _this.recordFile + Math.round(Math.random() * 10),
|
|
|
};
|
|
|
- console.log(this.selectData);
|
|
|
if (this.selectData) obj.selectData = this.selectData;
|
|
|
_this.recordList.push(obj);
|
|
|
_this.recordFile++;
|
|
|
@@ -191,18 +207,8 @@ export default {
|
|
|
_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
|
|
|
- );
|
|
|
- }
|
|
|
+ _this.$emit("getWavblob", _this.wavblob,reader.result);
|
|
|
+
|
|
|
};
|
|
|
}
|
|
|
_this.$emit(
|
|
|
@@ -339,9 +345,10 @@ export default {
|
|
|
// border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
// border-radius: 8px;
|
|
|
.playBack {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 24px;
|
|
|
margin-left: 8px;
|
|
|
+ color: #175DFF;
|
|
|
// background: url("../../../assets/icon/play-24-normal-Black.png") center
|
|
|
// no-repeat;
|
|
|
// background-size: 100%;
|
|
|
@@ -358,12 +365,10 @@ export default {
|
|
|
// }
|
|
|
}
|
|
|
.playBack-white {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
+ font-size: 24px;
|
|
|
margin-left: 8px;
|
|
|
- // background: url("../../../assets/icon/play-24-normal-white.png") center
|
|
|
- // no-repeat;
|
|
|
- // background-size: 100%;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #FFD617;
|
|
|
cursor: pointer;
|
|
|
// &.normal {
|
|
|
// background: url("../../../assets/icon/play-24-normal-white.png") center
|
|
|
@@ -395,18 +400,19 @@ export default {
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
.record-main {
|
|
|
- width: 162px;
|
|
|
+ // width: 162px;
|
|
|
height: 136px;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 40px 8px 40px 40px;
|
|
|
+ padding: 40px 16px 40px 40px;
|
|
|
&.active {
|
|
|
// background: url("../../../assets/NPC/vocie-gif.png") no-repeat left top;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
&-inner {
|
|
|
- padding: 16px 16px;
|
|
|
+ padding: 12px 12px;
|
|
|
box-sizing: border-box;
|
|
|
width: fit-content;
|
|
|
+ width: 56px;
|
|
|
height: 56px;
|
|
|
border-radius: 40px;
|
|
|
display: flex;
|
|
|
@@ -418,13 +424,6 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .record {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- // background: url("../../../assets/NPC/voice-24.png") center no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- }
|
|
|
.record-time {
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
@@ -444,10 +443,9 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 56px;
|
|
|
- padding: 16px 0 16px 16px;
|
|
|
- border-radius: 40px 0 0 40px;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 40px;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-right: 0px solid rgba(0, 0, 0, 0.1);
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.record-time {
|
|
|
@@ -475,8 +473,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
&-white {
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ background: rgba(0, 0, 0, 0.24);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.24);
|
|
|
border-right: 0;
|
|
|
.record-time {
|
|
|
color: #fff;
|
|
|
@@ -550,4 +548,19 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.diff-select{
|
|
|
+ margin-left: 16px;
|
|
|
+ width: 116px;
|
|
|
+ .el-input__inner{
|
|
|
+ padding: 8px 16px;
|
|
|
+ }
|
|
|
+ &-white{
|
|
|
+ .el-input__inner{
|
|
|
+ background: rgba(0, 0, 0, 0.24);
|
|
|
+ border-color: rgba(0, 0, 0, 0.24);
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
natasha