|
|
@@ -3,10 +3,10 @@
|
|
|
<div :class="curQue.titleBg == 'white' ? 'topTitleWhite' : 'topTitle'">
|
|
|
<div class="NPC-top-left">
|
|
|
<span class="NPC-topTitle-text">{{ curQue.title }}</span>
|
|
|
- <span
|
|
|
+ <!-- <span
|
|
|
:class="['NPC-play-all', playClass]"
|
|
|
@click.stop="playNewwords"
|
|
|
- ></span>
|
|
|
+ ></span> -->
|
|
|
</div>
|
|
|
<div class="NPC-top-right" @click="handleChangeTab">
|
|
|
<span class="NPC-top-right-text">{{ wordShow ? "收起" : "展开" }}</span>
|
|
|
@@ -31,6 +31,23 @@
|
|
|
v-if="curQue.option && curQue.option.length > 0"
|
|
|
v-show="wordShow"
|
|
|
>
|
|
|
+ <div
|
|
|
+ class="aduioLine-box"
|
|
|
+ v-if="
|
|
|
+ curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <AudioLine
|
|
|
+ audioId="SelectYinjieAudio"
|
|
|
+ :mp3="curQue.mp3_list[0].url"
|
|
|
+ :getCurTime="getCurTime"
|
|
|
+ :themeColor="themeColor"
|
|
|
+ :ed="ed"
|
|
|
+ type="audioLine"
|
|
|
+ ref="audioLine"
|
|
|
+ @handleListenRead="handleListenRead"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
|
|
|
<li
|
|
|
class="NPC-word-tr"
|
|
|
@@ -41,6 +58,11 @@
|
|
|
:class="[
|
|
|
'NPC-word-row',
|
|
|
playClass && mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
+ curTime >= sItem.bg &&
|
|
|
+ curTime < sItem.ed &&
|
|
|
+ stopAudioS
|
|
|
+ ? 'active'
|
|
|
+ : '',
|
|
|
]"
|
|
|
v-for="(sItem, sIndex) in item"
|
|
|
:key="'curQue.option.child' + sIndex"
|
|
|
@@ -59,7 +81,7 @@
|
|
|
: themeColor == 'red'
|
|
|
? 'NPC-play-btn-red'
|
|
|
: 'NPC-play-btn-brown',
|
|
|
- playClass && mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
+ playClass && mp3_index == sItem.sIndex ? 'active' : '',
|
|
|
]"
|
|
|
@click="palyAudio(sItem.sIndex)"
|
|
|
></span>
|
|
|
@@ -68,6 +90,19 @@
|
|
|
:src="sItem.mp3_list[0].id"
|
|
|
></audio>
|
|
|
</template>
|
|
|
+ <template v-else-if="sItem.bg||sItem.ed">
|
|
|
+ <a
|
|
|
+ :class="[
|
|
|
+ 'play-btn',
|
|
|
+ curTime >= sItem.bg &&
|
|
|
+ curTime < sItem.ed &&
|
|
|
+ stopAudioS
|
|
|
+ ? 'active'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ @click="handleChangeTime(sItem.bg,sItem.ed)"
|
|
|
+ ></a>
|
|
|
+ </template>
|
|
|
<template v-else>
|
|
|
<span style="width: 16px; height: 16px"></span>
|
|
|
</template>
|
|
|
@@ -199,11 +234,12 @@
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
import WordPhraseDetail from "./components/WordPhraseDetail.vue";
|
|
|
-import { getHZChineseInfo } from "@/api/ajax";
|
|
|
+import AudioLine from "../preview/AudioLine.vue";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {
|
|
|
WordPhraseDetail,
|
|
|
+ AudioLine,
|
|
|
},
|
|
|
props: ["curQue", "themeColor", "currentTreeID", "indexs", "indexss"],
|
|
|
data() {
|
|
|
@@ -222,6 +258,9 @@ export default {
|
|
|
isSuccess: false,
|
|
|
loading: false,
|
|
|
mp3: "",
|
|
|
+ curTime: 0,
|
|
|
+ stopAudioS: false,
|
|
|
+ ed:null,
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -384,10 +423,12 @@ export default {
|
|
|
this.$refs.newwordAudio.pause();
|
|
|
},
|
|
|
initData() {
|
|
|
+ let _this = this
|
|
|
if (this.curQue.type == "NewWord_chs") {
|
|
|
let resIndex = 0;
|
|
|
let optionRes = [];
|
|
|
let mp3List = [];
|
|
|
+ let itemNumber = 0;
|
|
|
this.curQue.option.forEach((item, index) => {
|
|
|
optionRes = optionRes.concat(item);
|
|
|
item.forEach((sItem, sIndex) => {
|
|
|
@@ -401,6 +442,11 @@ export default {
|
|
|
if (sItem.mp3_list[0]) {
|
|
|
mp3List.push(sItem);
|
|
|
}
|
|
|
+ if(_this.curQue.wordTime&&_this.curQue.wordTime[itemNumber]){
|
|
|
+ sItem.bg = _this.curQue.wordTime[itemNumber].bg
|
|
|
+ sItem.ed = _this.curQue.wordTime[itemNumber].ed
|
|
|
+ }
|
|
|
+ itemNumber++;
|
|
|
});
|
|
|
});
|
|
|
this.optionRes = JSON.parse(JSON.stringify(optionRes));
|
|
|
@@ -410,6 +456,23 @@ export default {
|
|
|
handleChangeTab() {
|
|
|
this.wordShow = !this.wordShow;
|
|
|
},
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ //点击播放某个句子
|
|
|
+ handleChangeTime(time,edTime) {
|
|
|
+ let _this = this;
|
|
|
+ _this.curTime = time;
|
|
|
+ _this.stopAudioS = true
|
|
|
+ _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
|
|
|
+ _this.ed = edTime
|
|
|
+ },
|
|
|
+ handleListenRead(playFlag) {
|
|
|
+ this.stopAudioS = playFlag;
|
|
|
+ },
|
|
|
+ emptyEd(){
|
|
|
+ this.ed = null;
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
@@ -446,6 +509,9 @@ export default {
|
|
|
.NPC-zhedie {
|
|
|
width: 780px;
|
|
|
margin-bottom: 24px;
|
|
|
+ .aduioLine-box{
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
.practiceBox {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
@@ -611,6 +677,42 @@ export default {
|
|
|
display: block;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ .play-btn {
|
|
|
+ margin-top: 4px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("../../../assets/NPC/play-red.png") center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ &.active {
|
|
|
+ background-image: url("../../../assets/NPC/icon-voice-play-red.png");
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .NPC-zhedie {
|
|
|
+ .play-btn {
|
|
|
+ background: url("../../../assets/NPC/play-green.png") center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ &.active {
|
|
|
+ background-image: url("../../../assets/NPC/icon-voice-play-green.png");
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .NPC-zhedie {
|
|
|
+ .play-btn {
|
|
|
+ background: url("../../../assets/NPC/play-brown.png") center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ &.active {
|
|
|
+ background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
@keyframes firstrotate {
|
|
|
0% {
|
natasha