|
|
@@ -1,8 +1,9 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div v-if="wordList.length>0">
|
|
|
<ul>
|
|
|
- <li v-for="(itemW,indexW) in list" :key="indexW" :class="['li-'+colorObj.type]">
|
|
|
- <svg-icon icon-class="voice" className="icon-voice"></svg-icon>
|
|
|
+ <li v-for="(itemW,indexW) in wordList" :key="indexW" :class="['li-'+colorObj.type]">
|
|
|
+ <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>
|
|
|
@@ -13,12 +14,12 @@
|
|
|
<div class="para-list">
|
|
|
<div class="para" v-for="(itemP,indexP) in itemW.paraList" :key="indexP">
|
|
|
<span class="cixing" :style="{color:colorObj.newWordOtherColor}">{{itemP.cixing}}</span>
|
|
|
- <span class="shiyi" :style="{color:colorObj.newWordOtherColor}">{{itemP.shiyi}}</span>
|
|
|
+ <span class="shiyi" :style="{color:colorObj.newWordOtherColor}">{{itemP.para}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <label class="word-type" :style="{color:colorObj.newWordType[itemW.type].color,background:colorObj.newWordType[itemW.type].bg}">{{colorObj.newWordType[itemW.type].text}}</label>
|
|
|
+ <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?olorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
|
|
|
<svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
|
|
|
<svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>
|
|
|
<!-- <i class="el-icon-arrow-right"></i> -->
|
|
|
@@ -40,7 +41,7 @@
|
|
|
<script>
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
-
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
import WordCard from "../../personalCenter/components/WordCard.vue"
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -50,13 +51,28 @@ export default {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
wordcardShow: false, // 词汇卡片flag
|
|
|
+ wordList: [],
|
|
|
+ audio: new Audio(),
|
|
|
+ voiceSrc: "",
|
|
|
+ voicePauseSrc: '',
|
|
|
+ voicePlaySrc: require("../../../assets/voice-play-gray.png"),
|
|
|
+ activeIndex: null
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
computed: {},
|
|
|
//监控data中数据变化
|
|
|
watch: {
|
|
|
-
|
|
|
+ list:{
|
|
|
+ handler(val, oldVal) {
|
|
|
+ const _this = this;
|
|
|
+ if (val) {
|
|
|
+ this.handleData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
@@ -64,18 +80,37 @@ export default {
|
|
|
handleCollect(item){
|
|
|
if(item.collect){
|
|
|
item.collect = false
|
|
|
+ this.$forceUpdate()
|
|
|
this.$message({
|
|
|
message: "取消收藏",
|
|
|
type: "success",
|
|
|
});
|
|
|
}else{
|
|
|
- item.collect = true
|
|
|
- this.$message({
|
|
|
- message: "收藏成功",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
+ let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Word";
|
|
|
+ let data = {
|
|
|
+ word: item.word,
|
|
|
+ pinyin: item.symbol,
|
|
|
+ definition_list: item.paraList,
|
|
|
+ is_new: "true",
|
|
|
+ audio_file_id: item.word_explain&&item.word_explain.ph_mp3_id?item.word_explain.ph_mp3_id:'',
|
|
|
+ audio_file_url: item.word_explain&&item.word_explain.ph_file_url?item.word_explain.ph_file_url:'',
|
|
|
+ article_id: this.$route.query.id
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$forceUpdate()
|
|
|
+ if(res.status===1){
|
|
|
+ item.collect = true
|
|
|
+ this.$message({
|
|
|
+ message: "收藏成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ });
|
|
|
}
|
|
|
- this.$forceUpdate()
|
|
|
},
|
|
|
// 查看单词卡片
|
|
|
showWord(obj){
|
|
|
@@ -85,13 +120,72 @@ export default {
|
|
|
closeWord(){
|
|
|
this.wordcardShow = false
|
|
|
},
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleData(){
|
|
|
+ this.wordList = []
|
|
|
+ let wordList = JSON.parse(JSON.stringify(this.list))
|
|
|
+ wordList.forEach(items => {
|
|
|
+ let obj = {
|
|
|
+ src: items.ph_file_url?items.ph_file_url:'',
|
|
|
+ word: items.word_name,
|
|
|
+ symbol: items.word_explain.ph?items.word_explain.ph:'',
|
|
|
+ paraList: items.word_explain.word_para_list,
|
|
|
+ type: items.word_explain.vl_level?items.word_explain.vl_level:'',
|
|
|
+ typeCn: items.word_explain.vl_level_name?items.word_explain.vl_level_name:'',
|
|
|
+ rate: items.word_explain.star?items.word_explain.star:null,
|
|
|
+ originalObj: items,
|
|
|
+ hasVoice: items.word_explain.ph_mp3_id||items.word_explain.ph_file_url?true:false
|
|
|
+ }
|
|
|
+ this.wordList.push(obj)
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
+ this.handleData()
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问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() { },
|
natasha