|
@@ -2,7 +2,8 @@
|
|
|
<div v-if="wordList.length>0">
|
|
|
<ul>
|
|
|
<li v-for="(itemW,indexW) in wordList" :key="indexW" :class="['li-'+colorObj.type]">
|
|
|
- <svg-icon icon-class="voice" className="icon-voice"></svg-icon>
|
|
|
+ <svg-icon v-if="itemW.hasVoice&&!voiceSrc||itemW.hasVoice&&activeIndex!==indexW" icon-class="voice" className="icon-voice" @click="handlePlayVoice(itemW,indexW)"></svg-icon>
|
|
|
+ <img v-if="itemW.hasVoice&&voiceSrc&&activeIndex===indexW" :src="voiceSrc" class="icon-voice" />
|
|
|
<div class="word-info">
|
|
|
<div class="word-info-top">
|
|
|
<b class="word" @click="showWord(itemW)" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>
|
|
@@ -51,14 +52,19 @@ export default {
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- wordList: []
|
|
|
+ wordList: [],
|
|
|
+ audio: new Audio(),
|
|
|
+ voiceSrc: "",
|
|
|
+ voicePauseSrc: '',
|
|
|
+ voicePlaySrc: require("../../../../assets/voice-play-gray.png"),
|
|
|
+ activeIndex: null
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
computed: {},
|
|
|
//监控data中数据变化
|
|
|
watch: {
|
|
|
- list:{
|
|
|
+ list:{
|
|
|
handler(val, oldVal) {
|
|
|
const _this = this;
|
|
|
if (val) {
|
|
@@ -71,6 +77,34 @@ export default {
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
+ async handlePlayVoice(item,index) {
|
|
|
+ let _this = this;
|
|
|
+ let url = ''
|
|
|
+ if(item.originalObj.word_explain.ph_mp3_id){
|
|
|
+ await getLogin('/FileServer/GetFileInfo', {file_id:item.originalObj.word_explain.ph_mp3_id})
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ url = res.file_url
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else if(item.originalObj.word_explain.ph_file_url){
|
|
|
+ url = item.originalObj.word_explain.ph_file_url
|
|
|
+ }
|
|
|
+ if (!url) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // if (!this.audio.paused) {
|
|
|
+ // this.audio.pause();
|
|
|
+ // } else
|
|
|
+ {
|
|
|
+ _this.audio.pause();
|
|
|
+ _this.audio.load();
|
|
|
+ _this.audio.src = url;
|
|
|
+ _this.audio.loop = false;
|
|
|
+ _this.audio.play();
|
|
|
+ _this.activeIndex = index
|
|
|
+ }
|
|
|
+ },
|
|
|
// 删除
|
|
|
handleDelete(item,index){
|
|
|
this.$confirm('确定删除吗?', '提示', {
|
|
@@ -103,7 +137,19 @@ export default {
|
|
|
},
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
mounted() {
|
|
|
-
|
|
|
+ let _this = this;
|
|
|
+ _this.voiceSrc = _this.voicePauseSrc;
|
|
|
+ _this.audio.addEventListener("play", function () {
|
|
|
+ // console.log("播放");
|
|
|
+ _this.voiceSrc = _this.voicePlaySrc;
|
|
|
+ });
|
|
|
+ _this.audio.addEventListener("pause", function () {
|
|
|
+ _this.voiceSrc = _this.voicePauseSrc;
|
|
|
+ });
|
|
|
+ _this.audio.addEventListener("ended", function () {
|
|
|
+ // console.log("停止");
|
|
|
+ _this.voiceSrc = _this.voicePauseSrc;
|
|
|
+ });
|
|
|
},
|
|
|
//生命周期-创建之前
|
|
|
beforeCreated() { },
|