|
|
@@ -233,25 +233,30 @@
|
|
|
"
|
|
|
class="Soundrecord-content"
|
|
|
>
|
|
|
- <Soundrecord
|
|
|
- @handleWav="handleWav"
|
|
|
- type="promax"
|
|
|
- class="luyin-box"
|
|
|
- @handleParentPlay="handleParentPlay"
|
|
|
- />
|
|
|
- <div>
|
|
|
- <AudioLine
|
|
|
- :mp3="curQue.mp3_list[0].url"
|
|
|
- :getCurTime="getCurTime"
|
|
|
- :ref="'audioLine' + index"
|
|
|
- :audioId="'artPraAudioId' + index"
|
|
|
- :stopAudio="stopAudio"
|
|
|
- :width="555"
|
|
|
- :hideSlider="true"
|
|
|
- :bg="curQue.wordTime[index].bg"
|
|
|
- :ed="curQue.wordTime[index].ed"
|
|
|
- @handleChangeStopAudio="handleChangeStopAudio"
|
|
|
+ <div class="Soundrecord-content-inner">
|
|
|
+ <Soundrecord
|
|
|
+ @handleWav="handleWav"
|
|
|
+ type="promax"
|
|
|
+ class="luyin-box"
|
|
|
+ @getWavblob="getWavblob"
|
|
|
+ @handleParentPlay="handleParentPlay"
|
|
|
+ @sentPause="sentPause"
|
|
|
/>
|
|
|
+ <div class="compare-box">
|
|
|
+ <Audio-compare
|
|
|
+ :themeColor="themeColor"
|
|
|
+ :index="index"
|
|
|
+ :sentIndex="sentIndex"
|
|
|
+ :url="curQue.mp3_list[0].id"
|
|
|
+ :bg="curQue.wordTime[index].bg"
|
|
|
+ :ed="curQue.wordTime[index].ed"
|
|
|
+ :wavblob="wavblob"
|
|
|
+ :getCurTime="getCurTime"
|
|
|
+ :sentPause="sentPause"
|
|
|
+ :isRecord="isRecord"
|
|
|
+ :handleChangeStopAudio="handleChangeStopAudio"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -264,12 +269,14 @@
|
|
|
import { timeStrToSen } from "@/utils/index";
|
|
|
import AudioLine from "../AudioLine.vue";
|
|
|
import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
|
|
|
+import AudioCompare from "../AudioCompare.vue";
|
|
|
export default {
|
|
|
name: "ArticleView",
|
|
|
- props: ["curQue", "noFont"],
|
|
|
+ props: ["curQue", "noFont", "themeColor"],
|
|
|
components: {
|
|
|
AudioLine,
|
|
|
Soundrecord,
|
|
|
+ AudioCompare,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -282,6 +289,8 @@ export default {
|
|
|
isShowPY: true,
|
|
|
isRepeat: false,
|
|
|
currSent: null, //当前句子的时间
|
|
|
+ isRecord: false,
|
|
|
+ wavblob: null,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -293,10 +302,24 @@ export default {
|
|
|
return playing;
|
|
|
},
|
|
|
},
|
|
|
- watch: {},
|
|
|
+ watch: {
|
|
|
+ sentIndex: {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ if (newVal != oldVal) {
|
|
|
+ this.wavblob = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- pauseOther() {},
|
|
|
+ getWavblob(wavblob) {
|
|
|
+ this.wavblob = wavblob;
|
|
|
+ },
|
|
|
+ sentPause(isRecord) {
|
|
|
+ this.isRecord = isRecord;
|
|
|
+ },
|
|
|
getCurTime(curTime) {
|
|
|
let _this = this;
|
|
|
if (_this.isRepeat) {
|
|
|
@@ -613,22 +636,31 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.Soundrecord-content {
|
|
|
margin-top: 8px;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
- }
|
|
|
- .luyin-box {
|
|
|
- width: 280px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 8px 12px;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8px;
|
|
|
- height: auto;
|
|
|
- margin-right: 16px;
|
|
|
+ &-inner {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ width: 304px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .luyin-box {
|
|
|
+ width: 280px;
|
|
|
+ }
|
|
|
+ .compare-box {
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
guanchunjie
