learning-system-portal/src/components/Qa/favoritesQaList.vue

<template>
  <div style="cursor: pointer;">
    <div class="article-list" v-for="(item, idx) in items" :key="idx" >
      <div class="article-info">
        <!-- <div class="article-info-title"> -->
          <div @click="qadetail(item)" class="art-head article-info-title" style="line-height: 30px;">
            <!-- <span class="qa-basic" :class="item.question.isResolve ? 'qa-solve' : 'qa-unSolve'">{{ item.question.isResolve ? '【已解决】' : '【待解决】' }}</span> -->
            <span style="padding-left: 5px">{{ item.question.title }} <span class="qa-bq">#提问#</span> </span>
          <el-button @click.stop="delCollectItem(item)" type="text" icon="el-icon-star-on" style="color:#8590A6">取消收藏</el-button>
          </div>
        <!-- </div> -->
        <div class="article-info-summary">
           {{displayAll(item)}}
           <span style="color:#588afc;cursor:pointer;" v-if="item.question.content.length>150" @click="changeIsAll(item,idx)">
                 {{item.isAll?'收起':'展开'}}
            </span>
          </div>

        <!--
        <div v-if="item.question.isResolve" style=";color: #333330;display:flex;margin-bottom:10px">
          <div class="one-line-ellipsis" style="color: #333330;font-size: 14px;padding-top:1px">{{ item.question.bestAnswer }}</div>
        </div>
        -->
        
      <interactBar :type="4" :readonly="true" :data="item.question" :views="false" :shares="false" :answers="true" :comments="false"></interactBar>

        <!-- <div class="article-info-tools"> -->
          <!-- <authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"></authorInfo> -->
          <!-- <span>发布时间：{{ item.question.sysCreateTime || item.publishTime | timeFilter }}</span> -->
          <!-- <span>收藏时间：{{ item.time || item.favoritesTime | timeFilter }}</span> -->
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import interactBar from '@/components/Portal/interactBar.vue';
import authorInfo from '@/components/Portal/authorInfo.vue';
export default {
  name: 'articleItems',
  props: {
    items: {
      //name,
      type: Array,
      default: () => []
    }
  },
  data(){
    return {

    }
  },
  mounted() {},
  components: {
    interactBar,
    authorInfo
  },
  filters: {
    timeFilter(item) {
      return item.split(' ')[0];
    }
  },
  methods: {
     displayAll(item) {
      if (!item.isAll && item.question.content && item.question.content.length > 150) {
        return item.question.content.slice(0, 150) + "...";
      }
      return item.question.content;
    },
     changeIsAll(item,idx) {
      console.log(item.isAll)
      item.isAll = !item.isAll;
      this.$set(this.items, idx, item);
    },
    qadetail(item) {
      // let routeData = this.$router.resolve({ path: '/qa/answer?id=' + item.question.id });
      // window.open(routeData.href, '_blank');
         this.$router.push({path:'/qa/answer',query:{id:item.question.id}})

    },

    toStudy(item) {
      this.$router.push({ path: '/uc/study/index', params: { id: item.id } });
    },
    editItem(item) {
      this.$message({ message: '编辑' + item.title + '内容', offset: 50 });
    },
    delItem(item, idx) {
      this.$confirm('您确定要删除所选文章吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.items.splice(idx, 1);
          this.$message({ type: 'success', message: '删除成功!', offset: 50 });
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除', offset: 50 });
        });
    },
    delCollectItem(item) {
      this.$confirm('您确定要取消收藏吗？', '取消提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('confirm', item);
          // apiFavorites.del(item){
          //   console.log(this.$parent,"我拿到的父组件")
          // }
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.qa-bq{
  font-size: 16px;
  color: #333333;
}
.art-head{
  display: flex;
  button{
    margin-left: auto;
  }
}
// .one-line-ellipsis {
//   display: -webkit-box;
//   white-space:pre-wrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 1;
//   box-sizing: border-box;
// }
.text-status1 {
  padding: 3px;
  border: 1px dotted #1ea0fa;
  color: #1ea0fa;
}
.text-status2 {
  padding: 3px;
  border: 1px dotted #00aa00;
  color: #00aa00;
}
.text-status3 {
  padding: 3px;
  border: 1px dotted #ff0000;
  color: #ff0000;
}
.article-list {
  cursor: pointer;
  position: relative;
  margin: 5px 0;
  border-bottom: 1px solid #e8e8e8;
  padding-top: 15px;
  padding-bottom: 15px;
}

.article-info-date {
  position: absolute;
  top: 130px;

  left: 90%;
  font-weight: 200;
  color: #666;
  i {
    margin-right: 5px;
  }
}
.article-info {
  .article-info-title {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 40px;
    // line-height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span{
		&:first-of-type{
			flex-shrink: 0;
		}
        &:last-of-type{
          overflow: hidden;
          white-space:nowrap;
          text-overflow: ellipsis;
        }
    }
  }
  .article-info-summary {
    line-height: 25px;
    font-size: 15px;
    margin: 10px 0;
    color: #333;
  }
  .article-info-tools {
    color: #999999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > span {
      font-size: 14px;
      margin-top: 2px;
      margin-left: 10px;
      color: #747474;
    }
    > span:last-of-type {
      // margin-top: -4px;
      margin-right: auto;
    }
  }
}
</style>