HM21St_Page_User/src/views/bookShelf/components/NewWordList.vue

<template>
    <div v-if="wordList.length>0">
        <ul>
            <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" />
                <svg-icon v-if="!itemW.hasVoice" icon-class="voice" className="icon-voice" style="color:rgba(78, 89, 105, 0.3)"></svg-icon>
                <div class="word-info">
                    <div class="word-info-top">
                        <b class="word" @click="showWord(itemW)" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>
                        <span class="symbol" :style="{color:colorObj.newWordOtherColor}">{{itemW.symbol}}</span>
                        <span class="star" v-if="itemW.rate">
                            <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in itemW.rate" :key="indexS" :style="{color:colorObj.newWordStar}"></svg-icon>
                        </span>
                        <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.para}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <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> -->
            </li>
        </ul>
        <el-dialog
            :visible.sync="wordcardShow"
            :show-close="false"
            :close-on-click-modal="false"
            width="570px"
            class="login-dialog"
            v-if="wordcardShow">
            <WordCard @closeWord="closeWord" />
        </el-dialog>
    </div>
    
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { getLogin } from "@/api/ajax";
import WordCard from "../../personalCenter/components/WordCard.vue"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {WordCard},
  props: ["list","colorObj"],
  data() {
    //这里存放数据
    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: {
    // 收藏
    handleCollect(item){
        if(item.collect){
            let MethodName = "/ShopServer/Client/CollectManager/CancelCollect_Word";
            let data = {
                word: item.word,
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                if(res.status===1){
                    item.collect = false
                    this.$forceUpdate()
                    this.$message({
                        message: "取消收藏",
                        type: "success",
                    });
                }
            })
            .catch(() => {
            });
        }else{
            let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Word";
            let data = {
                word: item.word,
                pinyin: item.symbol,
                explain: JSON.stringify(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,
                word_id: item.id
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                this.$forceUpdate()
                if(res.status===1){
                    item.collect = true
                    this.$message({
                        message: "收藏成功",
                        type: "success",
                    });
                }
            })
            .catch(() => {
            }); 
        }
    },
    // 查看单词卡片
    showWord(obj){
        this.wordcardShow = true
    },
    // 关闭单词卡片
    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,
                id: items.id
            }
            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() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
ul{
    li{
        padding: 8px;
        display: flex;
        margin: 1px 0;
        border-radius: 4px;
        &:hover{
            background: #FFFFFF;
        }
        &.li-darkGreen{
            &:hover{
                background: #ECEFED;
            }
        }
        &.li-darkBlue{
            &:hover{
                background: #4E5969;
            }
        }
        &.li-armyGreen{
            &:hover{
                background: #66736D;
            }
        }
        .icon-voice{
            width: 24px;
            height: 24px;
            padding: 4px;
            color: #4E5969;
            margin-right: 8px;
            cursor: pointer;
        }
        .xuhao{
            min-width: 22px;
            display: block;
            font-size: 14px;
            line-height: 22px;
            color: #2F3742;
        }
        .word-info{
            flex: 1;
        }
        .sentence{
            font-size: 14px;
            line-height: 22px;
            color: #2F3742;
        }
        .icon-like{
            // color: #F2555A;
            width: 24px;
            height: 24px;
            padding: 4px;
            margin: 0 0 0 8px;
            cursor: pointer;
            &.active{
              color: #F2555A;  
            }
        }
        .word-type{
            padding: 1px 8px;
            border-radius: 2px;
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
            height: 26px;
        }
        .el-icon-arrow-right{
            width: 24px;
            height: 24px;
            color: #929CA8;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
        }
        .word-info-top{
            display: flex;
            .word{
                font-weight: 700;
                font-size: 14px;
                line-height: 22px;
                color: #175DFF;
                margin-right: 8px;
                font-family: 'Arial';
                cursor: pointer;
            }
            .phrase{
                font-weight: 500;
                font-size: 14px;
                line-height: 22px;
                color: #ED5F00;
            }
            .symbol{
                font-size: 14px;
                line-height: 22px;
                color: #4E5969;
                margin-right: 8px;
                font-family: 'Arial';
            }
            .star{
                margin-right: 8px;
                line-height: 20px;
            }
            .para-list{
                flex: 1;
                .para{
                    display: flex;
                    font-size: 14px;
                    line-height: 22px;
                    color: #4E5969;
                    margin-bottom: 4px;
                    .cixing{
                        margin-right: 4px;
                    }
                }
            }
        }
        .word-info-bottom{
            font-size: 12px;
            line-height: 20px;
            color: #929CA8;
            margin: 4px 8px 0 0;
            span{
                margin-right: 8px;
            }
        }
    }
}
</style>