|
|
@@ -1,46 +1,71 @@
|
|
|
<template>
|
|
|
- <ul>
|
|
|
- <li v-for="(itemW,indexW) in list" :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>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(itemW,indexW) in list" :key="indexW">
|
|
|
+ <div class="word-info">
|
|
|
+ <div class="word-info-top">
|
|
|
+ <b class="phrase" :style="{color:colorObj.phraseColor, cursor: type ? 'opinter': ''}" @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>
|
|
|
- <b class="border"></b>
|
|
|
- <el-button
|
|
|
- @click="handleEdit(itemW,indexW)"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- class="primary-btn">
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- @click="handleDelete(itemW, indexW)"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- class="red-btn">
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <template v-if="!type">
|
|
|
+ <b class="border"></b>
|
|
|
+ <el-button
|
|
|
+ @click="handleEdit(itemW,indexW)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ class="primary-btn">
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ @click="handleDelete(itemW, indexW)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ class="red-btn">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <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>
|
|
|
+ </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 PhraseCard from "./PhraseCard.vue"
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: {},
|
|
|
- props: ["list","colorObj"],
|
|
|
+ components: {PhraseCard},
|
|
|
+ props: ["list","colorObj","type"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
+ wordcardShow: false, // 词汇卡片flag
|
|
|
+ likePhrase: [],
|
|
|
+ phraseList: [],
|
|
|
+ showObj:null,
|
|
|
+ activeObjIndex: null,
|
|
|
+ showPhraseFlag: false,
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -75,10 +100,59 @@ export default {
|
|
|
},
|
|
|
handleEdit(item){
|
|
|
this.$emit('handleAddPhrase',item)
|
|
|
+ },
|
|
|
+ // 收藏
|
|
|
+ handleCollect(item){
|
|
|
+ if(item.collect){
|
|
|
+ this.likePhrase.splice(this.likePhrase.indexOf(item.exp_title),1)
|
|
|
+ item.collect = false
|
|
|
+ this.$message({
|
|
|
+ message: "取消收藏",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.likePhrase.push(item.exp_title)
|
|
|
+ item.collect = true
|
|
|
+ this.$message({
|
|
|
+ message: "收藏成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ showItem(item,indexi){
|
|
|
+ if(!this.type){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.showObj = item
|
|
|
+ this.activeObjIndex = indexi
|
|
|
+ this.showPhraseFlag = true
|
|
|
+ },
|
|
|
+ handleData(){
|
|
|
+ this.phraseList = []
|
|
|
+ let wordList = JSON.parse(JSON.stringify(this.list))
|
|
|
+ wordList.forEach(items => {
|
|
|
+ let obj = {
|
|
|
+ exp_title: items.exp_title,
|
|
|
+ exp_content: items.exp_content,
|
|
|
+ id: items.id,
|
|
|
+ collect: false
|
|
|
+ }
|
|
|
+ this.phraseList.push(obj)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeExplain(){
|
|
|
+ this.showPhraseFlag = false
|
|
|
+ this.showObj = null
|
|
|
+ },
|
|
|
+ changeLike(obj,list){
|
|
|
}
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
+ if(this.type){
|
|
|
+ this.handleData()
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
natasha
