|
|
@@ -1,40 +1,55 @@
|
|
|
<template>
|
|
|
- <ul>
|
|
|
- <li v-for="(itemW,indexW) in phraseList" :key="indexW">
|
|
|
- <div class="word-info">
|
|
|
- <div class="word-info-top">
|
|
|
- <b class="phrase" :style="{color:colorObj.phraseColor}">{{itemW.exp_title}}</b>
|
|
|
- <div class="para-list">
|
|
|
- <div class="para">
|
|
|
- <span class="shiyi" :style="{color:colorObj.phraseOhterColor}">{{itemW.exp_content}}</span>
|
|
|
+ <div v-if="phraseList">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(itemW,indexW) in phraseList" :key="indexW">
|
|
|
+ <div class="word-info">
|
|
|
+ <div class="word-info-top">
|
|
|
+ <b class="phrase" :style="{color:colorObj.phraseColor}" @click="showItem(itemW,indexW)">{{itemW.exp_title}}</b>
|
|
|
+ <div class="para-list">
|
|
|
+ <div class="para">
|
|
|
+ <span class="shiyi" :style="{color:colorObj.phraseOhterColor}">{{itemW.exp_content}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <template v-if="!noLike">
|
|
|
- <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>
|
|
|
- </template>
|
|
|
- <!-- <i class="el-icon-arrow-right"></i> -->
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <template v-if="!noLike">
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+ <!-- <i class="el-icon-arrow-right"></i> -->
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showPhraseFlag"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="580px"
|
|
|
+ :modal="false"
|
|
|
+ class="login-dialog phrase-box"
|
|
|
+ v-if="showPhraseFlag&&showObj">
|
|
|
+ <phrase-card :dataObj="showObj" @closeWord="closeExplain" :wordList="phraseList" :activeObjIndex="activeObjIndex" @changeLike="changeLike" :likePhrase="likePhrase"></phrase-card>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
-import WordCard from "../../personalCenter/components/WordCard.vue"
|
|
|
+import PhraseCard from "./PhraseCard.vue"
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: {WordCard},
|
|
|
+ components: {PhraseCard},
|
|
|
props: ["list","colorObj","likePhraseList","noLike"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
wordcardShow: false, // 词汇卡片flag
|
|
|
likePhrase: JSON.parse(JSON.stringify(this.likePhraseList)),
|
|
|
- phraseList: []
|
|
|
+ phraseList: [],
|
|
|
+ showObj:null,
|
|
|
+ activeObjIndex: null,
|
|
|
+ showPhraseFlag: false,
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -65,13 +80,13 @@ export default {
|
|
|
.then((res) => {
|
|
|
this.loading = false
|
|
|
if(res.status===1){
|
|
|
+ this.likePhrase.splice(this.likePhrase.indexOf(item.exp_title),1)
|
|
|
+ this.$emit('changeLike','likePhraseList',this.likePhrase)
|
|
|
item.collect = false
|
|
|
this.$message({
|
|
|
message: "取消收藏",
|
|
|
type: "success",
|
|
|
});
|
|
|
- this.likePhrase.splice(this.likePhrase.indexOf(item.exp_title),1)
|
|
|
- this.$emit('changeLike','likePhraseList',this.likePhrase)
|
|
|
}
|
|
|
})
|
|
|
.catch(() => {
|
|
|
@@ -88,18 +103,24 @@ export default {
|
|
|
.then((res) => {
|
|
|
this.loading = false
|
|
|
if(res.status===1){
|
|
|
+ this.likePhrase.push(item.exp_title)
|
|
|
+ this.$emit('changeLike','likePhraseList',this.likePhrase)
|
|
|
item.collect = true
|
|
|
this.$message({
|
|
|
message: "收藏成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
- this.likePhrase.push(item.exp_title)
|
|
|
- this.$emit('changeLike','likePhraseList',this.likePhrase)
|
|
|
}
|
|
|
})
|
|
|
.catch(() => {
|
|
|
});
|
|
|
}
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ showItem(item,indexi){
|
|
|
+ this.showObj = item
|
|
|
+ this.activeObjIndex = indexi
|
|
|
+ this.showPhraseFlag = true
|
|
|
},
|
|
|
handleData(){
|
|
|
this.phraseList = []
|
|
|
@@ -109,10 +130,17 @@ export default {
|
|
|
exp_title: items.exp_title,
|
|
|
exp_content: items.exp_content,
|
|
|
id: items.id,
|
|
|
- collect: this.likePhraseList.indexOf(items.exp_title)>-1?true:false
|
|
|
+ collect: this.likePhrase.indexOf(items.exp_title)>-1?true:false
|
|
|
}
|
|
|
this.phraseList.push(obj)
|
|
|
});
|
|
|
+ },
|
|
|
+ closeExplain(){
|
|
|
+ this.showPhraseFlag = false
|
|
|
+ this.showObj = null
|
|
|
+ },
|
|
|
+ changeLike(obj,list){
|
|
|
+ this.$emit('changeLike',obj,list)
|
|
|
}
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
@@ -147,6 +175,24 @@ ul{
|
|
|
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;
|
|
|
+ }
|
|
|
+ }
|
|
|
.xuhao{
|
|
|
min-width: 22px;
|
|
|
display: block;
|
|
|
@@ -206,6 +252,7 @@ ul{
|
|
|
line-height: 22px;
|
|
|
color: #ED5F00;
|
|
|
margin-right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.symbol{
|
|
|
font-size: 14px;
|
natasha